一、Gulp的基本使用

在项目的根目录安装Gulp的开发依赖
根目录下创建gulpfile.js作为项目入口文件，用于编写需要gulp自动执行的构建任务
接着使用gulp提供的命令行cli来运行构建任务

  1. $ yarn init --yes
  2. // 初始化package.json
  4. $ yarn add gulp --dev
  5. // 安装gulp
  7. $ code gulpfile.js
  8. // 创建gulpfile入口文件,定义需要执行的任务
  10. ---------------------    分割线    ---------------------
  11. // gulpfile.js
  13. // 导出的函数都会作为 gulp 任务
  14. // exports.foo = () => {
  15. //   console.log('foo task working~')
  16. // }
  18. $ yarn gulp foo
  20. // gulp 的任务函数都是异步的
  21. // 可以通过调用回调函数标识任务完成
  22. exports.foo = done => {
  23.   console.log('foo task working~')
  24.   done() // 标识任务执行完成
  25. }
  27. // default 是默认任务
  28. // 在运行是可以省略任务名参数
  29. exports.default = done => {
  30.   console.log('default task working~')
  31.   done()
  32. }
  34. // v4.0 之前需要通过 gulp.task() 方法注册任务
  35. const gulp = require('gulp')
  37. gulp.task('bar', done => {
  38.   console.log('bar task working~')
  39.   done()
  40. })

二、Gulp创建组合任务

并行任务和串行任务

  1. const { series, parallel } = require('gulp')
  3. const task1 = done => {
  4.   setTimeout(() => {
  5.     console.log('task1 working~')
  6.     done()
  7.   }, 1000)
  8. }
  10. const task2 = done => {
  11.   setTimeout(() => {
  12.     console.log('task2 working~')
  13.     done()
  14.   }, 1000)  
  15. }
  17. const task3 = done => {
  18.   setTimeout(() => {
  19.     console.log('task3 working~')
  20.     done()
  21.   }, 1000)  
  22. }
  24. // 让多个任务按照顺序依次执行
  25. exports.foo = series(task1, task2, task3)
  27. // 让多个任务同时执行
  28. exports.bar = parallel(task1, task2, task3)

三、Gulp异步任务的三种方式

gulp中的任务都是异步任务，也就是我们在JS当中经常提到的异步函数， 当我们去调用异步函数时，我们是无法明确知道调用是否完成的，都是通过函数内部通过回调或者事件的方式通知外部这个函数执行完成，那么在异步任务中我们也面临如何通知Gulp完成情况这样一个问题。
可以通过回调，promise，async、await，stream

  1. const fs = require('fs')
  3. exports.callback = done => {
  4.   console.log('callback task')
  5.   done()
  6. }
  8. exports.callback_error = done => {
  9.   console.log('callback task')
  10.   done(new Error('task failed'))
  11. }
  13. exports.promise = () => {
  14.   console.log('promise task')
  15.   return Promise.resolve()
  16. }
  18. exports.promise_error = () => {
  19.   console.log('promise task')
  20.   return Promise.reject(new Error('task failed'))
  21. }
  23. const timeout = time => {
  24.   return new Promise(resolve => {
  25.     setTimeout(resolve, time)
  26.   })
  27. }
  29. exports.async = async () => {
  30.   await timeout(1000)
  31.   console.log('async task')
  32. }
  34. //任务函数当中返回一个stream对象
  36. exports.stream = () => {
  37.   const read = fs.createReadStream('yarn.lock')
  38.   // 创建一个读取文件的文件流
  39.   const write = fs.createWriteStream('a.txt')
  40.   // 创建一个写入文件的文件流
  41.   read.pipe(write)
  42.   // read读取到的内容导入到write，相当于复制
  43.   return read
  44. }
  46. // exports.stream = done => {
  47. //   const read = fs.createReadStream('yarn.lock')
  48. //   const write = fs.createWriteStream('a.txt')
  49. //   read.pipe(write)
  50. //   read.on('end', () => {
  51. //     done()
  52. //   })
  53. // }

四、Gulp构建过程核心工作原理

构建过程大多数情况下都是将文件读出来然后进行转换再写入到另一个位置，以前我们手动操作，如今可以通过代码自动执行
简单来讲，Gulp就是基于流的构建系统，为什么构建系统使用的是文件流的方式，这是因为Gulp为了实现构建管道的概念，这样在使用扩展插件的时候就可以有统一方式
image.png
以下代码是通过底层Node的API来实现基于文件流的构建过程

  1. const fs = require('fs')
  2. const { Transform } = require('stream')
  4. exports.default = () => {
  5.   // 文件读取流
  6.   const readStream = fs.createReadStream('normalize.css')
  8.   // 文件写入流
  9.   const writeStream = fs.createWriteStream('normalize.min.css')
  11.   // 文件转换流
  12.   const transformStream = new Transform({
  13.     // 核心转换过程
  14.     transform: (chunk, encoding, callback) => {
  15.       // 通过chunk => 读取流中读取到的内容（Buffer）
  16.       const input = chunk.toString()
  17.       // 取得的是字节数组用toString转化为字符串
  18.       const output = input.replace(/\s+/g, '').replace(/\/\*.+?\*\//g, '')
  19.       // 再对转换得来的字符串替换掉空白字符和注释 
  20.       callback(null, output)
  21.       // callback函数是错误优先的回调函数，没有错误第一个参数传入null
  22.     }
  23.   })
  25.   return readStream
  26.     .pipe(transformStream) // 转换
  27.     .pipe(writeStream) // 写入
  28. }

五、Gulp文件操作API+插件的使用

通过Gulp创建构建任务的流程如下：

  • 先通过src方法创建一个读取流
  • 再借助于插件提供的转换流来实现文件加工
  • 最后通过dist方法创建一个写入流，从而写入到目标文件
  1. const { src, dest } = require('gulp')
  2. // 载入需要的方法
  3. const cleanCSS = require('gulp-clean-css')
  4. // CSS压缩插件的安装
  5. // yarn add gulp-clean-css --dev
  6. const rename = require('gulp-rename')
  7. // 压缩插件安装
  8. // yarn add gulp-rename --dev
  9. exports.default = () => {
  10.   return src('src/*.css')
  11.   // src方法创建读取流，入参是指定读取的文件路径
  12.     .pipe(cleanCSS())
  13.   // 导入到压缩转换流当中
  14.     .pipe(rename({ extname: '.min.css' }))
  15.   // 导入到重命名扩展名转换流当中
  16.     .pipe(dest('dist'))
  17.   // 导入到dest创建的写入流，指定写入的目标目录
  18. }
  1. // 插件的安装命令行
  2. // CSS压缩插件
  3. yard add glup-clean-css --dev
  5. // 指定文件重命名的扩展名插件
  6. yarn add glup-rename --dev

六、基于Gulp完成的网页应用自动化构建工作流案例

  1. 02-01-03-13-zce-gulp-extract
  2. ├─ .gitignore
  3. ├─ LICENSE
  4. ├─ package.json
  5. ├─ pages.config.js
  6. ├─ public                      // 该目录是开发网页应用程序当中不需要加工直接拷贝到最终生成的文件夹当中的文件
  7. │  └─ favicon.ico
  8. ├─ README.md
  9. └─ src                         // 该目录是开发阶段编写代码的目录，该目录下的文件都会被构建或者说都会经过转换最终放到我们生成的文件夹当中
  10.    ├─ about.html
  11.    ├─ assets
  12.    │  ├─ fonts
  13.    │  │  ├─ pages.eot
  14.    │  │  ├─ pages.svg
  15.    │  │  ├─ pages.ttf
  16.    │  │  └─ pages.woff
  17.    │  ├─ images                                // 开发过程中用的图片和字体文件需要自动的被压缩，图片中存在二进制的信息，在我们的生产环境中没有必要
  18.    │  │  ├─ brands.svg
  19.    │  │  └─ logo.png
  20.    │  ├─ scripts                            // 完成网页脚本的时候通过ES6的方式去编写，在转换的过程中自动转化为Es5的方式
  21.    │  │  └─ main.js
  22.    │  └─ styles                                // 通过sass的方式编写样式
  23.    │     ├─ demo.scss
  24.    │     ├─ main.scss
  25.    │     ├─ _icons.scss
  26.    │     └─ _variables.scss    
  27.    ├─ features.html
  28.    ├─ index.html                        // html文件是通过模板的方式去编写的，我们可以使用布局页和部分页的概念
  29.    ├─ layouts
  30.    │  └─ basic.html
  31.    └─ partials
  32.       ├─ footer.html
  33.       ├─ header.html
  34.       └─ tags.html

第一步安装Gulp

  1. $ yarn add gulp --dev

第二步样式编译

创建gulpfile.js文件并在改文件中定义任务
先定义一个名为style的私有任务也称之为私有函数，我们可以通过module.export选择性的导出函数
内部需要将通过return来让gulp获知流的状态
借着安装sass
安装的指令为

  1. $ yarn add gulp-sass --dev

首先要注意的是使用src指定读取路径时要传入第二个参数来确保转换后文件路径的完整性
其次是指定要处理的文件目录下的sass文件名若是以下划线开头的话会被默认视为被主文件所依赖的文件将不会被编译转换
另外直接使用sass的话，转换得到的css样式文件的收尾大括号将会与我们日常的开发习惯不太一样是半展开的，我们可以在sass()中写入outputStyle:’expented’，使得转换得到的css是全展开的

  1. const {
  2.   src,
  3.   dest
  4. } = require('gulp')
  5. const sass = require('gulp-sass')
  6. const style = () => {
  7.   return src('src/assets/styles/*.scss', {
  8.       base: 'src'
  9.     })
  10.     .pipe(sass({outputStyle:'expented'}))
  11.     .pipe(dest('dist'))
  12. }
  13. module.exports = {
  14.   style
  15. }

第三步脚本编译

定义脚本编译任务
要关注有以下几点：
指定读取路径看情况使用通配符
设置基准路径保留原始目录结构
通过dest设定dist的导出编译后的文件目录路径
指定好输入输出后在进行相应的脚本编译模块的安装以及使用

  1. $ yarn add gulp-babel --dev

值得注意的是单独安装gulp-babel只是唤起babel/core这个模块的转换过程
它并不像sass一样自动安装node-sass核心转换模块，我们需要手动安装babel的核心转换模块
而且还要注意的是Babel只是ES的一个转换平台,平台是不做任何事情的，具体的转换时通过Babel中的插件来实现的，这里的preset就是一个插件的集合
所以在使用Babel转换的时候必须要指定插件版本

  1. $ yarn add @babel/core @babel/preset-env --dev
  2. // 这里我们还加入了@babel/preset-env，这使得我们将会对Es的所有新特性进行转换

最终的配置如下

  1. const { src, dest } = require("gulp");
  2. const babel = require("gulp-babel");
  4. const script = () => {
  5.   return src("src/assets/scripts/*.js", { base: "src" })
  6.     .pipe(babel({ presets: ["@babel/preset-env"] }))
  7.     .pipe(dest("dist"));
  8. };
  9. module.exports = {
  10.   script,
  11. };

第四部模板文件编译

这里说的模板文件指的就是HTML文件
为了把页面当中重用的地方抽象出来，我们可以使用模板引擎swig

  1. $ yarn add gulp-swig --dev

安装了该插件过后，我们就可以正常载入该插件
这里我们要注意的是，该目录下有的多个子目录中都存在我们需要处理的html的话，我么需要使用通配符进行匹配
并且要为模板文件中的可变更数据提供数据

  1. const { src, dest } = require("gulp");
  2. const swig = require("gulp-swig");
  4. const page = () => {
  5.   return src('src/*.html', { base: 'src' })
  6.     .pipe(plugins.swig({ data, defaults: { cache: false } })) // 防止模板缓存导致页面不能及时更新
  7.     .pipe(dest('dist'))
  8. }
  9. module.exports = {
  10.   page,
  11. };

最后我们使用前面提到的组合任务来将目前使用到的几个编译插件整合起来一起运行，这里因为三者没有关联可以同时运行，所以我们使用parallel

  1. $ yarn gulp compile
  1. const compile = parallel(style, script, page)
  2. module.exports = {
  3.   compile
  4. };

第五步图片和字体文件转换

  1. $ yarn add gulp-imagemin --dev
  1. const imagemin = require('gulp-imagemin')
  2. const image = () => {
  3.   return src('src/assets/images/**', { base: 'src' })
  4.     .pipe(plugins.imagemin())
  5.     .pipe(dest('dist'))
  6. }
  7. const font = () => {
  8.   return src('src/assets/fonts/**', { base: 'src' })
  9.     .pipe(plugins.imagemin())
  10.     .pipe(dest('dist'))
  11. }
  13. module.exports = {
  14.   image,
  15.   font
  16. };

第六步其他文件及文件清除

  1. const extra = () => {
  2.   return src('public/**', { base: 'public' })
  3.     .pipe(dest('dist'))
  4. }
  6. const build = parallel(compile,extra)
  8. module.exports = {
  9.   build
  10. };

我们这里再次使用组合的方式来合并src目录下与非src目录下的拷贝构建

*额外操作，自动清除dist目录下的所有文件
使用的模块不是gulp的插件，他只是可以在gulp构建项目中使用

  1. $ yarn add del --dev

为什么可以使用这个非gulp插件呢
原因在于我们在使用gulp去定义任务的时候
gulp的任务并不是一定需要通过src去检索文件流最终pipe到dist当中
我们也可以通过自己写代码去实现这个构建过程
例如这个del模块就可以帮助我们自动去删除指定的文件，而且他是一个promise方法
gulp任务是支持promise模式的
我们可以这样操作

  1. const { src, dest, parallel, series, watch } = require('gulp')
  2. const del = require('del')
  3. const clean = () => {
  4.   return del(['dist'])
  5. }
  6. const build = series(
  7.   clean,
  8.   parallel(compile,extra)
  9. )

del方法返回的是一个Promise，所以clean任务完成过后会自动的标记完成
clean任务要放在build之前
使用series来确保clean先执行在运行build任务

第七步自动加载插件

  1. $ yarn add gulp-load-plugins --dev

通过手动require的方式载入插件的话，会很麻烦，这里我们使用gulp-load-plugins这个依赖

  1. const loadPlugins = require('gulp-load-plugins')

这里导出的是一个方法loadPlugins，它返回一个plugins的对象，所有的插件都会成为这个对象的属性，命名的方式是将’glup-‘删除

第八步热更新开发服务器

使用热更新开发服务器进行开发调试，我们可以通过gulp去启动和管理开发服务器
后续可以去配合构建任务在代码修改过后自动去编译和自动去刷新浏览器页面，这样可以大大提高开发的效率，可以有效减少开发阶段的重复操作
首先我们需要去安装一个browser-sync的模块

  1. $ yarn add browser-sync --dev

该模块会提供一个开发服务器
相比我们以往使用的普通服务器，browser-syn具有更强大的功能，支持代码修改过后自动热更新到浏览器刷新页面
该模块和del模块类似，它不属于gulp插件，我们只是通过gulp去管理它，所以我们需要单独去引入这个模块
该模块提供了一个方法去创建服务器，我们需要定义一个任务去启动它
在启动的任务中需要先使用init去初始化配置
接着设置server来配置网站的根目录

  1. const browserSync = require('browser-sync')
  2. const bs = browserSync.create()
  3. const serve = () => {
  4.   watch('src/assets/styles/*.scss', style)
  5.   watch('src/assets/scripts/*.js', script)
  6.   watch('src/*.html', page)
  7.   // watch('src/assets/images/**', image)
  8.   // watch('src/assets/fonts/**', font)
  9.   // watch('public/**', extra)
  10.   watch([
  11.     'src/assets/images/**',
  12.     'src/assets/fonts/**',
  13.     'public/**'
  14.   ], bs.reload)
  16.   bs.init({
  17.     notify: false,
  18.     // 关闭链接提示
  19.     port: 2080,
  20.     // 指定端口
  21.     // open: false,
  22.     // 关闭自动打开浏览器的行为
  23.     // files: 'dist/**',
  24.     // 指定检测的目录
  25.     server: {
  26.       baseDir: ['temp', 'src', 'public'],
  27.       routes: {
  28.         '/node_modules': 'node_modules'
  29.         // 左侧是匹配前缀，右侧是指定目录
  30.       }
  31.       // routes会优先于baseDir
  32.     }
  33.   })
  34. }

在编译的过程当中我们没有去处理node_modules的拷贝，我们只对自己编写的源代码进行了编译
通过添加特殊的路由来对下划线node_modules的网页请求指定到同一个目录文件下

第九步监事变化以及构建优化

在src目录下源代码修改过后自动的去编译
这里我们需要用到gulp提供的第二个API watch
watch会自动监测文件路径的通配符，再根据文件的变化，再去决定是否需要重新执行某个任务
watch接收两个参数，第一个就是gulp也就是通配符，监视产生构建任务的路径
第二个参数指定的是对应的任务函数

指的注意的是，在运行sever命令之前，我们应该先去执行build，原因是得先通过build先生成dist目录
「这里可能回应为swig模板迎请缓存的机制导致页面不会变化，此时需要额外将swig选项中的cache设置为false」

除了对html、js以及sass文件的监测在开发调试时是有意义的，其他的监测编译操作会添加成本

添加额外的watch的目的是为了减少构建

第十步useref文件引用处理

useref会自动处理html中的构建注释，实现引用文件的压缩合并

  1. $ yarn add gulp-useref --dev

第十一步文件压缩

  1. $ yarn add gulp-htmlmin gulp-uglify gulp-clean-css --dev
  3. $ yarn add gulp-if --dev

读取流中存在不同类型的操作需要使用gulp-if,判断类型执行指定转换流
读写同步会导致冲突产生
*htlmin({collapseWhitespace:true})折叠html所有的空白字符

  1. const useref = () => {
  2.   return src('temp/*.html', { base: 'temp' })
  3.     .pipe(plugins.useref({ searchPath: ['temp', '.'] }))
  4.     // html js css
  5.     .pipe(plugins.if(/\.js$/, plugins.uglify()))
  6.     .pipe(plugins.if(/\.css$/, plugins.cleanCss()))
  7.     .pipe(plugins.if(/\.html$/, plugins.htmlmin({
  8.       collapseWhitespace: true,
  9.         // 折叠HTML所有的空白字符
  10.       minifyCSS: true,
  11.         // 引用文件的CSS压缩
  12.       minifyJS: true
  13.     // 引用文件的JS压缩
  14.     })))
  15.     .pipe(dest('dist'))
  16. }

先执行compare在执行useref，否则的话注释已被删除

第十二步重新规划构建过程

useref打破了构建的目录结构
会被useref影响到的操作目录，我们可以使用临时目录来处理