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监督文件变动