自动化构建工作流--grunt

grunt使用

• grunt :插件生态完善，但是工作过程基于临时文件完成，对磁盘读写造作较多，速度慢
• gulp:内存中完成构建，速度快，默认支持同时执行多个任务
• fis:大而全，规范化

grunt标记任务

grunt使用

默认同步执行，异步操作通过this.async()实现
空项目添加pakage.json
yarn init
下载grunt依赖 生成yarn.lock文件
yarn add grunt
创建grunt入口文件
code gruntfile.js
cls
yarn grunt (foo[任务名称])[不写名字，默认任务]

grunt标记任务方法：

grunt.registerTask(‘name任务名’,()=>{})

grunt配置任务

grunt配置任务属性

grunt.initConfig({
属性名【任务名】：属性值【允许为对象】
})
grunt.registerTask(‘任务名名’，()=>{【获取任务】
grunt.config(‘任务名.属性名’)【获取任务属性】
})

grunt多目标配置任务

配置grunt多目标任务相当于给同一个任务配置多个子任务【一个对象配置多个属性】
grunt.initConfig({
任务名：{
属性名1：属性值1，
属性名2：属性值2,
options[可选任务]：{
属性名3：属性值3
}
}
})
grunt.registerMultiTask(‘任务名’，function(){
console.log(this.options)
console.log(target:${this.target},data:${this.data})
})

grunt常用插件

grunt-contrib-clean:清除目标文件

yarn add grunt-contrib-clean 安装插件
grunt.loadNpmTasks（‘插件名’）导入插件
grunt.initConfig({clean:‘目标文件路径’}) 创建clean任务
yarn grunt clean 运行clean任务

grunt-sass：复制目标文件到【新建】指定路径

yarn grunt-sass sass --dev 安装sass模块【多目标任务】
grunt.loadNpmTasks(‘grunt-sass’) 导入模块
files:{【新文件:旧文件】}
implementation:sass
yarn grunt sass 运行

grunt-babel：转换ES最新特性

yarn add grunt-babel @babel/core @ babel/preset-env --dev 安装模块
yarn add load-grunt-tasks 安装grunt-task 模块，自动加载grunt任务插件；
lodaGruntTasks(grunt)代替grunt.lodaNpmTasks(‘插件名’)
preset配置
yarn grunt babel运行

grunt-contrib-watch:监听目标文件，发生变化，执行目标任务

yarn add grunt-contrib-watch --dev 安装模块
files:目标文件；task:目标任务
yarn grunt watch 运行