构建工具gulp浅谈

gulp.js - 基于流(stream)的自动化构建工具

引言：

​ js作为一门脚本语言，在较早时候，只能通过<script>标签插进html去运行，单个的js文件离开了html就没有了意义。

​ 如果一个网站功能很多，要按照功能划分写十几个js文件，那么就要插入十几个<script src="">去引那些js文件，还需要注意顺序和位置，一方面难以维护，另一方面增加了网页加载时的请求数量。

​ 有了node之后，单独的js文件离开了html以后也可以在终端run起来，这样前端也可以在命令行里进行编程了，再然后，模块化标准实施之后，js有了引入和导出的概念，这带来了革命性的变化，不用再像之前提到的那样在html里写大量的<script src="">去运行js，只需要一个作为入口的script标签，另外的js文件做为模块导出并导入到这个入口js中。

​ 但是，问题在于，一旦js文件以<script src="">的形式插入html，那么require、export、import之类的模块语法就会报错，因为浏览器不支持模块化。模块语法是建立在node的环境下才有的。像webpack、rollup、gulp等打包工具的一个作用就是插入script标签的同时还可以让开发者在js文件之间使用require、export、import这些语法进行模块化开发，并且能够智能的将这些js模块合并压缩成一个紧实的js文件，同时可以对代码压缩和优化使其在生产环境中能够运行的更高效。当然，现代的打包工具已经不局限在将多个 js 文件打包成一个 js，而是成为了开发流程的一部分，保证开发能够使用较为高级的语法、处理兼容问题、静态资源优化等。

gulp是什么

1. 自动化构建工具，把项目工作抽象成自动化任务用 gulp 构建自动化工作流，处理项目中的资源，基于（stream）流式操作。开发人员要写一系列的任务（task），加载组件、一步一步地处理 stream。gulp 更偏向将开发流程中让人痛苦或耗时的任务自动化，从而减少所浪费的时间。
2. 出现在社区模块化时代，也就是AMD、CMD、UMD等模块化规范出现并且nodejs现世后的时期，因为其依赖于node的文件读写机制。
3. 这是一个官方的示例

const { src, dest, parallel } = require('gulp');
const pug = require('gulp-pug');
const less = require('gulp-less');
const minifyCSS = require('gulp-csso');
const concat = require('gulp-concat');

function html() {
  return src('client/templates/*.pug')
    .pipe(pug())
    .pipe(dest('build/html'))
}

function css() {
  return src('client/templates/*.less')
    .pipe(less())
    .pipe(minifyCSS())
    .pipe(dest('build/css'))
}

function js() {
  return src('client/javascript/*.js', { sourcemaps: true })
    .pipe(concat('app.min.js'))
    .pipe(dest('build/js', { sourcemaps: true }))
}

exports.js = js;
exports.css = css;
exports.html = html;
exports.default = parallel(html, css, js);       

gulp核心api

gulp核心配置文件gulpfile

1. 命名：gulpfile.js文件或是文件夹。对于typescript，使用文件重命名为gulpfile.ts并安装ts-node、typescript、@babel/core模块。对于babel，重命名为gulpfile.babel.js并安装@babel/core、@babel/register模块。

2. gulpfile分割：每个任务（task）可以被分割为独立的文件，然后导入（import）到 gulpfile 文件中并组合。目录中需要包含一个名为index.js的文件，其它文件按照模块规范，导出符合task规范的函数在index.js文件中导入即可。当使用typescript时，文件夹名称需要改为gulpfile.ts，同时目录下的文件改为.ts结尾。

值得注意的是，只有在index.js文件中通过exports.[taskName]的形式导出的函数才能注册到公开的task树中。通过exports.default导出的为默认执行。

gulp核心机制

1. 示例图：

2. task：每个 gulp 任务（task）都是一个异步的 JavaScript 函数，此函数是一个可以接收 callback 作为参数的函数，或者是一个返回 stream、promise、event emitter、child process 或 observable 类型值的函数，必须保证return以上类型值或是执行callback()，否则会告警Did you forget to signal async completion？

   task需要是具名函数，因为函数名称就是task的名称，不过匿名函数也不会报错，但是会造成误解。

3. vinyl

   vinyl: 虚拟的文件格式，描述文件的元数据对象，vinyl对象可以在插件中流转，也可以被vinyl适配器所使用，例如dest()函数。每一个Vinyl实例代表一个独立的文件、目录或者symlink符号连接。实际项目中，除了需要一个简洁的方式去描述一个文件之外，我们还需要访问这些文件，所以vinyl适配器对外暴露接口src()和dest()，它们都最终返回一个流(stream)，src接口生产一个Vinyl 对象，dest接口消费一个Vinyl 对象。

4. stream

   gulp在流转vinyl对象时是基于stream方式，使其在一次数据流转过程就可以进行多次的处理操作。

   stream流的工作方式：

   流(stream)是node.js处理流式数据的抽象接口，流是可读可写的，所有的流都是EventEmitter实例。Writable - 可写入数据的流（例如 fs.createWriteStream()）。
   Readable - 可读取数据的流（例如 fs.createReadStream()）。
   Duplex - 可读又可写的流（例如 net.Socket）。
   Transform - 在读写过程中可以修改或转换数据的 Duplex 流。

例子：从字符串创建文件

function test2 (cb) {
  var src = require('stream').Readable({ objectMode: true })
  src._read = function () {
    this.push(new Vinyl({
      cwd: "/",
      base: "/",
      path: '/file.js',
      contents: Buffer.from('var x = 123', 'utf-8')
    }))
    this.push(null)
  }

  src.pipe(dest('build/'))

  cb()
}

gulp内部，vinyl对象输出流通过through2包装为Transform流进行流转，所以使用src接口得到的是一个Transform流。

常用插件

• gulp-load-plugins：自动加载 package.json 中的 gulp 插件
• gulp-rename： 重命名
• gulp-uglify：文件压缩
• gulp-concat：文件合并
• gulp-less：编译 less
• gulp-sass：编译 sass
• gulp-clean-css：压缩 CSS 文件
• gulp-htmlmin：压缩 HTML 文件
• gulp-babel: 使用 babel 编译 JS 文件
• gulp-eslint：eslint校验
• gulp-imagemin：压缩 jpg、png、gif 等图片。注意版本兼容。
• gulp-livereload：当代码变化时，它可以帮我们自动刷新页面

gulp的适用场景

1. 多页面，静态资源密集操作型场景
2. 轻量化的任务，单独打包css文件，轻量而且逻辑清晰。
3. 流程化，一些特殊的任务，将图片发布至图床，下载某些特定文件处理后存放至本地等

gulp中使用rollup

const { rollup } = require('rollup');
const typescript = require('rollup-plugin-typescript2');
const babel = require ('gulp-babel');
const { src, dest } = require('gulp')
const uglify = require('gulp-uglify')

// Rollup 提供了基于 promise 的 API，在 `async` 任务（task）中工作的很好
module.exports = async function rol() {
  const bundle = await rollup({
    input: 'src/vendor/main.ts',
    plugins: [
      typescript({
        check: false,
        clean: true,
        tsconfigOverride: { compilerOptions: { removeComments: true } }
      })
    ]
  });

  await bundle.write({
    file: 'output/bundle.js',
    format: 'umd'
  });

  src ('output/bundle.js')
  .pipe (
    babel ({
      presets: ['@babel/env'],
    })
  )
  .pipe (uglify())
  .pipe (rrename({ extname: '.min.js' }))
  .pipe (dest ('output/'))
}

gulp中使用webpack

const { src, dest } = require('gulp');
const gulpWebpack = require('webpack-stream');
const webpack = require('webpack');

module.exports = function testWebpack (cb) {
  return src('src/entry.js')
    .pipe(gulpWebpack({
      watch: true,
      mode: 'development',
    	...[options]
    }, webpack))
    .pipe(dest('wp_dist/'));
}

结尾

gulp现在使用的场景已经很少了，可能更多的是做开发流程的规范（也很少了），不再是主力开发打包工具，不太推荐使用啦，毕竟插件都好久没有维护了。尽量webpack能解决的就使用webpack解决，实在解决不了可以尝试使用，因为gulp可以以一种侵入式不大的方式使用。