样式编译

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

脚本编译

  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. }
  11. module.exports = {
  12.   script
  13. }

页面编译

  1. const { src, dest } = require('gulp')
  2. const swig = require('gulp-swig')
  5. const data = {
  6.   menus: [
  7.     {
  8.       name: 'Home',
  9.       icon: 'aperture',
  10.       link: 'index.html'
  11.     },
  12.     {
  13.       name: 'Features',
  14.       link: 'features.html'
  15.     },
  16.     {
  17.       name: 'About',
  18.       link: 'about.html'
  19.     },
  20.     {
  21.       name: 'Contact',
  22.       link: '#',
  23.       children: [
  24.         {
  25.           name: 'Twitter',
  26.           link: 'https://twitter.com/w_zce'
  27.         },
  28.         {
  29.           name: 'About',
  30.           link: 'https://weibo.com/zceme'
  31.         },
  32.         {
  33.           name: 'divider'
  34.         },
  35.         {
  36.           name: 'About',
  37.           link: 'https://github.com/zce'
  38.         }
  39.       ]
  40.     }
  41.   ],
  42.   pkg: require('./package.json'),
  43.   date: new Date()
  44. }
  47. const page = () => {
  48.   return src('src/*.html', { base: 'src' })  // 遍历子目录下的html文件
  49.     .pipe(swig({ data, defaults: { cache: false } }))
  50.     .pipe(dest('dist'))
  51. }
  53. module.exports = {
  54.   page
  55. }

图片和字体编译

  1. const { src, dest, parallel } = require('gulp')
  2. const imagemin = require('gulp-imagemin')
  5. const image = () => {
  6.   return src('src/assets/images/**', { base: 'src' })
  7.     .pipe(imagemin())
  8.     .pipe(dest('dist'))
  9. }
  11. const font = () => {
  12.   return src('src/assets/fonts/**', { base: 'src' })
  13.     .pipe(imagemin())
  14.     .pipe(dest('dist'))
  15. }
  17. module.exports = {
  18.   image,
  19.   font
  20. }

其他文件及文件清除

  1. // 其他文件直接复制
  2. const extra = () => {
  3.   return src('public/**', { base: 'public' })
  4.     .pipe(dest('dist'))
  5. }
  7. // 文件清除
  8. const del = require('del')
  10. const clean = () => {
  11.   return del(['dist'])
  12. }

任务组合

  1. const { src, dest, parallel, series } = require('gulp')
  2. const compile = parallel(style, script, page, image, font)
  4. const build = series(clean, parallel(compile, extra))
  6. module.exports = {
  7.   build
  8. }

自动加载插件

  1. const loadPlugins = require('gulp-load-plugins')
  2. const plugins = loadPlugins()
  4. // 改写 style 任务
  5. const style = () => {
  6.   return src('src/assets/styles/*.scss', { base: 'src' })
  7.     .pipe(plugins.sass({ outputStyle: 'expanded' }))
  8.     .pipe(dest('dist'))
  9. }
  11. module.exports = {
  12.   style
  13. }

开发服务器

  1. const browserSync = require('browser-sync')
  3. const bs = browserSync.create()
  5. const serve = () => {
  6.   bs.init({
  7.     notify: false,  // 是否在浏览器窗口弹出提示信息， 默认 true
  8.     files: 'dist/**',  // 监视文件变化时自动刷新
  9.     port: 3080,     //  端口，默认
  10.     open: false,    // 是否自动打开浏览器，默认true
  11.     server: {
  12.       baseDir: 'dist',  // 基本路径
  13.       routes: {
  14.         '/node_modules': 'node_modules'    // 特殊路由，优先于baseDir的配置
  15.       }
  16.     }
  17.   })
  18. }
  20. module.exports = {
  21.   serve
  22. }

监视变化及构建优化

在开发阶段，字体、图片的编译是不必要的，会拖慢应用启用的速度，应该进行优化。

  1. const { src, dest, parallel, series, watch } = require('gulp')
  4. const del = require('del')
  5. const browserSync = require('browser-sync')
  7. const loadPlugins = require('gulp-load-plugins')
  10. const plugins = loadPlugins()
  11. const bs = browserSync.create()
  13. const data = {
  14.   menus: [
  15.     {
  16.       name: 'Home',
  17.       icon: 'aperture',
  18.       link: 'index.html'
  19.     },
  20.     {
  21.       name: 'Features',
  22.       link: 'features.html'
  23.     },
  24.     {
  25.       name: 'About',
  26.       link: 'about.html'
  27.     },
  28.     {
  29.       name: 'Contact',
  30.       link: '#',
  31.       children: [
  32.         {
  33.           name: 'Twitter',
  34.           link: 'https://twitter.com/w_zce'
  35.         },
  36.         {
  37.           name: 'About',
  38.           link: 'https://weibo.com/zceme'
  39.         },
  40.         {
  41.           name: 'divider'
  42.         },
  43.         {
  44.           name: 'About',
  45.           link: 'https://github.com/zce'
  46.         }
  47.       ]
  48.     }
  49.   ],
  50.   pkg: require('./package.json'),
  51.   date: new Date()
  52. }
  54. const clean = () => {
  55.   return del(['dist'])
  56. }
  59. const style = () => {
  60.   return src('src/assets/styles/*.scss', { base: 'src' })
  61.     .pipe(plugins.sass({ outputStyle: 'expanded' }))
  62.     .pipe(dest('dist'))
  63.     .pipe(bs.reload({ stream: true })) // 如果 应用服务器没有配置 files 项，可以通过这样的方式自动刷新浏览器
  64. }
  66. const script = () => {
  67.   return src('src/assets/scripts/*.js', { base: 'src' })
  68.     .pipe(plugins.babel({ presets: ['@babel/preset-env'] }))
  69.     .pipe(dest('dist'))
  70.     .pipe(bs.reload({ stream: true }))
  71. }
  73. const page = () => {
  74.   return src('src/*.html', { base: 'src' })
  75.     .pipe(plugins.swig({ data, defaults: { cache: false } }))
  76.     .pipe(dest('dist'))
  77.     .pipe(bs.reload({ stream: true }))
  78. }
  80. const image = () => {
  81.   return src('src/assets/images/**', { base: 'src' })
  82.     .pipe(plugins.imagemin())
  83.     .pipe(dest('dist'))
  84. }
  86. const font = () => {
  87.   return src('src/assets/fonts/**', { base: 'src' })
  88.     .pipe(plugins.imagemin())
  89.     .pipe(dest('dist'))
  90. }
  92. const extra = () => {
  93.   return src('public/**', { base: 'public' })
  94.     .pipe(dest('dist'))
  95. }
  97. const serve = () => {
  99.   watch('src/assets/styles/*.scss', style)
  100.   watch('src/assets/scripts/*.js', script)
  101.   watch('src/*.html', page)
  102.   watch([
  103.     'src/assets/images/**',
  104.     'src/assets/fonts/**',
  105.     'public/**',
  106.   ], bs.reload) // 当图片、字体有变化，不编译直接刷新浏览器
  107.   // watch('src/assets/images/**', image)
  108.   // watch('src/assets/fonts/**', font)
  109.   // watch('public/**', extra)
  111.   bs.init({
  112.     notify: false,
  113.     // files: 'dist/**',   
  114.     port: 3080,
  115.     // open: false,
  116.     server: {
  117.       baseDir: ['dist', 'src', 'public'],
  118.       routes: {
  119.         '/node_modules': 'node_modules'
  120.       }
  121.     }
  122.   })
  123. }
  125. const compile = parallel(style, script, page)
  127. const build = series(clean, parallel(compile, image, font, extra))
  129. const develop = series(compile, serve)
  131. module.exports = {
  132.   develop,
  133.   build,
  134. }

useref 文件引用处理

useref 插件可以在编译时处理文件中对 js 和 css 的引用路径，但是需要一定格式的注释

  1. <!-- build:css assets/styles/vendor.css -->
  2.   <link rel="stylesheet" href="/node_modules/bootstrap/dist/css/bootstrap.css">
  3.   <!-- endbuild -->
  4.   <!-- build:css assets/styles/main.css -->
  5.   <link rel="stylesheet" href="assets/styles/main.css">
  6.   <!-- endbuild -->
  8. <!-- build:js assets/scripts/vendor.js -->
  9.   <script src="/node_modules/jquery/dist/jquery.js"></script>
  10.   <script src="/node_modules/popper.js/dist/umd/popper.js"></script>
  11.   <script src="/node_modules/bootstrap/dist/js/bootstrap.js"></script>
  12.   <!-- endbuild -->
  13.   <!-- build:js assets/scripts/main.js -->
  14.   <script src="assets/scripts/main.js"></script>
  15.   <!-- endbuild -->

入口文件配置：

  1. const useref = () => {
  2.   return src('dist/*.html', { base: 'dist' })
  3.   .pipe(plugins.useref({ searchPath: ['dist', '.' ] }))
  4.   .pipe(dest('dist'))
  5. }
  7. module.exports = {
  8.   useref
  9. }
  1. 结果：
  1.  <link rel="stylesheet" href="assets/styles/vendor.css">
  2.  <link rel="stylesheet" href="assets/styles/main.css">
  4.  <script src="assets/scripts/vendor.js"></script>
  5.  <script src="assets/scripts/main.js"></script>

文件压缩

  1. const useref = () => {
  2.   return src('dist/*.html', { base: 'dist' })
  3.     .pipe(plugins.useref({ searchPath: ['dist', '.'] }))
  4.     .pipe(plugins.if(/\.js$/, plugins.uglify()))
  5.     .pipe(plugins.if(/\.css$/, plugins.cleanCss()))
  6.     .pipe(plugins.if(/\.html$/, plugins.htmlmin({
  7.       collapseWhitespace: true,
  8.       minifyCSS: true,
  9.       minifyJS: true
  10.     })))
  11.     .pipe(dest('release'))  // 这里不能输出到 dist 文件夹，不然会造成读写冲突
  12. }

重新规划构建过程

为了保持之前的构建过程，避免文件读写冲突。应该先把需要编译的样式、页面、脚本文件输出到一个临时目录，在执行 useref 任务后再输出到 dist 目录。最终的入口文件如下：

  1. const { src, dest, parallel, series, watch } = require('gulp')
  4. const del = require('del')
  5. const browserSync = require('browser-sync')
  7. const loadPlugins = require('gulp-load-plugins')
  10. const plugins = loadPlugins()
  11. const bs = browserSync.create()
  13. const data = {
  14.   menus: [
  15.     {
  16.       name: 'Home',
  17.       icon: 'aperture',
  18.       link: 'index.html'
  19.     },
  20.     {
  21.       name: 'Features',
  22.       link: 'features.html'
  23.     },
  24.     {
  25.       name: 'About',
  26.       link: 'about.html'
  27.     },
  28.     {
  29.       name: 'Contact',
  30.       link: '#',
  31.       children: [
  32.         {
  33.           name: 'Twitter',
  34.           link: 'https://twitter.com/w_zce'
  35.         },
  36.         {
  37.           name: 'About',
  38.           link: 'https://weibo.com/zceme'
  39.         },
  40.         {
  41.           name: 'divider'
  42.         },
  43.         {
  44.           name: 'About',
  45.           link: 'https://github.com/zce'
  46.         }
  47.       ]
  48.     }
  49.   ],
  50.   pkg: require('./package.json'),
  51.   date: new Date()
  52. }
  54. const clean = () => {
  55.   return del(['dist', 'temp'])
  56. }
  59. const style = () => {
  60.   return src('src/assets/styles/*.scss', { base: 'src' })
  61.     .pipe(plugins.sass({ outputStyle: 'expanded' }))
  62.     .pipe(dest('temp'))
  63.     .pipe(bs.reload({ stream: true }))
  64. }
  66. const script = () => {
  67.   return src('src/assets/scripts/*.js', { base: 'src' })
  68.     .pipe(plugins.babel({ presets: ['@babel/preset-env'] }))
  69.     .pipe(dest('temp'))
  70.     .pipe(bs.reload({ stream: true }))
  71. }
  73. const page = () => {
  74.   return src('src/*.html', { base: 'src' })
  75.     .pipe(plugins.swig({ data, defaults: { cache: false } }))
  76.     .pipe(dest('temp'))
  77.     .pipe(bs.reload({ stream: true }))
  78. }
  80. const image = () => {
  81.   return src('src/assets/images/**', { base: 'src' })
  82.     .pipe(plugins.imagemin())
  83.     .pipe(dest('dist'))
  84. }
  86. const font = () => {
  87.   return src('src/assets/fonts/**', { base: 'src' })
  88.     .pipe(plugins.imagemin())
  89.     .pipe(dest('dist'))
  90. }
  92. const extra = () => {
  93.   return src('public/**', { base: 'public' })
  94.     .pipe(dest('dist'))
  95. }
  97. const serve = () => {
  99.   watch('src/assets/styles/*.scss', style)
  100.   watch('src/assets/scripts/*.js', script)
  101.   watch('src/*.html', page)
  102.   watch([
  103.     'src/assets/images/**',
  104.     'src/assets/fonts/**',
  105.     'public/**',
  106.   ], bs.reload)
  107.   // watch('src/assets/images/**', image)
  108.   // watch('src/assets/fonts/**', font)
  109.   // watch('public/**', extra)
  111.   bs.init({
  112.     notify: false,
  113.     // files: 'dist/**',
  114.     port: 3080,
  115.     // open: false,
  116.     server: {
  117.       baseDir: ['temp', 'src', 'public'],
  118.       routes: {
  119.         '/node_modules': 'node_modules'
  120.       }
  121.     }
  122.   })
  123. }
  125. const useref = () => {
  126.   return src('temp/*.html', { base: 'temp' })
  127.     .pipe(plugins.useref({ searchPath: ['temp', '.'] }))
  128.     .pipe(plugins.if(/\.js$/, plugins.uglify()))
  129.     .pipe(plugins.if(/\.css$/, plugins.cleanCss()))
  130.     .pipe(plugins.if(/\.html$/, plugins.htmlmin({
  131.       collapseWhitespace: true,
  132.       minifyCSS: true,
  133.       minifyJS: true
  134.     })))
  135.     .pipe(dest('dist')) 
  136. }
  138. const compile = parallel(style, script, page)
  140. const build = series(clean, parallel(series(compile, useref), image, font, extra))
  142. const develop = series(compile, serve)
  144. module.exports = {
  145.   clean,
  146.   develop,
  147.   build,
  148. }

package.json 文件可以配置脚本命令。

  1. "scripts": {
  2.     "clean": "gulp clean",
  3.     "build": "gulp build",
  4.     "develop": "gulp develop"
  5.   },