Grunt
Grunt 装置 yarn add grunt
code gruntfile.js
grunt 的入口文件
yarn grunt 工作名
执行 node_modules gruntcli 命令
/**
* Grunt 的入口文件
* 用于定义一些须要 Grunt 主动执行的工作
* 须要导出一个函数
* 此函数接管一个 grunt 的形参,外部提供一些创立工作时能够用到的 API
*/
module.exports = grunt => {grunt.registerTask('foo',()=>{// 注册一个工作 工作产生主动执行函数 yarn grunt foo
console.log('hello grunt');
})
}
工作形容
grunt.registerTask('bar','工作形容',()=>{ //‘工作形容’会呈现在 yarn grunt --help 帮忙信息中
console.log('other task~');
})
默认工作
// grunt.registerTask('default',()=>{// console.log('default task~'); // 默认工作 执行时能够不增加名称
// })
grunt.registerTask('default',['foo','bar']) // 顺次执行数组中的工作
异步工作
grunt.registerTask('async-task',function(){const done = this.async()// 失去一个回调函数,异步操作完结调用它,标识工作曾经实现
setTimeout(()=>{console.log("async task working");
done()},1000)
})
标记工作失败
grunt.registerTask('bad',()=>{ //yarn grunt bad
console.log('bad working~');
return false // 标记工作失败, 如果在工作列表中,它的失败会阻止后续工作运行
})
grunt.registerTask('good1',()=>{console.log('good1 working~');
})
grunt.registerTask('good2',()=>{console.log('good2 working~');
})
grunt.registerTask('default',['good1','bad','good2']) //good2 内容不再输入
异步工作标记失败
grunt.registerTask('bad-async',function(){const done = this.async()
setTimeout(()=>{console.log("async task working");
done(false) // 异步工作标记失败
},1000)
})
配置选项 API
grunt.initConfig({ // 接管一个对象,键与工作名称抱持统一,值任意类型数据
baz:'我是 value'
})
grunt.registerTask('baz',()=>{console.log(grunt.config('baz')) // 获取配置,接管字符串参数,配置的名字
})
配置项是对象
grunt.initConfig({
baz1:{bar:'我是 value'}
})
grunt.registerTask('baz1',()=>{console.log(grunt.config('baz1.bar')) // 如果是对象能够这样,当然也能够 grunt.config('baz1').bar
})
多指标工作
多指标工作配置项
grunt.initConfig({
'build':{
options:{ // 除了 options 都是工作指标,它会作为工作的配置选项呈现,yarn grunt build 并不会执行
mcgee:"大家都是你好你好"
},
css:"1",// 指标名称
js:"2",
ts:{ // 指标中也能够增加指标的配置选项
options:{mcgee:"我独有的,会笼罩对象中的 options"}
}
}
})
多指标工作实现,通过 registerMultiTask
// 多指标模式,能够让工作依据配置造成多个子工作, 须要通过 initConfig 配置不同指标
grunt.registerMultiTask('build',function(){ //yarn grunt build || yarn grunt build:css 运行指定的指标
console.log(`target:${this.target},data:${this.data}`); // 也就是配置指标名和值 target:css,data:1
console.log(this.options()); // 拿到对应配置选项 {mcgee: '你好你好'}
})
插件的应用
npm 装置插件
gruntfile 中载入插件
依据插件增加配置选项
试插件 yarn add grunt-contrib-clean
大部分插件都是 yarn add grunt-contrib-xxx
module.exports = grunt=>{ //yarn grunt clean
grunt.initConfig({
clean:{
temp:'temp/app.js',
// temp:'temp/*.txt',
// temp:'temp/**' // 蕴含 temp 文件夹的子目录和子目录所有文件
}
})
grunt.loadNpmTasks('grunt-contrib-clean')
}
罕用插件总结
yarn add grunt-sass sass --dev
const sass = require('sass')
module.exports = grunt=>{
grunt.initConfig({
sass:{
options:{
sourceMap:true,
implementation:sass //Fatal error: The implementation option must be passed to the Sass task
},
main:{ // 工作指标
files:{'dist/css/main.css':'src/scss/main.scss'}
}
}
})
grunt.loadNpmTasks('grunt-sass')
}
应用yarn grunt sass
yarn add grunt-babel @bable/core @babel/preset-env --dev
外围模块,预设
yarn add load-grunt-tasks --dev
解决每次都要引入一个 loadNpmTasks 的问题
const loadGruntTasks = require('load-grunt-tasks') // 引入
module.exports = grunt=>{
grunt.initConfig({
babel:{
options:{ //preset 把须要转的个性打了个包 preset-evn 依据最新的 es6 个性进行转换
presets:['@babel/preset-env'],
sourceMap:true
},
main:{
files:{'dist/js/app.js':'src/js/app.js' // 输入目录,输出目录}
}
}
})
// grunt.loadNpmTasks('grunt-contrib-clean')
// grunt.loadNpmTasks('grunt-sass')
// grunt.loadNpmTasks('grunt-babel')// 引入 load-grunt-tasks 包解决每个插件都要引入一次的问题
loadGruntTasks(grunt) // 主动加载所有的 grunt 插件中的工作
}
应用yarn grunt babel
编译 es6
-
yarn add grunt-contrib-watch
主动编译const loadGruntTasks = require('load-grunt-tasks') module.exports = grunt=>{ grunt.initConfig({ watch:{ // 配置监督 js:{files:['src/js/*.js'], tasks:['babel'] // 监督到 files 文件内的内容扭转,则执行对应插件 }, css:{files:['src/scss/*.scss'], tasks:['sass'] } } }) loadGruntTasks(grunt) // 主动加载所有的 grunt 插件中的工作 grunt.registerTask('default',['sass','babel','watch']) // 注册默认工作,在监督前先执行一次 }
应用
yarn grunt watch
监督文件变动