仅作为拉勾前端笔记
Grunt基本使用
- 空项目中
yarn init --yes初始化package.json文件 - 为项目添加grunt 模块
yarn add grunt - 创建gruntfile.js 作为Grunt的入口文件
// gruntfile.js
// 用于定义一些需要Grunt自动执行的任务
// 需要导出一个函数
// 此函数接收一个 grunt 的形参，内部提供一些创建任务时可以用到的API
module.exports = grunt =>{
grunt.registerTask('foo', ()=> {
console.log('hello grunt')
})
// yarn grunt foo 去执行foo这个任务
grunt.registerTask('bar', '任务描述信息', ()=> {
console.log('hello grunt')
})
// bar 的第二个参数是字符串，作为任务的描述信息
grunt.registerTask('default', ['foo','bar'])
// 如果任务名为default, yarn grunt 会自动执行这个任务，一般用default 去映射其他任务
// 传递数组会一次执行数组中的函数
// grunt 默认支持同步函数，如果需要调用异步函数,需要用this.async的方式进行操作
grunt.registerTask('async-task', function(){
const done = this.async()
setTimeout(()=>{
console.log('async task working!')
done()
},1000)
})
}
Grunt标记任务失败
- 构建任务的逻辑代码中发生错误，比如文件找不到了，可以给这个任务标记为失败的任务
- 通过在函数体内
return false来实现 - 前一个任务失败后，后面的任务将不会被执行
- 可以通过 yarn grunt default --force 设置为强制执行
- 但是异步任务没办法直接return false 指定任务失败,可以给异步函数给一个false 的实参去标记失败
grunt.registerTask('async-task', function(){
const done = this.async()
setTimeout(()=>{
console.log('async task working!')
done(false)
},1000)
})
Grunt的配置方法
module.exports = grunt => {
grunt.initConfig({
foo:
})
grunt.registerTask('foo',()=>{
console.log(grunt.config('foo')) // 获取配置中的foo的值
})
}
Grunt 多目标任务
module.exports = grunt => {
// 设置多目标任务的时候需要为任务配置不同的目标
// 下面的配置相当于为build任务配置了两个目标，一个是css ,一个是js
grunt.initConfig({
build: {
// 在config中每个属性的键都会作为一个目标，除了options以外，options会作为任务的配置选项出现
options: {
foo: 'bar'
},
css: {
options: {
foo: 'baz' // 目标内设置的会覆盖上级的options
},
},
js: '2'
}
})
// 多目标模式，可以让任务根据配置形成多个子任务
grunt.registerMultiTask('build',function(){
console.log('build')
// 可以通过this拿到对应的数据，
console,log(this.target,this.data,this.options)
})
}
Grunt 插件的使用
- 找到插件，通过npm 安装到项目中
- 然后
grunt.loadNpmTasks加载插件中提供的task - 然后通过
grunt.initConfig中为插件提供配置选项
module.exports = grunt => {
// 以yarn add grunt-contrib-clean插件为例
// 如何配置去查对应包的使用文档就好了
grunt.initConfig({
clean: {
temp: 'temp/app.js'
}
})
grunt.loadNpmTasks('grunt-contrib-clean')
}
