自动化工具

常用的自动化工具
Grunt Gulp FIS

Grunt
最早，插件生态完善，工作过程基于临时文件实现，构建速度较慢
先对scss编译->私有属性前缀->压缩代码
每一个过程都有磁盘写入操作
导致构建速度较慢

Gulp
基于内存实现，对文件处理在内存中完成，默认支持同时执行多个命令，构建速度较快，算是最流行的前端构建系统

FIS
百度团队内部使用的，捆绑套餐；可以做到资源加载，模块化开发，代码部署，性能优化

一、Grunt

module.exports = (grunt) => {
  // grunt标记任务失败

  grunt.registerTask('bad', () => {
    console.log('hello grunt')

    return false
  })

  grunt.registerTask('foo', () => {
    console.log('hello grunt')
  })

  grunt.registerTask('bar', '任务描述', () => {
    console.log('other task~')
  })

  // grunt如果未指定任务名称会默认执行default

  grunt.registerTask('default', ['foo', 'bad', 'bar'])

  grunt.registerTask('async-task', () => {
    setTimeout(() => {
      console.log('async')
    }, 1000)
  })

  // grunt异步操作时需要先定义一个方法等于this.async()，异步执行时调用该方法
  grunt.registerTask('async-task', function () {
    const done = this.async()

    setTimeout(() => {
      console.log('async task done')

      done()
    }, 1000)
  })

  // 异步任务标记失败的话再done中传false即可

  grunt.registerTask('bad-async-task', function () {
    const done = this.async()

    setTimeout(() => {
      console.log('bad async')

      done(false)
    }, 1000)
  })
}

module.exports = (grunt) => {
  // initConfig配置用于添加配置选项，压缩文件通过此方法配置压缩路径

  grunt.initConfig({
    foo: 'bar',
    obj: {
      bar: '123',
    },
  })

  grunt.registerTask('foo', () => {
    console.log(grunt.config('foo'))
  })

  grunt.registerTask('obj', () => {
    console.log(grunt.config('obj.bar'))
  })
}

// 多目标任务，使用registerMultiTask，去执行build对应设置的目标

// grunt build:css =>执行对应的任务

// 任务build指定的每个属性键都会作为一个目标，除了options，options会作为任务的配置选项

// 目标中的options会覆盖任务中的选项

module.exports = (grunt) => {
  grunt.initConfig({
    build: {
      options: {
        foo: 'bar',
      },

      css: {
        options: {
          foo: '111',
        },
      },

      js: '2',
    },
  })

  grunt.registerMultiTask('build', function () {
    console.log('build task')

    console.log(this.options())

    console.log(`target: ${this.target},data:${this.data}`)
  })
}

使用grunt插件总结：
1.安装插件
2.gruntfile中通过grunt.loadNpmTasks中把插件中提供的任务加载进来
3.initConfig中为插件添加配置选项

grunt常用插件
grunt-sass：sass转为css
yarn add grunt-sass sass

grunt-babel:es6编译
yarn add grunt-babel @babel/core @babel/preset-env

grunt-contrib-watch:文件修改完后自动编译
yarn add grunt-contrib-watch

二、Gulp
核心特点：高效、易用

// gulpfile.js
exports.default = (done) => {
  console.log('default task working')
  done()
}

运行yarn gulp

默认执行default

创建组合任务,通过series按照顺序依次执行任务串行模式，parallerl并行执行任务

//创建组合任务,通过series按照顺序依次执行任务串行模式，parallerl并行执行任务
const task1 = (done) => {
  setTimeout(() => {
    console.log('task1 working~')
    done()
  }, 1000)
}
const task2 = (done) => {
  setTimeout(() => {
    console.log('task2 working~')
    done()
  }, 1000)
}
const task3 = (done) => {
  setTimeout(() => {
    console.log('task3 working~')
    done()
  }, 1000)
}

exports.foo = series(task1, task2, task3)
exports.bar = parallel(task1, task2, task3)

核心工作原理

gulp官方定义：The streaming build system

gulp是基于流的构建系统，gulp希望实现一个构建管道的概念，这样在后续扩展插件可以有一个很统一的方式

gulp文件操作API+插件

gulp创建构建任务时的流程：

先通过src方法去创建一个读取流，然后再借助于插件提供的转换流实现文件加工，最后通过gulp提供的dest方法创建一个写入流从而写入到目标文件

js编译
yarn add gulp-babel @babel/core @babel/preset-env

Gulp自动化构建服务器
yarn add browser-sync