Gulp—基于流的自动化构建工具

基本概念

官网:
	https://gulpjs.com/

中文网址:
	https://www.gulpjs.com.cn/

Gulp.js 是一个自动化构建工具,开发者可以使用它在项目开发过程中自动执行常见任务。Gulp.js 是基于 Node.js 构建的,利用 Node.js 流的威力,你可以快速构建项目。

工作原理

以流的形式，去执行构建项目的构建工作

作用

  1. 文件压缩
  2. 文件合并
  3. 文件指纹
  4. …

优点

  1. 易于使用

    通过代码优于配置的策略，Gulp 让简单的任务简单，复杂的任务可管理。

  2. 构建快速

    利用 Node.js 流的威力，你可以快速构建项目并减少频繁的 IO 操作。

  3. 插件高质

    Gulp 严格的插件指南确保插件如你期望的那样简洁高质得工作。

  4. 易于学习

    通过最少的 API，掌握 Gulp 毫不费力，构建工作尽在掌握：如同一系列流管道。

使用步骤

1、在项目根目录创建一个 gulpfile.js的配置文件

2、安装构建所需要的包
	npm i @babel/core @babel/preset-env gulp gulp-babel gulp-clean gulp-clean-css
	gulp-htmlmin gulp-rev gulp-rev-collector gulp-uglify@2.0.0 run-sequence
	
3、在gulpfile.js中编写各种任务，并且最终使用 run-sequence 将各种任务按照执行的先后顺序书写
	gulp.task('default', () => {
      console.log('default执行完毕!')

      // 先执行 clean ，再执行压缩js，css，html等任务
      runSequence('clean', ['es6toes5anduglify', 'htmlmin'])
    })

4、切换到项目根目录，在终端中执行 gulp 进行项目构建

注意:
	htmlmin压缩html及替换html中的脚本和样式链接，需要依赖于mincss任务的执行（先生成文件指纹）