什么是Grunt
当你编写完JS或者CSS代码之后，合并，压缩，代码检查等这些细小的任务会把你搞的头晕脑涨,
这时候就是grunt出马的时候了,它会安排一系列的任务,然后让电脑规矩的执行你的命令,它是以任务为基础的.
Grunt的安装
-
window环境
- 安装nodejs环境,可以去这里下载.
- 安装npm包管理器,假如安装的nodejs版本较高的话,npm会自动安装的,可以用
npm --version来检查是否安装. - 全局安装grunt任务管理器，命令
npm install -g grunt,-g代表安装在全局. - 安装grunt cli,命令
npm install -g grunt-cli,这是一个执行gruntfile中不同版本的grunt用的，这样可以保证在不同的grunt版本中切换.
-
*nix环境
- 类unix环境跟window环境差不多，只是安装的时候，权限不足的话，命令之前加上
sudo,比如安装grunt,命令sudo npm install -g grunt.
- 类unix环境跟window环境差不多，只是安装的时候，权限不足的话，命令之前加上
Grunt配置文件
grunt配置里有两大文件，一个是package.json,另一个是gruntfile.js
-
package.json 文件
-
package.json主要用来描述，当前网站运行grunt任务的名称，作者,版本,以及grunt任务依赖的nodejs模块，其实这也是nodejs模块的标准描述文件.
- 主要有以下几个参数:
- name: 名称
- version: 版本
- author: 作者
- devDependencies: 依赖项
- 详细的参数请参考这里
-
这里给个例子
-
{
"name": "gruntapp",
"version": "0.0.1",
"author": "xuwenmin",
"devDependencies": {
"grunt": "~0.4.4",
"grunt-contrib-jshint": "~0.9.2",
"grunt-contrib-concat": "~0.4.0",
"grunt-contrib-clean": "~0.5.0",
"grunt-contrib-uglify": "~0.2.0",
"grunt-contrib-watch": "~0.5.2",
"grunt-contrib-cssmin": "~0.7.0",
"load-grunt-tasks": "~0.2.0"
}
}
-
gruntfile.js 文件
-
gruntfile.js主要用来配置各个任务的参数，比如合并文件的来源和目的，压缩任务的来源和目的。
- gruntfile主要做三件事
- 配置参数，用
grunt.initConfig方法 - 加载任务模块, 用
require('load-grunt-tasks')(grunt)方法,这个会自动的加载任务用到的模块，而不用每个模块写一句加载代码，像这样grunt.loadNpmTasks('grunt-contrib-uglify'); - 注册一个配置任务,用
grunt.registerTask方法 - 配置参数的核心就是每个任务都需要一个target，然后每个target都会包含一个files或者option,files可以是简单风格，文件数组，文件对象.
- 详细的配置参数说明，看这里
- 详细的配置范例,看这里
-
这里我放上我自己写的例子
-
module.exports = function(grunt){
// 自动加载任务
require('load-grunt-tasks')(grunt);
grunt.initConfig({
// css压缩配置文件，key名需要与模块名相同
cssmin:{
// 压缩
minify: {
expand: true,
cwd: 'css/',
src: ['*.css', '!*.min.css'],
dest: 'css/',
ext: '.min.css',
filter: function(data){
console.log('文件:', data);
return true;
}
},
// 合并
combine: {
files: {
'dist/css/out.min.css': ['css/*.min.css']
}
}
},
// js检查
jshint: {
options: {
// 表示要严格相等
eqeqeq: true,
// 表示行尾不得有多余的空格
trailing: true
},
// 表示检查js以及子目录下的.js文件
files: ['js/**/*.js']
},
clean:{
dist:{
src:'dist/**/*.js'
}
},
// 合并文件
concat:{
foo:{
options: {
separator: ';'
},
// 文件数组格式
files:[
{
src:'js/*.js', dest: 'dist/js/out.js'
}
]
// 文件对象格式
/* files:{
'dist/js/out.js': ['js/*.js']
},*/
// 简单格式
/*src: ['js/*.js'],
dest: 'dist/js/out.js'*/
}
},
uglify:{
foo: {
src:['dist/js/out.js'],
filter: function(v){
console.log('输出:', v);
return true;
},
dest:'dist/js/out.min.js'
}
}
});
// 注册一个检查js的任务
grunt.registerTask('jscheck',['jshint']);
// 默认为压缩css的任务
grunt.registerTask('default', ['cssmin:minify','cssmin:combine']);
// 自定义任务
grunt.registerTask('demo', 'Log some stuff.', function() {
grunt.log.write('Logging some stuff...').ok();
});
grunt.registerTask('buildjs',['clean:dist', 'concat:foo', 'uglify:foo']);
}
执行grunt
做完上面的准备工作之后，就拿我那个例子来说，执行命令如下
grunt buildjs
这个命令会先执行clean来清空目标文件夹，然后执行concat来合并文件，最后执行uglify来压缩文件
