• 源代码自动化构建为生产代码
      • 称之为自动化构建工作流
      • 脱离运行环境问题
      • 使用提高效率的语法，规范，标准
      • 比如一些ES6 SASS 等通过自动化构建转化为能够运行的代码
    • NPM Scripts
      • 定义一些与项目有关的命令 在package.json script中定义命令
      • browser-sync服务器环境
        • —files \”css/*.css\” 自动更新推送到浏览器
      • 在serve前加preserve 实现serve执行 前的命令
      • —watch监听sacc文件变化
      • 同时执行多个 npm-run-all
        • run-p build serve 不需要preserve
    • 常用的自动化构建工具
      • Grunt
        • 插件生态完善
        • 工具过程基于临时文件，速度较慢
          • 每一步都会创建临时文件。磁盘读写
      • Gulp
        • 基于内存实现，会快很多
        • 默认支持同时执行多个任务
        • 使用方式更加直观易懂
      • FIS
        • 微内核，需求集成在内部
        • 大而全
      • 初学者FIS，需求灵活多变Gulp，Grunt
    • Grunt基本使用
      • 安装Grunt
      • 创建gruntfile.js
      • grunt默认支持同步
        • 异步定义一个done 为this.async()标记任务完成 ```javascript //grunt入口文件 //定义自动执行的任务 //导出一个函数 // 接收grunt形参，内部提供API module.exports = (grunt) => { grunt.registerTask(“foo”,()=>{ console.log(‘Hello Grunt’) }) grunt.registerTask(“bar”,”任务描述”,()=>{ console.log(‘other’) }) // grunt.registerTask(“default”,”任务描述”,()=>{ // console.log(‘default’) // }) grunt.registerTask(‘default’,[‘foo’,’bar’]) // grunt.registerTask(“async-task”,()=>{ // setTimeout(()=>{ // console.log(‘async task working’) // },1000) // }) grunt.registerTask(“async-task”,function(){ const done = this.async() setTimeout(()=>{
          1. console.log("async task")
          2. done()
          },1000) }) }
    2. - Grunt标记 任务失败
    3.    - 在函数体return false标记这个任务失败
    4.    - 一个任务失败 后续的任务不再被执行
    5.    - 执行 --force 强制执行所有任务。标记任务失败 也可以执行之后的任务
    6.    - 异步任务 done（false） 被标记为失败
    7. - Grunt配置选项
    8.    - initConfig
    9. ```javascript
    10. module.exports = (grunt) => {
    11.     grunt.initConfig({
    12.         // foo: "bar",
    13.         foo: {
    14.             bar: 123,
    15.         },
    16.     })
    17.     grunt.registerTask("foo", () => {
    18.         console.log(grunt.config("foo.bar"))
    19.     })
    20. }
    • Grunt多目标任务 ```javascript module.exports = (grunt) => { // 需要为多目标任务配置不同目标 grunt.initConfig({
      1.   //多目标，同时执行两个目标
      2.   //除了制定的options 作为配置选项s
      3.   build: {
      4.       options:{
      5.           foo:"bar"
      6.       },
      7.       css: {
      8.           options:{
      9.               foo:"baz"
      10.           }
      11.       },
      12.       js: "2",
      13.   },
      }) grunt.registerMultiTask(“build”, function () {
      1.   console.log("build task")
      2.   console.log(this.options())
      3.   console.log(this.target,this.data)
      }) }
    2. - Grunt插件
    3.    - 通用的构建任务
    4.       - 下载插件
    5.       - gruntfile载入插件 loadNpmTasks
    6. ```javascript
    7. module.exports = (grunt) => {
    8.     //支持通配符方式
    9.     //** 子文件以及子文件下所有文件 */
    10.     grunt.initConfig({
    11.         clean:{
    12.             temp:"temp/**"
    13.         }
    14.     })
    15.     grunt.loadNpmTasks("grunt-contrib-clean")
    16. }
    • Grunt常用插件及总计
      • grunt-sass
        • 编译sass ```javascript const sass = require(“sass”) module.exports = (grunt) => { grunt.initConfig({ sass:{ options:{
          1.    sourceMap:true,
          2.    implementation:sass
          }, main:{
          1.    files:{
          2.        'dist/css/main.css':'src/scss/main.scss'
          3.    }
          } } }) grunt.loadNpmTasks(‘grunt-sass’)

    }

    2.    - ES6语法
    3.       - grunt-babel
    4.    - grunt-contrib-watch 
    5.       - 观察，自动构建
    6. ```javascript
    7. const sass = require("sass")
    8. const loadGruntTasks = require("load-grunt-tasks")
    10. module.exports = (grunt) => {
    11.     grunt.initConfig({
    12.         sass: {
    13.             options: {
    14.                 sourceMap: true,
    15.                 implementation: sass,
    16.             },
    17.             main: {
    18.                 files: {
    19.                     "dist/css/main.css": "src/scss/main.scss",
    20.                 },
    21.             },
    22.         },
    23.         babel: {
    24.             options: {
    25.                 sourceMap: true,
    26.                 presets: ["@babel/env"],
    27.             },
    28.             main: {
    29.                 files: {
    30.                     "dist/js/app.js": "src/js/app.js",
    31.                 },
    32.             },
    33.         },
    34.         watch: {
    35.             js: {
    36.                 files: ["src/js/*.js"],
    37.                 tasks: ["babel"],
    38.             },
    39.             css: {
    40.                 files: ["src/scss/*.scss"],
    41.                 tasks: ["sass"],
    42.             },
    43.         },
    44.     })
    45.     // grunt.loadNpmTasks('grunt-sass')
    46.     loadGruntTasks(grunt) //自动加载所有的grunt插件任务
    47.     //watch第一次不执行。做映射
    48.     grunt.registerTask('default',['sass','babel','watch'])
    49. }
    • load-grunt-tasks（grunt） 自动加载所有插件