gulp

Gulp (opens new window)

gulp 与 webpack

• gulp 核心理念 task runner
  • 可以定义自己的任务系列，等待任务执行
  • 基于文件 stream 的构建流
  • 可以使用 gulp 的插件体系完成某些任务
• webpack 核心理念是 module builder
  • 一个模块化打包工具
  • 可以使用不同的 loader 来加载不同的模块
  • 可以使用各种插件在 webpack 的打包周期完成其他的任务
• 对比与 webpack
  • 思想更简单易用，更适合编写一些自动化的任务
  • 大型项目中并不会 gulp 进行构建，它本身不支持模块化

编写 gulp 任务

• 简单编写任务

  const { series } = require('gulp');

  // `clean` 函数并未被导出（export），因此被认为是私有任务（private task）。
  // 它仍然可以被用在 `series()` 组合中。
  function clean(cb) {
    // body omitted
    cb();
  }

  // `build` 函数被导出（export）了，因此它是一个公开任务（public task），并且可以被 `gulp` 命令直接调用。
  // 它也仍然可以被用在 `series()` 组合中。
  function build(cb) {
    // body omitted
    cb();
  }

  exports.build = build;
  exports.default = series(clean, build);

• 异步的任务

gulp 任务组合

• series 串行任务

• parallel 并行任务

gulp 文件读取

读取计算机的文件

• src()

  const { src, dest } = require('gulp');

  const copy = () => {
    return src('./src/**/*.js').pipe(dest('./dist'));
  };

  module.exports { copy }

• dest()

• glob 匹配规则

  • src 接收一个字符串
  • • 星号
  • ** 双星
  • ! 取反

使用 gulp 做文件转换