Gulp 作为当下最流行的前端构建系统，其核心特点就是高效、易用。

基本使用

  1. yarn init -y
  1. yarn add gulp --dev
  1. code gulpfile.js

Gulp 最新版需要使用 done 标识任务结束。

  1. // gulp 入口文件
  3. exports.foo = done => {
  4.   console.log('foo task working');
  6.   done(); // 标识任务完成
  7. }
  9. exports.default = done => {
  10.   console.log('default task working');
  11.   done();
  12. }

gulp 4.0 之前注册 Gulp 任务需要通过 Gulp 模块内部的方法实现。Gulp 4.0 以后保留了这种方式。

  1. const gulp = require('gulp');
  3. gulp.task('bar', done => {
  4.   console.log('bar task working');
  6.   done();
  7. });

组合任务

  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. exports.foo = series(task1, task2, task3); // 串行执行
  25. exports.bar = parallel(task1, task2, task3); // 并行执行

构建 JS、CSS 时可以使用 parallel。代码部署可以使用 series，部署前必须构建完毕。

异步任务

回调方式

  1. exports.callback = done => {
  2.   console.log('callback task');
  3.   done();
  4. }
  6. exports.callback = done => {
  7.   console.log('callback task');
  8.   done(new Error('task failed'));
  9. }

Promise 方式

  1. exports.promise = () => {
  2.   console.log('promise task');
  3.   return Promise.resolve();
  4. }
  6. exports.promise = () => {
  7.   console.log('promise task');
  8.   return Promise.reject(new Error('task failed'));
  9. }

async/await 方式

  1. const timeout = time => {
  2.   return new Promise(resolve => {
  3.     setTimeout(resolve, time);
  4.   });
  5. }
  7. exports.async = async () => {
  8.   await timeout(1000);
  9.   console.log('async task');
  10. }

stream 方式

  1. exports.stream = () => {
  2.   const readStream = fs.createReadStream('package.json');
  3.   const wirteStream = fs.createWriteStream('temp.txt');
  5.   readStream.pipe(wirteStream);
  7.   return readStream;
  8. }

构建过程

输入（读取流） => 加工（转换流） => 输出（写入流）

  1. /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
  3. /* Document
  4.    ========================================================================== */
  6. /**
  7.  * 1. Correct the line height in all browsers.
  8.  * 2. Prevent adjustments of font size after orientation changes in iOS.
  9.  */
  11.  html {
  12.   line-height: 1.15; /* 1 */
  13.   -webkit-text-size-adjust: 100%; /* 2 */
  14. }
  16. /* Sections
  17.    ========================================================================== */
  19. /**
  20.  * Remove the margin in all browsers.
  21.  */
  23. body {
  24.   margin: 0;
  25. }
  27. /**
  28.  * Render the `main` element consistently in IE.
  29.  */
  31. main {
  32.   display: block;
  33. }
  35. /**
  36.  * Correct the font size and margin on `h1` elements within `section` and
  37.  * `article` contexts in Chrome, Firefox, and Safari.
  38.  */
  40. h1 {
  41.   font-size: 2em;
  42.   margin: 0.67em 0;
  43. }
  45. /* Grouping content
  46.    ========================================================================== */
  48. /**
  49.  * 1. Add the correct box sizing in Firefox.
  50.  * 2. Show the overflow in Edge and IE.
  51.  */
  53. hr {
  54.   box-sizing: content-box; /* 1 */
  55.   height: 0; /* 1 */
  56.   overflow: visible; /* 2 */
  57. }
  59. /**
  60.  * 1. Correct the inheritance and scaling of font size in all browsers.
  61.  * 2. Correct the odd `em` font sizing in all browsers.
  62.  */
  64. pre {
  65.   font-family: monospace, monospace; /* 1 */
  66.   font-size: 1em; /* 2 */
  67. }
  69. /* Text-level semantics
  70.    ========================================================================== */
  72. /**
  73.  * Remove the gray background on active links in IE 10.
  74.  */
  76. a {
  77.   background-color: transparent;
  78. }
  80. /**
  81.  * 1. Remove the bottom border in Chrome 57-
  82.  * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
  83.  */
  85. abbr[title] {
  86.   border-bottom: none; /* 1 */
  87.   text-decoration: underline; /* 2 */
  88.   text-decoration: underline dotted; /* 2 */
  89. }
  91. /**
  92.  * Add the correct font weight in Chrome, Edge, and Safari.
  93.  */
  95. b,
  96. strong {
  97.   font-weight: bolder;
  98. }
  100. /**
  101.  * 1. Correct the inheritance and scaling of font size in all browsers.
  102.  * 2. Correct the odd `em` font sizing in all browsers.
  103.  */
  105. code,
  106. kbd,
  107. samp {
  108.   font-family: monospace, monospace; /* 1 */
  109.   font-size: 1em; /* 2 */
  110. }
  112. /**
  113.  * Add the correct font size in all browsers.
  114.  */
  116. small {
  117.   font-size: 80%;
  118. }
  120. /**
  121.  * Prevent `sub` and `sup` elements from affecting the line height in
  122.  * all browsers.
  123.  */
  125. sub,
  126. sup {
  127.   font-size: 75%;
  128.   line-height: 0;
  129.   position: relative;
  130.   vertical-align: baseline;
  131. }
  133. sub {
  134.   bottom: -0.25em;
  135. }
  137. sup {
  138.   top: -0.5em;
  139. }
  141. /* Embedded content
  142.    ========================================================================== */
  144. /**
  145.  * Remove the border on images inside links in IE 10.
  146.  */
  148. img {
  149.   border-style: none;
  150. }
  152. /* Forms
  153.    ========================================================================== */
  155. /**
  156.  * 1. Change the font styles in all browsers.
  157.  * 2. Remove the margin in Firefox and Safari.
  158.  */
  160. button,
  161. input,
  162. optgroup,
  163. select,
  164. textarea {
  165.   font-family: inherit; /* 1 */
  166.   font-size: 100%; /* 1 */
  167.   line-height: 1.15; /* 1 */
  168.   margin: 0; /* 2 */
  169. }
  171. /**
  172.  * Show the overflow in IE.
  173.  * 1. Show the overflow in Edge.
  174.  */
  176. button,
  177. input { /* 1 */
  178.   overflow: visible;
  179. }
  181. /**
  182.  * Remove the inheritance of text transform in Edge, Firefox, and IE.
  183.  * 1. Remove the inheritance of text transform in Firefox.
  184.  */
  186. button,
  187. select { /* 1 */
  188.   text-transform: none;
  189. }
  191. /**
  192.  * Correct the inability to style clickable types in iOS and Safari.
  193.  */
  195. button,
  196. [type="button"],
  197. [type="reset"],
  198. [type="submit"] {
  199.   -webkit-appearance: button;
  200. }
  202. /**
  203.  * Remove the inner border and padding in Firefox.
  204.  */
  206. button::-moz-focus-inner,
  207. [type="button"]::-moz-focus-inner,
  208. [type="reset"]::-moz-focus-inner,
  209. [type="submit"]::-moz-focus-inner {
  210.   border-style: none;
  211.   padding: 0;
  212. }
  214. /**
  215.  * Restore the focus styles unset by the previous rule.
  216.  */
  218. button:-moz-focusring,
  219. [type="button"]:-moz-focusring,
  220. [type="reset"]:-moz-focusring,
  221. [type="submit"]:-moz-focusring {
  222.   outline: 1px dotted ButtonText;
  223. }
  225. /**
  226.  * Correct the padding in Firefox.
  227.  */
  229. fieldset {
  230.   padding: 0.35em 0.75em 0.625em;
  231. }
  233. /**
  234.  * 1. Correct the text wrapping in Edge and IE.
  235.  * 2. Correct the color inheritance from `fieldset` elements in IE.
  236.  * 3. Remove the padding so developers are not caught out when they zero out
  237.  *    `fieldset` elements in all browsers.
  238.  */
  240. legend {
  241.   box-sizing: border-box; /* 1 */
  242.   color: inherit; /* 2 */
  243.   display: table; /* 1 */
  244.   max-width: 100%; /* 1 */
  245.   padding: 0; /* 3 */
  246.   white-space: normal; /* 1 */
  247. }
  249. /**
  250.  * Add the correct vertical alignment in Chrome, Firefox, and Opera.
  251.  */
  253. progress {
  254.   vertical-align: baseline;
  255. }
  257. /**
  258.  * Remove the default vertical scrollbar in IE 10+.
  259.  */
  261. textarea {
  262.   overflow: auto;
  263. }
  265. /**
  266.  * 1. Add the correct box sizing in IE 10.
  267.  * 2. Remove the padding in IE 10.
  268.  */
  270. [type="checkbox"],
  271. [type="radio"] {
  272.   box-sizing: border-box; /* 1 */
  273.   padding: 0; /* 2 */
  274. }
  276. /**
  277.  * Correct the cursor style of increment and decrement buttons in Chrome.
  278.  */
  280. [type="number"]::-webkit-inner-spin-button,
  281. [type="number"]::-webkit-outer-spin-button {
  282.   height: auto;
  283. }
  285. /**
  286.  * 1. Correct the odd appearance in Chrome and Safari.
  287.  * 2. Correct the outline style in Safari.
  288.  */
  290. [type="search"] {
  291.   -webkit-appearance: textfield; /* 1 */
  292.   outline-offset: -2px; /* 2 */
  293. }
  295. /**
  296.  * Remove the inner padding in Chrome and Safari on macOS.
  297.  */
  299. [type="search"]::-webkit-search-decoration {
  300.   -webkit-appearance: none;
  301. }
  303. /**
  304.  * 1. Correct the inability to style clickable types in iOS and Safari.
  305.  * 2. Change font properties to `inherit` in Safari.
  306.  */
  308. ::-webkit-file-upload-button {
  309.   -webkit-appearance: button; /* 1 */
  310.   font: inherit; /* 2 */
  311. }
  313. /* Interactive
  314.    ========================================================================== */
  316. /*
  317.  * Add the correct display in Edge, IE 10+, and Firefox.
  318.  */
  320. details {
  321.   display: block;
  322. }
  324. /*
  325.  * Add the correct display in all browsers.
  326.  */
  328. summary {
  329.   display: list-item;
  330. }
  332. /* Misc
  333.    ========================================================================== */
  335. /**
  336.  * Add the correct display in IE 10+.
  337.  */
  339. template {
  340.   display: none;
  341. }
  343. /**
  344.  * Add the correct display in IE 10.
  345.  */
  347. [hidden] {
  348.   display: none;
  349. }
const fs = require('fs');
const { Transform } = require('stream');

exports.default = () => {
  const read = fs.createReadStream('normalize.css');
  const wirte = fs.createWriteStream('dist/normalize.min.css');

  // 代码转换
  const transform = new Transform({
    transform: (chunk, encoding, callback) => {
      const input = chunk.toString();
      const output = input.replace(/\s+/g, '').replace(/\/\*.+?\*\//g, '');
      callback(null, output);
    }
  })

  read
    .pipe(transform)
    .pipe(wirte);

  return read;
}

Gulp 官方定义就是 The streaming build system，基于流的构建系统。

Gulp 希望实现一个构建管道的概念，这样在后续扩展插件时就有很统一的方式。

文件操作 API

Gulp 已经提供的文件操作 API，相对于 node API，它更强大，更容易使用。

转换 CSS 代码

yarn add gulp-clean-css --dev

修改扩展名

yarn add gulp-rename --dev

gulpfile.js

const { src, dest } = require('gulp');
const cleanCss = require('gulp-clean-css');
const rename = require('gulp-rename');

exports.default = () => {
  return src('src/*.css')
    .pipe(cleanCss())
    .pipe(rename({ extname: '.min.css' }))
    .pipe(dest('dist'));
}

案例

yarn add gulp --dev

code gulpfile.js

样式编译

yarn add gulp-sass --dev

sass 只会转换非 为前缀的代码。以 为前缀的文件会被忽略掉。

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


const style = () => {
  return src('src/assets/styles/*.scss', { base: 'src' })
    .pipe(sass({ outputStyle: 'expanded' }))
    .pipe(dest('dist'))
}

module.exports = {
  style
}

脚本编译

yarn add gulp-babel @babel/core @babel/preset-env --dev

babel 只是一个转换平台，提供环境，具体起到转换作用的是 babel 内部的插件，preset 是插件集合。

preset-env 就是最新的所有特性的整体打包，使用它可以把所有特性都做转换。

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

const style = () => {
  return src('src/assets/styles/*.scss', { base: 'src' })
    .pipe(sass({ outputStyle: 'expanded' }))
    .pipe(dest('dist'))
}

const script = () => {
  return src('src/assets/scripts/*.js', { base: 'src' })
    .pipe(babel({ presets: ['@babel/preset-env'] }))
    .pipe(dest('dist'));
}

module.exports = {
  style,
  script
}

yarn gulp script

页面模板编译

yarn add gulp-swig --dev

const { src, dest } = require('gulp');
const sass = require('gulp-sass');
const babel = require('gulp-babel');
const swig = require('gulp-swig');

const data = require('./src/data');

const style = () => {
  return src('src/assets/styles/*.scss', { base: 'src' })
    .pipe(sass({ outputStyle: 'expanded' }))
    .pipe(dest('dist'))
}

const script = () => {
  return src('src/assets/scripts/*.js', { base: 'src' })
    .pipe(babel({ presets: ['@babel/preset-env'] }))
    .pipe(dest('dist'));
}

const page = () => {
  return src('src/*.html', { base: 'src' })
    .pipe(swig({ data }))
    .pipe(dest('dist'));
}

module.exports = {
  style,
  script,
  page
}

yarn gulp page

组合任务

const { src, dest, parallel } = require('gulp');
const sass = require('gulp-sass');
const babel = require('gulp-babel');
const swig = require('gulp-swig');

const data = require('./src/data');

const style = () => {
  return src('src/assets/styles/*.scss', { base: 'src' })
    .pipe(sass({ outputStyle: 'expanded' }))
    .pipe(dest('dist'))
}

const script = () => {
  return src('src/assets/scripts/*.js', { base: 'src' })
    .pipe(babel({ presets: ['@babel/preset-env'] }))
    .pipe(dest('dist'));
}

const page = () => {
  return src('src/*.html', { base: 'src' })
    .pipe(swig({ data }))
    .pipe(dest('dist'));
}

const compile = parallel(style, script, page);

module.exports = {
  compile
};

yarn gulp compile

图片和字体文件转换

yarn add gulp-imagemin --dev

const { src, dest, parallel } = require('gulp');
const sass = require('gulp-sass');
const babel = require('gulp-babel');
const swig = require('gulp-swig');
const imagemin = require('gulp-imagemin');

const data = require('./src/data');

const style = () => {
  return src('src/assets/styles/*.scss', { base: 'src' })
    .pipe(sass({ outputStyle: 'expanded' }))
    .pipe(dest('dist'))
}

const script = () => {
  return src('src/assets/scripts/*.js', { base: 'src' })
    .pipe(babel({ presets: ['@babel/preset-env'] }))
    .pipe(dest('dist'));
}

const page = () => {
  return src('src/*.html', { base: 'src' })
    .pipe(swig({ data }))
    .pipe(dest('dist'));
}

const image = () => {
  return src('src/assets/images/**', { base: 'src' })
    .pipe(imagemin())
    .pipe(dest('dist'))
}

const font = () => {
  return src('src/assets/fonts/**', { base: 'src' })
    .pipe(imagemin())
    .pipe(dest('dist'))
}

const compile = parallel(style, script, page, image, font);

module.exports = {
  compile
};

yarn gulp compile

其他文件及文件清除

yarn add del --dev

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

const del = require('del');

const sass = require('gulp-sass');
const babel = require('gulp-babel');
const swig = require('gulp-swig');
const imagemin = require('gulp-imagemin');

const data = require('./src/data');

const clean = () => {
  return del(['dist']);
}

const style = () => {
  return src('src/assets/styles/*.scss', { base: 'src' })
    .pipe(sass({ outputStyle: 'expanded' }))
    .pipe(dest('dist'))
}

const script = () => {
  return src('src/assets/scripts/*.js', { base: 'src' })
    .pipe(babel({ presets: ['@babel/preset-env'] }))
    .pipe(dest('dist'));
}

const page = () => {
  return src('src/*.html', { base: 'src' })
    .pipe(swig({ data }))
    .pipe(dest('dist'));
}

const image = () => {
  return src('src/assets/images/**', { base: 'src' })
    .pipe(imagemin())
    .pipe(dest('dist'))
}

const font = () => {
  return src('src/assets/fonts/**', { base: 'src' })
    .pipe(imagemin())
    .pipe(dest('dist'))
}

const extra = () => {
  return src('public/**', { base: 'public' })
    .pipe(dest('dist'));
}

const compile = parallel(style, script, page, image, font);

const build = series(clean, parallel(compile, extra));

module.exports = {
  build
};

自动加载插件

yarn add gulp-load-plugins --dev

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

const del = require('del');
const loadPlugins = require('gulp-load-plugins');

const data = require('./src/data');

const plugins = loadPlugins();

const clean = () => {
  return del(['dist']);
}

const style = () => {
  return src('src/assets/styles/*.scss', { base: 'src' })
    .pipe(plugins.sass({ outputStyle: 'expanded' }))
    .pipe(dest('dist'))
}

const script = () => {
  return src('src/assets/scripts/*.js', { base: 'src' })
    .pipe(plugins.babel({ presets: ['@babel/preset-env'] }))
    .pipe(dest('dist'));
}

const page = () => {
  return src('src/*.html', { base: 'src' })
    .pipe(plugins.swig({ data }))
    .pipe(dest('dist'));
}

const image = () => {
  return src('src/assets/images/**', { base: 'src' })
    .pipe(plugins.imagemin())
    .pipe(dest('dist'))
}

const font = () => {
  return src('src/assets/fonts/**', { base: 'src' })
    .pipe(plugins.imagemin())
    .pipe(dest('dist'))
}

const extra = () => {
  return src('public/**', { base: 'public' })
    .pipe(dest('dist'));
}

const compile = parallel(style, script, page, image, font);

const build = series(clean, parallel(compile, extra));

module.exports = {
  build
};

开发服务器

热更新开发服务器。

yarn add browser-sync --dev

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

const del = require('del');
const browserSync = require('browser-sync');
const loadPlugins = require('gulp-load-plugins');

const data = require('./src/data');

const plugins = loadPlugins();
const bs = browserSync.create();

const clean = () => {
  return del(['dist']);
}

const style = () => {
  return src('src/assets/styles/*.scss', { base: 'src' })
    .pipe(plugins.sass({ outputStyle: 'expanded' }))
    .pipe(dest('dist'))
}

const script = () => {
  return src('src/assets/scripts/*.js', { base: 'src' })
    .pipe(plugins.babel({ presets: ['@babel/preset-env'] }))
    .pipe(dest('dist'));
}

const page = () => {
  return src('src/*.html', { base: 'src' })
    .pipe(plugins.swig({ data }))
    .pipe(dest('dist'));
}

const image = () => {
  return src('src/assets/images/**', { base: 'src' })
    .pipe(plugins.imagemin())
    .pipe(dest('dist'))
}

const font = () => {
  return src('src/assets/fonts/**', { base: 'src' })
    .pipe(plugins.imagemin())
    .pipe(dest('dist'))
}

const extra = () => {
  return src('public/**', { base: 'public' })
    .pipe(dest('dist'));
}

const serve = () => {
  bs.init({
    notify: false,
    port: 3000,
    open: false,
    files: 'dist/**',
    server: {
      baseDir: 'dist',
      routes: {
        '/node_modules': 'node_modules'
      }
    }
  });
}

const compile = parallel(style, script, page, image, font);

const build = series(clean, parallel(compile, extra));

module.exports = {
  build,
  serve
};

监听变化以及构建变化

使用 gulp 的 watch 方法，配合 browserSync 的 files 属性。

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

const del = require('del');
const browserSync = require('browser-sync');
const loadPlugins = require('gulp-load-plugins');

const data = require('./src/data');

const plugins = loadPlugins();
const bs = browserSync.create();

const clean = () => {
  return del(['dist']);
}

const style = () => {
  return src('src/assets/styles/*.scss', { base: 'src' })
    .pipe(plugins.sass({ outputStyle: 'expanded' }))
    .pipe(dest('dist'));
}

const script = () => {
  return src('src/assets/scripts/*.js', { base: 'src' })
    .pipe(plugins.babel({ presets: ['@babel/preset-env'] }))
    .pipe(dest('dist'));
}

const page = () => {
  return src('src/*.html', { base: 'src' })
    .pipe(plugins.swig({ data, defaults: { cache: false } }))
    .pipe(dest('dist'));
}

const image = () => {
  return src('src/assets/images/**', { base: 'src' })
    .pipe(plugins.imagemin())
    .pipe(dest('dist'));
}

const font = () => {
  return src('src/assets/fonts/**', { base: 'src' })
    .pipe(plugins.imagemin())
    .pipe(dest('dist'));
}

const extra = () => {
  return src('public/**', { base: 'public' })
    .pipe(dest('dist'));
}

const serve = () => {
  watch('src/assets/styles/*.scss', style);
  watch('src/assets/scripts/*.js', script);
  watch('src/*.html', page);

  watch([
    'src/assets/images/**',
    'src/assets/fonts/**',
    'public/**'
  ], bs.reload);

  bs.init({
    notify: false,
    port: 3000,
    // open: false,
    files: 'dist/**',

    server: {
      baseDir: [
        'dist',
        'src',
        'public'
      ],
      routes: {
        '/node_modules': 'node_modules'
      }
    }
  });
}

const compile = parallel(style, script, page);
const build = series(clean, parallel(compile, extra, image, font));
const dev = series(compile, serve);

module.exports = {
  build,
  dev
};

开发环境

yarn gulp dev

生产环境

yarn gulp build

还有一种不使用 files 的方法，直接构建过程中追加 bs.reload 方法。

const style = () => {
  return src('src/assets/styles/*.scss', { base: 'src' })
    .pipe(plugins.sass({ outputStyle: 'expanded' }))
    .pipe(dest('temp'))
    .pipe(bs.reload({ stream: true }))
}

const serve = () => {
  watch('src/assets/styles/*.scss', style)
  watch('src/assets/scripts/*.js', script)
  watch('src/*.html', page)

  watch([
    'src/assets/images/**',
    'src/assets/fonts/**',
    'public/**'
  ], bs.reload)

  bs.init({
    notify: 3000,
    port: 2080,
    server: {
      baseDir: ['temp', 'src', 'public'],
      routes: {
        '/node_modules': 'node_modules'
      }
    }
  })
}

useref 文件引用处理

yarn add gulp-useref

const useref = () => {
  return src('dist/*.html', { base: 'dist' })
    .pipe(plugins.useref({ searchPath: ['dist', '.'] }))
    .pipe(dest('dist'));
}

module.exports = {
  useref
};

文件压缩

yarn add gulp-htmlmin gulp-uglify gulp-clean-css --dev

yarn add gulp-if --dev

htmlmin 还有其他配置，比如移除注释、删除空属性

const useref = () => {
  return src('dist/*.html', { base: 'dist' })
    .pipe(plugins.useref({ searchPath: ['dist', '.'] }))
    .pipe(plugins.if(/\.js$/, plugins.uglify()))
    .pipe(plugins.if(/\.css$/, plugins.cleanCss()))
    .pipe(plugins.if(/\.html$/, plugins.htmlmin({
      collapseWhitespace: true,
      minifyCSS: true,
      minifyJS: true
    })))
    .pipe(dest('temp'));
}

module.exports = {
  useref
};

重新规划构建过程

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

const del = require('del');
const browserSync = require('browser-sync');
const loadPlugins = require('gulp-load-plugins');

const data = require('./src/data');

const plugins = loadPlugins();
const bs = browserSync.create();

const clean = () => {
  return del(['dist']);
}

const style = () => {
  return src('src/assets/styles/*.scss', { base: 'src' })
    .pipe(plugins.sass({ outputStyle: 'expanded' }))
    .pipe(dest('temp'));
}

const script = () => {
  return src('src/assets/scripts/*.js', { base: 'src' })
    .pipe(plugins.babel({ presets: ['@babel/preset-env'] }))
    .pipe(dest('temp'));
}

const page = () => {
  return src('src/*.html', { base: 'src' })
    .pipe(plugins.swig({ data, defaults: { cache: false } }))
    .pipe(dest('temp'));
}

const image = () => {
  return src('src/assets/images/**', { base: 'src' })
    .pipe(plugins.imagemin())
    .pipe(dest('dist'));
}

const font = () => {
  return src('src/assets/fonts/**', { base: 'src' })
    .pipe(plugins.imagemin())
    .pipe(dest('dist'));
}

const extra = () => {
  return src('public/**', { base: 'public' })
    .pipe(dest('dist'));
}

const serve = () => {
  watch('src/assets/styles/*.scss', style);
  watch('src/assets/scripts/*.js', script);
  watch('src/*.html', page);

  watch([
    'src/assets/images/**',
    'src/assets/fonts/**',
    'public/**'
  ], bs.reload);

  bs.init({
    notify: false,
    port: 3000,
    open: false,
    files: 'temp/**',

    server: {
      baseDir: [
        'temp',
        'src',
        'public'
      ],
      routes: {
        '/node_modules': 'node_modules'
      }
    }
  });
}

const useref = () => {
  return src('temp/*.html', { base: 'temp' })
    .pipe(plugins.useref({ searchPath: ['temp', '.'] }))
    .pipe(plugins.if(/\.js$/, plugins.uglify()))
    .pipe(plugins.if(/\.css$/, plugins.cleanCss()))
    .pipe(plugins.if(/\.html$/, plugins.htmlmin({
      collapseWhitespace: true,
      minifyCSS: true,
      minifyJS: true
    })))
    .pipe(dest('dist'));
}

const compile = parallel(style, script, page);

const build = series(
  clean,
  parallel(
    series(compile, useref),
    extra,
    image,
    font
  )
);
const dev = series(compile, serve);

module.exports = {
  build,
  dev
};

规整构建过程

gulpfile.js

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

const del = require('del');
const browserSync = require('browser-sync');
const loadPlugins = require('gulp-load-plugins');

const data = require('./src/data');

const plugins = loadPlugins();
const bs = browserSync.create();

const clean = () => {
  return del(['dist', 'temp']);
}

const style = () => {
  return src('src/assets/styles/*.scss', { base: 'src' })
    .pipe(plugins.sass({ outputStyle: 'expanded' }))
    .pipe(dest('temp'));
}

const script = () => {
  return src('src/assets/scripts/*.js', { base: 'src' })
    .pipe(plugins.babel({ presets: ['@babel/preset-env'] }))
    .pipe(dest('temp'));
}

const page = () => {
  return src('src/*.html', { base: 'src' })
    .pipe(plugins.swig({ data, defaults: { cache: false } }))
    .pipe(dest('temp'));
}

const image = () => {
  return src('src/assets/images/**', { base: 'src' })
    .pipe(plugins.imagemin())
    .pipe(dest('dist'));
}

const font = () => {
  return src('src/assets/fonts/**', { base: 'src' })
    .pipe(plugins.imagemin())
    .pipe(dest('dist'));
}

const extra = () => {
  return src('public/**', { base: 'public' })
    .pipe(dest('dist'));
}

const serve = () => {
  watch('src/assets/styles/*.scss', style);
  watch('src/assets/scripts/*.js', script);
  watch('src/*.html', page);

  watch([
    'src/assets/images/**',
    'src/assets/fonts/**',
    'public/**'
  ], bs.reload);

  bs.init({
    notify: false,
    port: 3000,
    open: false,
    files: 'temp/**',

    server: {
      baseDir: [
        'temp',
        'src',
        'public'
      ],
      routes: {
        '/node_modules': 'node_modules'
      }
    }
  });
}

const useref = () => {
  return src('temp/*.html', { base: 'temp' })
    .pipe(plugins.useref({ searchPath: ['temp', '.'] }))
    .pipe(plugins.if(/\.js$/, plugins.uglify()))
    .pipe(plugins.if(/\.css$/, plugins.cleanCss()))
    .pipe(plugins.if(/\.html$/, plugins.htmlmin({
      collapseWhitespace: true,
      minifyCSS: true,
      minifyJS: true
    })))
    .pipe(dest('dist'));
}

const compile = parallel(style, script, page);

const build = series(
  clean,
  parallel(
    series(compile, useref),
    extra,
    image,
    font
  )
);
const develop = series(compile, serve);

module.exports = {
  clean,
  build,
  develop
};

package.json

"scripts": {
  "clean": "gulp clean",
  "build": "gulp build",
  "dev": "gulp develop"
}