# gulp **Repository Path**: SunChenW/gulp ## Basic Information - **Project Name**: gulp - **Description**: 大神在修炼 -- gulp - **Primary Language**: Unknown - **License**: Not specified - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 1 - **Created**: 2020-08-03 - **Last Updated**: 2021-11-13 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README **Table of Contents** *generated with [DocToc](https://github.com/thlorenz/doctoc)* - [Gulp](#gulp) - [gulp的作用](#gulp%E7%9A%84%E4%BD%9C%E7%94%A8) - [gulp的使用方式](#gulp%E7%9A%84%E4%BD%BF%E7%94%A8%E6%96%B9%E5%BC%8F) - [gulp提供的方法](#gulp%E6%8F%90%E4%BE%9B%E7%9A%84%E6%96%B9%E6%B3%95) - [gulp的启动任务](#gulp%E7%9A%84%E5%90%AF%E5%8A%A8%E4%BB%BB%E5%8A%A1) - [gulp常用插件](#gulp%E5%B8%B8%E7%94%A8%E6%8F%92%E4%BB%B6) - [gulp-file-include gulp-htmlmin](#gulp-file-include--gulp-htmlmin) - [gulp-less gulp-csso](#gulp-less-%09gulp-csso) - [gulp-babel gulp-uglify](#gulp-babel-gulp-uglify) - [gulp多任务](#gulp%E5%A4%9A%E4%BB%BB%E5%8A%A1) # Gulp ## gulp的作用 - HTML CSS JS 文件的压缩合并 - 语法转换 ES6 LESS - 公共文件抽离 - 修改文件浏览器自动刷新 ## gulp的使用方式 - 使用`npm install gulp` 下载gulp库文件 - 在项目跟目录下简历gulpfile.js文件 - 重构项目的文件夹结构，src目录放置项目源代码，dist目录放置构建后的文件 - 在gulpfile.js文件中编写任务。 - 在命令行工具中执行gulp任务。 ## gulp提供的方法 - gulp.src() 获取任务要处理的文件===输入流 - gulp.dest() 输出文件===输出流 - gulp.task() 建立gulp任务 - gulp.watch() 监控文件的变化 ```javascript /* 不使用任何插件完成基础功能：文件复制 */ // 使用gulp.task(name,callback) 建立任务 gulp.task("copy",()=>{ //读取src/img目录中的所有文件 return gulp.src("./src/img/*") // 写入到dist/img 目录 .pipe(gulp.dest("./dist/img")) }) ``` ## gulp的启动任务 我们使用`gulp`包完成了任务的创建,现在需要使用`gulp-cli`提供的命令启动这些任务。 - 全局下载gulp-cli：`npm i gulp-cli -g` - 启动gulp任务 ：gulp 任务名称 ` gulp copy ` ## gulp常用插件 - gulp-htmlmin: html文件压缩 - gulp-file-include:公共文件包含 - gulp-csso: css文件压缩 - gulp-less:less语法转换 - gulp-babel:JavaScript语法转化 - gulp-uglify:压缩混淆JavaScript - browsersync:浏览器实时刷新 ### gulp-file-include gulp-htmlmin [gulp-htmlmin](https://github.com/kangax/html-minifier) html文件的压缩 [gulp-file-include](https://www.npmjs.com/package/gulp-file-include) html文件合并/包含 - 将网页头部公共部分抽离为header.html - 在index.html页头部部分使用特定语法调用header.html公共代码 - 使用gulp-file-include完成拼接过程 ```html @@include("./views/header.html") body> ``` ```html

您好，欢迎来到博通国际货运上海有限公司！

全国热线：400-12345678工作时间：05:00-24:00在线咨询
``` ```javascript /* 公共文件 */ gulp.task("html",()=>{ let options = { removeComments: true,//清除HTML注释 collapseWhitespace: true,//压缩HTML collapseBooleanAttributes: true,//省略布尔属性的值 ==> removeEmptyAttributes: true,//删除所有空格作属性值 ==> removeScriptTypeAttributes: true,//删除