• 将源代码编译成在线上环境运行的过程
  • 优势：
    • 编码阶段可以使用最新语法，提高开发效率
    • 例如使用sass编写css，使用NPM scripts定义命令
  • 常用的自动化构建工具
    • Grunt：项目大的时候构建速度慢，基于磁盘读写
    • Gulp：基于内存实现，默认同时执行多个任务
    • FIS

Grunt

  • yarn add grunt
  • 创建gruntfile.js
  1. // gruntfile.js 是grunt的入口
  2. // 用于定义一些需要grunt 自动执行的任务
  3. module.exports = grunt => {
  4.     // 默认任务
  5.     //grunt.registerTask('default', () => {
  6.     //   
  7.     //})
  8.     grunt.registerTask('default',[ 'foo', 'bar'])
  9.     grunt.registerTask('foo', () => {
  11.     })
  12.     grunt.registerTask('bar', () => {
  14.     })
  15.     // 异步操作
  16.     grunt.registerTask('async-task', function() {
  17.         const done = this.async()
  18.         setTimeout(()=>{
  19.             done()
  20.         },1000)
  21.     })
  22. }

Grunt标记任务失败

  1. module.exports = grunt => {
  2.     grunt.registerTask('bar', () => {
  3.         return false
  4.     })
  5.     grunt.registerTask('async-task', function() {
  6.         const done = this.async()
  7.         setTimeout(()=>{
  8.             done(false)
  9.         },1000)
  10.     })
  11. }
  12. //-- force 强制后面任务执行

Grunt配置选项方法

  1. module.exports = grunt => {
  2.     grunt.initConfig({
  3.         foo: {
  4.             bar: 123
  5.         }
  6.     })
  8.     grunt.registerTask("foo",() => {
  9.         console.log(grunt.config('foo.bar'))
  10.     })
  11. }

Grunt多目标任务

  1. module.exports = grunt => {
  2.     grunt.initConfig({
  3.         build: {
  4.             options:{
  5.                foo: 'bar'
  6.             },
  7.             css: {
  8.                 options: {
  9.                     foo: 'baz' // 会覆盖上面的值
  10.                 }
  11.             },
  12.             js: ''
  13.         }
  14.     })
  15.     // 多目标模式，可以让任务根据配置形成多个子任务
  16.     grunt.registerMultiTask('build', function () {
  17.         console.log(this.options())
  18.         console.log(`target: ${this.target}, data: ${this.data}`)
  19.     })
  20. }

Grunt插件的使用

  1. // 封装了通用的构建任务
  2. // grunt-contrib-clean 清除文件
  3. module.exports = grunt => {
  4.     grunt.initConfig({
  5.         clean:{
  6.             temp: 'temp/**' // "temp/*.txt"
  7.         }
  8.     })
  9.     grunt.loadNpmTasks('grunt-contrib-clean')
  10. }

Grunt常用插件

  • grunt-sass

    1. // yarn add grunt-sass sass
    2. const sass = require('sass')
    3. module.exports = grunt => {
    4.   grunt.initConfig({
    5.       sass:{
    6.           options: {
    7.               sourceMap: true,
    8.               implementation: sass
    9.           }
    10.           main:{
    11.               files: {
    12.                   "dist/css/main.css": 'src/scss/main.scss'
    13.               }
    14.           }
    15.       }
    16.   })
    17.   grunt.loadNpmTasks('grunt-sass')
    18. }

  • grunt-babel

  • load-grunt-tasks

    1. // yarn add grunt-babel @babel/core @babel/preset-env --dev
    2. // yarn add load-grunt-tasks --dev
    3. const loadGruntTasks = require('load-grunt-tasks')
    4. module.exports = grunt => {
    5.   grunt.initConfig({
    6.       babel:{
    7.           options: {
    8.               presets: ['@babel/preset-env'],
    9.               sourceMap: true
    10.           }
    11.           main:{
    12.               files: {
    13.                   "dist/js/app.js": 'src/js/app.js'
    14.               }
    15.           }
    16.       }
    17.   })
    18.   loadGruntTasks(grunt) // 自动加载所有的grunt插件中的任务
    19. }

  • grunt-contrib-watch

    1. module.exports = grunt => {
    2.   grunt.initConfig({
    3.       watch:{
    4.           options: {
    5.               presets: ['@babel/preset-env'],
    6.               sourceMap: true
    7.           }
    8.           js: {
    9.               files: ['src/js/*.js'],
    10.               tasks: ['babel']
    11.           },
    12.           css: {
    13.               files: ['src/scss/*.scss'],
    14.               tasks: ['sass']
    15.           }
    16.       }
    17.   })
    18.   loadGruntTasks(grunt) // 自动加载所有的grunt插件中的任务
    19.   grunt.registerTask('default',['sass','babel','watch'])
    20. }

Gulp

  • yarn init 初始化package.json
  • yarn add gulp —dev
  • 创建gulpfile.js 入口文件
  1. exports.foo = done => {
  2.     conosle.log('foo task working')
  4.     done() // 标识任务完成
  5. }
  6. // gulp foo
  8. export.default = done => {
  9.     console.log('default task')
  10.     done()
  11. }
  12. // 直接运行 gulp
  13. // gulp4.0之前需要先引入gulp
  14. const gulp = require('gulp')
  15. gulp.task('bar', done => {
  16.     console.log("bar task")
  17.     done()
  18. })

Gulp组合任务

  1. const { series, parallel } = require('gulp')
  3. const task1 = done => {
  4.     setTimeout(() => {
  5.         console.log('task1')
  6.         done()
  7.     }, 1000)
  8. }
  9. const task2 = done => {
  10.     setTimeout(() => {
  11.         console.log('task1')
  12.         done()
  13.     }, 1000)
  14. }
  15. const task3 = done => {
  16.     setTimeout(() => {
  17.         console.log('task1')
  18.         done()
  19.     }, 1000)
  20. }
  22. exports.foo = series(task1, task2, task3)// 按顺序进行
  24. exports.bar = parallel(task1, task2, task3) // 同时进行

Gulp中的异步任务

  1. // done
  2. exports.callback_error = done => {
  3.     done(new Error('task failed'))
  4. }
  6. exports.promise = () => {
  7.     return Promise.resolve()
  8. }
  10. exports.promise_error = () => {
  11.     return Promise.reject()
  12. }
  13. const timeout = time => {
  14.     return new Promise( resolve => {
  15.         setTimeout(resolve, time)
  16.     })
  17. }
  19. exports.async = async () => {
  20.     await timeout(1000)
  21. }
  22. // 这种方式看node版本支不支持async await
  24. exports.stream = () => {
  25.     const readStream = fs.createReadStream('package.json')
  26.     const writeStream = fs.createWriteStream('temp.txt')
  27.     readStream.pipe(writeStream)
  28.     return readStream
  29. }
  30. // stream 中end事件触发结束任务
  31. exports.stream = done => {
  32.     const readStream = fs.createReadStream('package.json')
  33.     const writeStream = fs.createWriteStream('temp.txt')
  34.     readStream.pipe(writeStream)
  35.     readStream.on('end', () => {
  36.         done()
  37.     })
  38. }

Gulp构建过程核心工作原理

  1. const fs = require('fs')
  2. const { Transform } = require('stream')
  3. exporta.default = () => {
  4.     const read = fs.createReadStream('normalize.css')
  5.     const write = fs.createWriteStream('normalize.min.css')
  6.     // 文件转换流
  7.     const transform = new Transform({
  8.         // 核心转换过程实现
  9.         // chunk 读取流中读取到的内容（Buffer）
  10.         const input = chunk.toString()
  11.         const output = input.replace(/\s+/g, '').replace(/\/\*.+?\*\//g, '')
  12.         callback(null, output)
  13.     })
  14.     read.pipe(transform).pipe(write)
  15. }
  16. // gulp是基于文件流的构建方式

Gulp文件操作API + 插件的使用

  1. const { src, dest } = require('gulp')
  3. const cleanCss = require('gulp-clean-css')
  4. const rename = require('gulp-rename')
  6. export.default = () => {
  7.     return src('src/*.css')
  8.     .pipe(cleanCss())
  9.     .pipe(rename({ extname: '.min.css' }))
  10.     .pipe(dest('dist'))
  11. }

Gulp案例

  1. // yarn add gulp --dev
  2. // 项目根目录新建gulpfile.js文件
  3. const { src, dest, parallel, series } = require('gulp')
  6. // 自动加载插件
  7. const loadPlugins = require('gulp-load-plugins')
  9. const plugins = loadPlugins()
  11. //const sass = require('gulp-sass')
  12. //const babel = require('gulp-babel') // 需要安装@babel/core @babel/preset-env
  13. //const swig = require('gulp-swig')
  14. //const imagemin = require('gulp-imagemin')
  15. //const del = require('del')
  17. const style = () => {
  18.     return src('src/assets/styles/*.scss', { base: 'src' })// 保留原本目录结构
  19.     .pipe(plugins.sass({ outputStyle: 'expanded' }))
  20.     .pipe(dest('temp'))
  21.     .pipe(fs.reload({ stream: true })) // 与bs配置中的files属性用途类似
  22. }
  24. const script = () => {
  25.     return src('src/assets/scripts/*.js', { base: 'src' })
  26.     .pipe(plugins.babel({ presets: ['@babel/preset-env'] }))
  27.     .pipe(dest('temp'))
  28. }
  30. const page = () => {
  31.     return src('src/**/*.html', { base: 'src' })
  32.     .pipe(plugins.swig( { data, cache: false } )) // 将模板需要的数据导入
  33.     .pipe(dest('temp'))
  34. }
  36. const image = () => {
  37.     return src('src/assets/images/**', { base: 'src' })
  38.     .pipe(plugins.imagemin())
  39.     .pipe(dest('dist'))
  40. }
  42. const font = () => {
  43.     return src('src/assets/fonts/**', { base: 'src' })
  44.     .pipe(plugins.imagemin())
  45.     .pipe(dest('dist'))
  46. }
  48. const extra = () => {
  49.     return src('public/**', { base: 'public' })
  50.     .pipe(dest('dist'))
  51. }
  53. const clean = () => {
  54.     return del(['dist','temp'])
  55. }
  57. const compile = parallel(style, script, page, image, font)
  59. const build = series(clean, parallel(compile, extra))
  61. module.exports = {
  62.    build
  63. }

Gulp配置开发热更新服务器

  1. // browsersync
  2. const { watch } = require('gulp')
  4. const browsersync = require("browser-sync")
  6. const bs = browsersync.create()
  8. const server = () => {
  9.     // 监听src源代码的变化
  10.     watch('src/assets/styles/*.scss', style)
  11.     watch('src/assets/scripts/*.js', script)
  12.     watch('src/*.html', page)
  13.     //watch('src/assets/images/**', image)
  14.     //watch('src/assets/fonts/**', font)
  15.     //watch('public/**', extra)
  16.     watch([
  17.         'src/assets/images/**',
  18.         'src/assets/fonts/**',
  19.         'public/**'
  20.     ], bs.reload)
  21.     bs.init({
  22.         server: {
  23.             notify: false,
  24.             port: 8080,
  25.             open: true,
  26.             //files: 'temp/**', // 用来被监听的文件
  27.             baseDir: ['temp','src','public'],
  28.             routes: {
  29.                 '/node_modules': 'node_modules'
  30.             }
  31.         }
  32.     })
  33. }
  35. module.exports = {
  36.     server
  37. }

Gulp文件引用处理 useref

  1. // 将html中的build:css等构建注释的地方转换
  2. // yarn add gulp-useref --dev
  3. const useref = () => {
  4.     return src('temp/*.html', { base: 'dist' })
  5.     .pipe(plugins.useref({ searchPath: ['dist', '.'] }))
  6.     // html js css 压缩 gulp-htmlmin gulp-uglify gulp-clean-css gulp-if
  7.     .pipe(plugins.if(/\.js$/, plugins.uglify()))
  8.     .pipe(plugins.if(/\.html$/, plugins.htmlmin({ collapseWhitespace: true, minifyCss: true, minifyJs: true }))) // style script 标签中代码压缩
  9.     .pipe(plugins.if(/\.css$/, plugins.cleanCss()))
  10.     .pipe(dest('dist'))
  11. }
  13. const compile = parallel(style, script, page)
  15. const build = series(
  16.     clean,
  17.     parallel(
  18.         series(compile, useref),
  19.         image,
  20.         font,
  21.         extra
  22.     )
  23. )
  25. const develop = series(compile, serve)
  27. module.exports = {
  28.     clean,
  29.     build,
  30.     develop
  31. }
  • 可以将构建命令放到package.json的scripts中

封装自动化构建流

参考案例