前端工程化(2)—带你了解项目的自动化构建

文章内容输出来源：拉勾教育大前端高薪训练营；

前言

关于自动化构建

（此文章干货很多，中途如果遭遇挫折，运行失败，或者打退堂鼓，请直接查看总结部分，有我的终极攻略 😊）

除了第一节介绍的脚手架，自动化构建也是前端工程化中非常重要的组成部分。它使我们可以在开发环境中使用es6新特性、sass、模板引擎等高效率语法，自动转换为浏览器支持的特性，帮我们脱离开发环境兼容带来的问题，解决重复且无聊的操作。

常用的自动化构建工具以及各自特点：

• npm scripts：是实现自动化构建工作流最简单的方式，简单的构建过程可以使用，复杂的不适应。
• grunt：工作过程基于临时文件（硬盘读写）实现，构建速度相对较慢。现在不常用了。
• gulp：基于内存实现，速度更快。常用。
• fis：大而全，将典型需求集中到了内部，可直接使用。

npm scripts

npm scripts 是实现自动化构建工作流最简单的方式

简单演示：1.将src中的sass文件自动编译为css文件。2.启动一个服务器运行项目。 3.检测到scss文件变化，自动编译，编译后在自动更新到浏览器。

• 下载依赖

npm i sass --dev  //编译
npm i browser-sync --dev  //启动服务器

• 让项目先build，再serve

// package.json
 "scripts": {
    "build": "sass scss/main.scss css/style.css ",
    "preserve": "npm run build",
    "serve": "browser-sync . "
  },

• 让项目被自动检测：既要监测变化，又要启动服务器————需要同时执行多个任务，需要npm-run-all依赖 npm i npm-run-all --dev

// package.json
 "scripts": {
    "build": "sass scss/main.scss css/style.css --watch",
    "serve": "browser-sync . --files \"css/*.css\"",
    "start": "run-p build serve"
  },

grunt

tips：了解，为看源码准备。目前用的不多

基本使用

• 初始化项目与下载依赖

npm init --yes
npm install grunt --dev

• 根目录下创建gruntfile.js文件，常用api：registerTask设置任务

// Grunt 的入口文件
// 用于定义一些需要 Grunt 自动执行的任务
// 需要导出一个函数
// 此函数接收一个 grunt 的对象类型的形参
// grunt 对象中提供一些创建任务时会用到的 API

module.exports = grunt => {
  grunt.registerTask('bar', () => {
    console.log('other task')
  })

  // // default 是默认任务名称
  // // 通过 grunt 执行时可以省略
  // grunt.registerTask('default', () => {
  //   console.log('default task')
  // })

  // 第二个参数可以指定此任务的映射任务，
  // 这样执行 default 就相当于执行对应的任务
  // 这里映射的任务会按顺序依次执行，不会同步执行
  grunt.registerTask('default', ['foo', 'bar'])

}

• 运行 npx gulp 或者 npx gulp bar测试

插件

• 插件机制：插件内部封装了通用的构建任务，不用自己手动设置。

  initConfig设置配置，loadNpmTasks加载插件（插件要install）

grunt.initConfig({
    clean: {
      temp: 'temp/**'
    }
  })
  
grunt.loadNpmTasks('grunt-contrib-clean')

• 常用插件：- 运行 npx gulp 或者 npx gulp sass等测试

const sass = require('sass') //编译sass文件
const loadGruntTasks = require('load-grunt-tasks') //自动加载插件

module.exports = grunt => {
    grunt.initConfig({
        sass:{
            options: {
                sourceMap: true,
                implementation: sass
            },
            main:{
                files :{
                    'dist/css/main.css':'src/scss/main.scss'
                }
            }
        },
        babel: {
            options: {
                sourceMap: true,
                presets: ['@babel/preset-env']
            },
            main: {
                files: {
                    'dist/js/app.js':'src/js/app.js'
                }
            }
        },
        watch: {
            js: {
                files: ['src/js/*.js'],
                tasks: ['babel']
            },
            css: {
                files: ['src/scss/*.scss'],
                tasks: ['sass']
            }
        }
    }),
    // grunt.loadNpmTasks('grunt-contrib-clean')
    // grunt.loadNpmTasks('grunt-sass')
    loadGruntTasks(grunt) 
    grunt.registerTask('default',['sass','babel','watch'])
}

gulp

最流行的前端构建框架，其核心特点是：高效、易用。

基本使用：

install gulp依赖——gulpfile.js文件，自定义构建任务——cli执行任务并测试

//gulpfile.js
// gulp 的任务函数都是异步的
// 可以通过调用回调函数标识任务完成
exports.foo = done => {
  console.log('foo task working~')
  done() // 标识任务执行完成
}

// default 是默认任务
// 在运行是可以省略任务名参数
exports.default = done => {
  console.log('default task working~')
  done()
}

集成案例

• 样式编译 依赖：gulp-sass

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

• 脚本编译 依赖：gulp-babel

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

• 模板文件编译 依赖：gulp-swig

const page = () => {
  return src('src/*.html', { base: 'src' })
    .pipe(plugins.swig({ data, defaults: { cache: false } })) // 防止模板缓存导致页面不能及时更新
    .pipe(dest('temp'))
    .pipe(bs.reload({ stream: true }))
}

• 图片压缩 依赖：gulp-imagemin

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

• public文件拷贝

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/**', image)
  // watch('src/assets/fonts/**', font)
  // watch('public/**', extra)
  watch([
    'src/assets/images/**',
    'src/assets/fonts/**',
    'public/**'
  ], bs.reload)

  bs.init({
    notify: false,
    port: 2080,
    // open: false,
    // files: 'dist/**',
    server: {
      baseDir: ['temp', 'src', 'public'],
      routes: {
        '/node_modules': 'node_modules'
      }
    }
  })
}

• node_modules build时 引用处理与压缩

const useref = () => {
  return src('temp/*.html', { base: 'temp' })
    .pipe(plugins.useref({ searchPath: ['temp', '.'] }))
    // html js css
    .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 clean = () => {
  return del(['dist', 'temp'])
}

• 微任务合并正好为常见任务

const compile = parallel(style, script, page)

// 上线之前执行的任务
const build =  series(
  clean,
  parallel(
    series(compile, useref),
    image,
    font,
    extra
  )
)

const develop = series(compile, serve)

fis

概述

主要特点是高度集成，将前端日常开发过程中常见的构建任务，还有调试任务都集中到了内部。不需要自定义任务，可以通过配置，使用内部任务，自动完成整个构建过程。但是也缺失了灵活性。

简单使用

• 下载依赖npm install fis3 -g
• 初步体验 fis3 目录 -d 输出目录 。可以快速编译生成，默认只是将相对路径该给绝对路径，对应前后端统一部署项目，统一修改路径很方便。
• 根目录创建fis-conf.js文件，修改打包后资源根路径

//fis-conf.js
fis.match('*.{js,scss,png}',{
    release:'/assets/$0'
})

• 编译与压缩

//fis-conf.js
fis.match('**/*.scss',{
    rExt: '.css',
    parser:fis.plugin('node-sass'),
    optimizer:fis.plugin('clean-css')
})
fis.match('**/*.js',{
    rExt: '.js',
    parser:fis.plugin('babel-6.x'),
    optimizer:fis.plugin('uglify-js')
})

总结

关于自动化构建项目，往小了说主要就是选择技术（gulp、grunt、fis...），然后去官网查询符合需求的插件，下载插件并按照文档要求配置后，运行命令行使用即可。 往大了说，使用过程中，还是会涉及很多其他相关的知识点的。仅凭一篇文章，肯定是难以掌握透彻。不过可以在脑海中先搭建好基本体系架构，了解其使用原理，在日常使用中，先简单尝试。碰见问题了，在逐一攻破，或者查找资料，最终一定能越来越清晰明了。

终极攻略

终极攻略就是，遇到挫折别放弃，休息片刻继续走。跟着文档练习的过程中，一定会出现一些问题，出现问题不可怕，一定要想办法解决它。我跟着视频课程一步一步的做，还经常出现各种问题，需要连线老师寻求帮助，有时候甚至还需要老师帮我看代码，语音通话一点一点的告诉我怎么改，才能解决呢。更何况你只是看着文档，所以有了问题不要害怕，实在不知道怎么办的时候，也可以来问我。（ps一句：如果你公司有大佬，一定要多问大佬，如果没有，一定要想办法找到大佬。因为有时候他们的一句话，可能直接帮你避免一整天没有意义的找错。）

饮水思源，还是很感谢拉勾的老师的，太耐心了。好多时候我都不想看的时候，是他们帮我找到原因，推着我继续前进的，哈哈。好幸运能碰见你们，让我觉得报班不是糟践钱。

感谢观看，因个人精力加能力有限，分享过程中，难免不能没有任何纰漏或者错误，如果有不对的地方，欢迎在下方评论区与我互动。