自动化构建

什么是自动化构建

通过机器代替手工完成一些工作，目的是能使用提高效率的语法，规范和标准。

自动化构建工作流

比如一些es6+，sass等，通过自动化构建工具，使得一些不被浏览器所支持的特性，转换成能直接运行的代码。提高搬砖效率。

一个简单的自动化构建例子

通过npm scripts包装你的构建命令
以使用sass为例：

image.png

npm run build = sass scss/main.scss css/style.css
npm scripts是实现自动化构建最简单的方式。

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

--watch 监听sass文件的变动即时生成css
--files "css/*.css"" 监听css的变动即时刷新浏览器
run-p build serve 同时运行build 和serve 两句话（需要下载npm run all模块）

常用的自动化构建工具

npm scripts在构建复杂的自动化就显得吃力了，常用的自动化构建工具有Grunt， Gulp，FIS，有人问webpack去哪了，webpack严格来说是一个模块打包工具，先不在本节范围内。
Grunt：插件强大全面，但是速度慢，因为需要频繁磁盘读写，比如a插件处理完sass=>css后会放入磁盘，等下一个插件从磁盘中在拿出来，如果文件较多速度较慢。
Gulp：插件强大全面，由于在内存中操作，相比Grunt更快，且支持同时多个任务。
FIS：百度前端团队出品，大而全，把所有常见东西都集成在一起了。
新手需要规则约束（FIS），老手需要自由。（Gulp，Grunt）

Grunt

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

module.exports = grunt => {
  grunt.registerTask('foo', 'a sample task', () => {
    console.log('hello grunt')
  })
// npm grunt foo => hello grunt  ( a sample task 是任务描述)

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

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

  // 也可以在任务函数中执行其他任务
  grunt.registerTask('run-other', () => {
    // foo 和 bar 会在当前任务执行完成过后自动依次执行
    grunt.task.run('foo', 'bar')
    console.log('current task runing~')
  })

  // 默认 grunt 采用同步模式编码
  // 如果需要异步可以使用 this.async() 方法创建回调函数
  // grunt.registerTask('async-task', () => {
  //   setTimeout(() => {
  //     console.log('async task working~')
  //   }, 1000)
  // })

  // 由于函数体中需要使用 this，所以这里不能使用箭头函数
  grunt.registerTask('async-task', function () {
    const done = this.async()
    setTimeout(() => {
      console.log('async task working~')
      done() // done执行grunt才会退出
    }, 1000)
  })

// 任务函数执行过程中如果返回 false
  // 则意味着此任务执行失败
  grunt.registerTask('bad', () => {
    console.log('bad working~')
    return false
  })


}

配置值

grunt.initConfig({
    // 键一般对应任务的名称
    // 值可以是任意类型的数据
    foo: {
      bar: 'baz'
    }
  })
grunt.registerTask('foo', () => {
    // 任务中可以使用 grunt.config() 获取配置
    console.log(grunt.config('foo'))
    // 如果属性值是对象的话，config 中可以使用点的方式定位对象中属性的值
    console.log(grunt.config('foo.bar'))
  })