Getting started
安装命令行工具
sudo npm install -g grunt-cli
Grunt:任务自动管理工具
关于Grunt,从一个简单的配置开始!
Grunt让Nodejs规范起来
一个几乎是Gruntfile.js通用的写法:
module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json');
});
};
示例:
module.exports = function(grunt) {
// 配置Grunt各种模块的参数
grunt.initConfig({
jshint: { /* jshint的参数 */ },
concat: { /* concat的参数 */ },
uglify: { /* uglify的参数 */ },
watch: { /* watch的参数 */ }
});
// 从node_modules目录加载模块文件
grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-watch');
// 每行registerTask定义一个任务
grunt.registerTask('default', ['jshint', 'concat', 'uglify']);
grunt.registerTask('check', ['jshint']);
};
- grunt.initConfig:定义各种模块的参数,每一个成员项对应一个同名模块。
- grunt.loadNpmTasks:加载完成任务所需的模块。
- grunt.registerTask:定义具体的任务。第一个参数为任务名,第二个参数是一个数组,表示该任务需要依次使用的模块。default任务名表示,如果直接输入grunt命令,后面不跟任何参数,这时所调用的模块(该例为jshint,concat和uglify);该例的check任务则表示使用jshint插件对代码进行语法检查。
你需要使用几个模块,就要写几条grunt.loadNpmTasks语句,将各个模块一一加载。
如果加载模块很多,这部分会非常冗长。而且,还存在一个问题,就是凡是在这里加载的模块,也同时出现在package.json文件中。如果使用npm命令卸载模块以后,模块会自动从package.json文件中消失,但是必须手动从Gruntfile.js文件中清除,这样很不方便,一旦忘记,还会出现运行错误。这里有一个解决办法,就是安装load-grunt-tasks模块,然后在Gruntfile.js文件中,用下面的语句替代所有的grunt.loadNpmTasks语句。
require('load-grunt-tasks')(grunt);
这条语句的作用是自动分析package.json文件,自动加载所找到的grunt模块。
require('time-grunt')(grunt);
在命令行中显示执行grunt任务所花的时间
常用模块
- grunt-contrib-clean:删除文件。
- grunt-contrib-compass:使用compass编译sass文件。
- grunt-contrib-concat:合并文件。
- grunt-contrib-copy:复制文件。
- grunt-contrib-cssmin:压缩以及合并CSS文件。
- grunt-contrib-imagemin:图像压缩模块。
- grunt-contrib-jshint:检查JavaScript语法。
- grunt-contrib-uglify:压缩以及合并JavaScript文件。
- grunt-contrib-watch:监视文件变动,做出相应动作。