常用的自动化工具
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