Grunt和Grunt插件是通过NodeJs的包管理工具npm安装并进行管理的。
Grunt 0.4.x必须配合NodeJs=>0.8.0版本使用（奇数版本的NodeJs不是稳定的开发版本）
首先介绍2个基础指令：
（1）指令：npm update -g npm
作用：升级当前环境中的npm为最新的版本
（2）指令：npm install -g grunt-cli
作用：将Grunt命令行安装到全局环境中，执行完后，就将grunt命令加入到你的系统路径中，以后就可以在任何目录下执行此命令了。
注意：安装grunt-cli并不等于安装了Grunt。GruntCli的任务很简单：调用与Gruntfile在同一目录中的Grunt。好处是：允许你在同一系统上同时安装多个版本的Grunt。
命令行CLI的工作原理：
每次运行grunt时，Grunt就会利用node提供的require()系统查找本地安装的Grunt。所以你可以在项目的任意子目录中运行Grunt。若找到一份本地安装的Grunt，CLI就将其加载，并传递Gruntfile中的配置信息，然后执行你指定的任务。
对于新的Grunt项目：
在项目中添加两份文件，package.json和Gruntfile.
Package.json:此文件被npm用于存储项目的元数据，以便于将此项目发布为npm模块。可以在此文件中列出项目依赖的grunt和grunt插件，放置于devDendencies配置段内。
Gruntfile：（用于为grunt做某种配置）此文件被命名为Gruntfile.js或Gruntfile.coffee。用来配置或定义任务task 并加载Grunt插件的。
1）Package.json
应放置于项目的根目录中，与Gruntfile在同一目录中，并与项目的源代码一起提交。在Package.json所在目录中运行npm install将依据Package.json文件中所列出的每个依赖来自动安装适当版本的依赖。
创建Package.json文件的3种方式：
（1）大部分grunt-init模板都会自动创建特定于项目的Package.json文件。
（2）npm init命令会创建一个基本的Package.json文件。
（3）模板案例并补充：
{
"name": "my-project-name",
"version":"0.0.1",
"devDependencies": {//开发依赖项
"grunt-contrib-jsint":"~0.10.0",
"grunt-contrib-nodeunit":"~0.4.1",
"grunt-contrib-uglify":"~0.5.0"
}
}
安装Grunt和Grunt插件：
向已存在的Package.json文件添加Grunt和Grunt插件的最简单的方式是通过指令
npm install <module name> --save-dev 进行安装的。
作用：不仅安装了<module>,还自动将其添加到devDependencies配置中，遵循title version range格式。
指令：npm install grunt --save-dev
作用：安装Grunt最新版本到项目目录中，并将其添加到devDependencies内。
指令：npm install grunt-contrib-jshint --save-dev
作用：Grunt插件和其他node模块都可以按照相同的方式安装，上述指令就是jshint任务模块。
安装插件之后，务必确保将更新之后的package.json文件提交到项目仓库中。
2）Gruntfile
Gruntfile.js文件是有效的js文件，应当放在项目根目录中和package.json文件在同一目录层级，并和项目源代码一起加入源代码管理器中。
Gruntfile由4部分组成，分别是”wrapper”函数、项目与任务配置、加载grunt插件和任务、自定义任务等。
在以下Gruntfile、Package.json文件中的项目元数据被导入到Grunt配置中。grunt-contrib-uglify插件中的uglify任务被配置为压缩源码文件，并依据上述元数据动态生成一个文件头注释。
当在命令行中执行grunt命令时，uglify任务被默认执行。
结合代码进行说明:
module.exports=function(grunt){//"wrapper"函数，所写的Grunt代码都放在此函数中
grunt.initConfig({//项目与任务配置
pkg: grunt.file.readJSON('package.json'),//pkg属性
uglify:{//uglify任务
options:{//目标
banner:'/*! <%= pkg.name%>-<%=pkg.version%>.js <%= grunt.template.today("yyyy-mm-dd") %> */\n' //banner注释将插入到输出文件的顶部
},
build:{//目标
src:'src/test.js',//源文件
dest:'build/<%=pkg.name%>-<%=pkg.version%>.js.min.js'//目标文件
}
}
});
//加载包含"uglify"任务的插件
grunt.loadNpmTasks('grunt-contrib-uglify');
//默认被执行的任务列表
grunt.registerTask('default',['uglify']);
/**
通过定义default任务，可以让Grunt默认执行一个或多个任务。在该案列中，执行grunt指令时若不指定一个任务的话，将会执行uglify任务，这与grunt uglify 或grunt default的效果一样。Default任务列表数组中可以指定任意数目的任务（可以带参数）。
**/
};
注解：
由于<% %>模板字符串可以引用任意的配置属性，因此可以通过这种方式来指定诸如文件路径、文件列表类型的配置数据，从而减少一些重复的工作。
那么就可以在传递intconfig()方法的对象中存储任意的数据，只要它不与你任务配置所需的属性冲突，否则会被忽略。
与大多数task一样，grunt-contrib-uglify插件中的uglify任务要求它的配置被指定在一个同名属性中，在这里的示例中。我们指定一个banner选项（用于在文件顶部生成一个注释），紧接着是一个单一的名为build的uglify目标，用于将一个js文件压缩为一个目标文件。
指令：grunt --help
作用：列出所有可用的任务。
---------------------------Grunt插件分割线----------------------------
Grunt插件：http://www.gruntjs.net/plugins
插件分为2类：
①grunt团队贡献的插件，这些插件的名字前有”contrib-”前缀，且在插件列表中有星号标注。
②第三方插件，无此两种特征。
常用插件：
grunt-contrib-jshint:javascript语法错误检查。
grunt-contrib-watch:实时监控文件变化，调用相应的任务重新执行。
grunt-contrib-clean：清空文件、文件夹。
grunt-contrib-uglify:压缩JavaScript代码。
grunt-contrib-copy:复制文件、文件夹。
grunt-contrib-concat:合并多个文件的代码到一个文件中。
grunt-karma:前端自动化测试工具。
grunt-contrib-cssmin:压缩css代码。
---------------------------Grunt通配符分割线----------------------------
通配符模式：通常分别指定所有源文件路径是不切实际的，因此Grunt通过内置支持node-glob和minimatch库来匹配文件名（又称为globing）。
如何在文件路径匹配过程中使用通配符？
（1）*匹配任意数量的字符，但不匹配/
（2）?匹配单个字符，但不匹配/
（3）**匹配任意数量的字符，包括/,只要它是路径中唯一的部分
（4）{}允许使用一个逗号分割的”或”表达式列表
（5）！在模式的开头用于排除一个匹配模式所匹配的任何文件
foo/*.js将匹配位于foo/目录下的所有的.js结尾的文件
foo/**/*.js将匹配位于foo/目录以及其子目录下的所有的.js结尾的文件
另外，为了简化原来复杂的通配符模式，Grunt允许指定一个数组形式的文件路径或一个通配符模式，所有模式按顺序处理，模式处理过程中，带有！前缀的模式所匹配的文件不包含在结果集中，而且其结果集中的每一项也是唯一的。
例如：
{src:’foo/this.js’,dest:...}//指定单个文件
{src:[’foo/this.js’,’foo/that.js’,’foo/other.js’],dest:...}//指定一个文件数组
{src:’foo/th*.js’,dest:...}//使用一个匹配模式
一个独立的node-glob模式
{src:’foo/{a,b}*.js’,dest:...}或{src:’foo/a*.js’,’foo/b*.js’,dest:...}
{src:’foo/*.js’,dest:...}//foo目录中所有的.js文件，按字母顺序排列
{src:[’foo/bar.js’,’foo/*.js’],dest:...}//首先是bar.js,接着是剩下的js文件，并按照字母顺序排列
{src:[’foo/*.js’,’！foo/bar.js’],dest:...}//除bar.js以外的所有js文件，按照字母顺序排序
{src:[’foo/*.js’,’！foo/bar.js’,’foo/bar.js’],dest:...}//按照字母顺序排序的所有.js文件，但bar.js在最后
//模板也可以用于文件路径或匹配模式中
{src:[‘src/<%=basename%>.js’],dest:’build/<%=basename%>.min.js’}
//它们也可以引用配置中定义的其他文件列表
{src:[‘foo/*.js’,‘<%=jshint.all.src%>’],dest:...}
Gruntfile文件实例：
module.exports=function(grunt){
//任务配置，所有插件的配置信息
grunt.initConfig({
//获取package.json中的信息
pkg: grunt.file.readJSON('package.json'),
uglify:{
options:{
stripBanners:true,
banner:'/*! <%= pkg.name%>-<%=pkg.version%>.js <%= grunt.template.today("yyyy-mm-dd") %> */\n'
},
build:{
src:'src/test.js',
dest:'build/<%=pkg.name%>-<%=pkg.version%>.js.min.js'
}
},
cssmin:{
options:{
stripBanners:true,
banner:'/*! <%= pkg.name%>-<%=pkg.version%>.css <%= grunt.template.today("yyyy-mm-dd") %> */\n'
},
build:{
src:'src/test.css',
dest:'build/<%=pkg.name%>-<%=pkg.version%>.css.min.css'
}
},
jshint:{
build:['Gruntfile.js','src/*.js'],
options:{
jshintrc:'.jshintrc'
}
},
csslint:{
build:['src/*.css'],
options:{
csslintrc:'.csslintrc'
}
},
watch:{
build:{
files:['src/*.js','src/*.css'],
task:['jshint','uglify'],
options:{spawn:false}
}
}
});
//告诉grunt 我们将使用插件
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-cssmin');
grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.loadNpmTasks('grunt-contrib-csslint');
grunt.loadNpmTasks('grunt-contrib-watch');
//告诉grunt 当我们在终端中输入grunt时需要做些什么，同时注意先后顺序
grunt.registerTask('default',['jshint','uglify','watch','csslint','cssmin']);
};