写Grunt关于许多JS程序员来讲,不像写JS,更像是写一堆设置代码,置信用过Grunt的人都深有体会,就拿一个简答的uglify
使命举例:
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
uglify: {
task1: {
src: 'src/task1.js',
dest: 'build/task1.min.js'
},
task2: {
src: 'src/task2.js',
dest: 'build/task2.min.js'
}
}
});
跟着项目复杂度提拔,使命会愈来愈多,会有task3,task4…等等,uglify
的设置就显得异常冗杂,再加上less
,coffee
等使命,也会有许多个task
,末了Gruntfile.js
愈来愈长,愈来愈难以保护。
这时刻就想到,假如能够将每一个task拆分出来成为零丁的模块,零丁的js文件,实行grunt
的时刻再将这些模块兼并输出传给grunt.initConfig
,每一个使命的疗养就会清楚许多,Gruntfile.js
也不会很长,用一个tasks文件夹来寄存每一个task模块,目次构造以下:
theProject/
|
|------Gruntfile.js
|------tasks
| |-task1.js
| |-task2.js
| |-task3.js
|
在task1.js
中,设置task1对应的grunt使命:
module.exports = function(grunt) {
// 加载grunt依靠
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-less');
// 注册task1使命
grunt.registerTask('task1', [
'uglify:task1',
'less:task1'
]);
gruntConfig = {
uglify: {
task1: {
src: 'src/task1.js',
dest: 'build/task1.min.js'
}
},
less: {
task1: {
src: 'src/task1.less',
dest: 'build/task1.css'
}
}
};
return gruntConfig;
};
如许每一个grunt使命就从一致的Gruntfile.js
拆分开来,对应一个task模块,接下来就是重写Gruntfile.js
,让它能够兼并一切使命模块,再设置到grunt.initConfig
中去。
详细完成要领就不多说了,重点是每一个task模块中的gruntConfig
设置对象能够深度兼并,兼并后传给grunt.initConfig
。
有兴致的同砚能够看看我在Github的这个小项目,能够不关心详细完成,clone到本身项目中直接运用,兼容了coffee
和js
。
当我把它用到事情项目中,写grunt舒服了太多,再也不比辛辛苦苦拖上拖下找代码了。
别的,烦琐一句,Grunt供应了许多有效的东西要领,却常常被我们疏忽,能够在官网看到。