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 运行