Grunt安装与入门
一、grunt简介
grunt是什么？
grunt是Javascript世界的构建工具，我们的项目在创建初期，会很小，但经过很多版本的迭代，越来越大，CSS和JS都不太好管理了，这时我们需要工具来帮助我们管理，grunt就是做这个的。它主要的工具就是编译、压缩、单元测试等，以减少我们的工作量。
grunt已有很多可供我们使用的插件，帮助我们实现各种工业自动化，那如何使用grunt呢？
二、安装grunt
grunt和其插件都是通过npm安装的，所以，系统中必须安装npm，npm是NodeJS的包管理器。
liuzhendeMacBook-Air:gruntTest liuzhen$ npm -v 2.14.12安装grunt之前必须先将grunt-cli安装到全局中（我这里使用了sudo命令来安装）
liuzhendeMacBook-Air:gruntTest liuzhen$ sudo npm install -g grunt-cli Password: npm WARN deprecated [email protected]: lodash@<3.0.0 is no longer maintained. Upgrade to lodash@^4.0.0 /usr/local/bin/grunt -> /usr/local/lib/node_modules/grunt-cli/bin/grunt [email protected] /usr/local/lib/node_modules/grunt-cli ├── [email protected] ├── [email protected] ([email protected]) └── [email protected] ([email protected], [email protected]) liuzhendeMacBook-Air:gruntTest liuzhen$安装好grunt-cli并不是安装了grunt，grunt-cli的作用就是调用与grunfile同目录的grunt，这样做的好处就是不同的项目里可以存放不同版本的grunt。
三、package.json和gruntfile
在项目中安装grunt之前，一般都需要两个文件，package.json和gruntfile
package.json：
此文件被npm用于存储项目的元数据，以便将此项目发布为npm模块进入项目目录，使用npm init命令来创建一 个基本的package.json，在创建完gruntfile之后，就可以在项目目录中使用
sudo npm install grunt --save-dev
来安装项目grunt，也可以使用
sudo npm install grunt-contrib-jshint --save-dev
来安装grunt插件
gruntfile：
此文件可被定义为gruntfile.js或者gruntfile.coffee，用来配置或定义任务（task），并加载grunt插件。
一般它可以由以下几个部分组成：
1.“wrapper”函数，它包含整个grunt配置信息
module.exports = function(grunt) {
} 在这个函数中初始化configuration对象
grunt.initConfig({
}); 接下来就可以从package.json中读取配置信息，并存入pkg属性中
pkg:grunt.file.readJSON('package.json') 好了，到目前为止我们可以看到如下的代码：
module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json')
});
} 接下来，我们就可以为每个任务定义相应的配置。
2.项目与任务配置
首先，我们来配置concat，也就是文件合并任务，如下代码：
concat: {
options: {
//定义一个用于插入合并输出文件之间的字符
separator: ';';
},
dist: {
//将要被合并的文件
src: ['src/**/*.js'],
//合并后的JS文件的存放位置
dest: 'dist/<%= pkg.name %>.js'
}
}
接下来，我们配置uglify插件，也就是文件压缩
uglify: {
options: {
//此处定义的banner注释将插入到输出文件的顶部
banner: '/* <%= pkg.name %> <%= grunt.template.today("dd-mm-yyyy") %> */\n'
},
dist: {
files: {
'dist/<%= pkg.name %>.min.js': ['<%= concat.dist.dest %>']
}
}
}
qunit: {
files: ['test/**/*.html']
},
jshint: {
//定义需要检查的文件的位置
files: ['gruntfile.js', 'src/**/*.js', 'test/**/*.js'],
//JSHint默认配置
options: {
globals: {
jQuery: true,
console: true,
module: true
}
}
}
watch: {
files: ['<%= jshint.files %>'],
tasks: ['jshint', 'qunit']
}
3.加载grunt插件和任务
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.loadNpmTasks('grunt-contrib-qunit');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-concat');
sudo npm install grunt-contrib-jshint --save-dev
4.自定义任务
最后，我们需要设置task，重要的是default任务：
//在命令行输入“grunt test”，test task就会被执行
grunt.registerTask('test', ['jshint', 'qunit']);
//在命令行上输入“grunt”，就会被执行的default task
grunt.resisterTask('default', ['jshint', 'qunit', 'concat', 'uglify']);
module.exports = function(grunt) {
//初始化
grunt.initConfig({
//读取配置信息
pkg: grunt.file.readJSON('package.json'),
//定义文件合并
concat: {
options: {
separator: ';'
},
dist: {
src: ['src/**/*.js'],
dest: 'dist/<%= pkg.name %>.js'
}
},
//文件压缩
uglify: {
options: {
banner: '/*! <%= pkg.name %> <%= grunt.template.today("dd-mm-yyyy") %> */\n'
},
dist: {
files: {
'dist/<%= pkg.name %>.min.js': ['<%= concat.dist.dest %>']
}
}
},
//文件测试
qunit: {
files: ['test/**/*.html']
},
//JS代码检查
jshint: {
files: ['gruntfile.js', 'src/**/*.js', 'test/**/*js'],
options: {
//这里覆盖JSHint默认配置选项
globals: {
jQuery: true,
console: true,
module: true,
document: true
}
}
},
//文件变化监听
watch: {
files: ['<%= jshint.files %>'],
tasks: ['jshint', 'qunit']
}
});
//加载插件
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.loadNpmTasks('grunt-contrib-qunit');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-concat');
//设置任务
grunt.registerTask('test', ['jshint', 'qunit']);
grunt.registerTask('default', ['jshint', 'qunit', 'concat', 'uglify']);
};