AngularJs——grunt神器的使用

　前面我们已经知道了如何安装grunt，本章节给各位道友介绍如何使用 grunt 的插件，grunt是重点在于如何配置使用 Gruntfile.js，官网上也有很多范例。

 　1，包装函数

module.exports=function(grunt){}

　　 我们的代码要包括在这个方法里。

 

　2,任务配置

// 包装函数
module.exports = function(grunt) { // 任务配置
 grunt.initConfig({ }) }

 在这里我们需要初始化参数，这是grunt的最主要的部分

 

　3,导入包文件

// 包装函数
module.exports = function(grunt) { // 任务配置
 grunt.initConfig({ pkg:grunt.file.readJSON('package.json') }) }

　　使用 grunt.file.readJSON('package.json') 可以把外部的package.json文件引入到 gruntfile.js，并生成一个JSON格式的对象可以访问 package.json里的数据，我们如果使用 grunt.file.readYAML() 生成 YAML格式的对象。

 

 4,配置任务

// 任务配置
grunt.initConfig({ pkg: grunt.file.readJSON('package.json'), 　concat: { // concat 任务的配置 },
 uglify: { // uglify 任务的配置 }, 

 my_property: 'whatever', my_src_files: ['foo/*.js', 'bar/*.js']// 其他与任务无关的属性 

 })

　　任务配置定义在 Gruntfile 和 grunt.intiConfig()方法中，配置主要是以任务命名的属性，也可以包含其他属性，但是不能与任务所需要的属性重合

 

5,任务和目标

  　　当任务运行的时候（下面介绍的加载任务之后），Grunt会从同名的属性中查找配置（即从initConfig）。多重任务可以有多个配置，每个任务使用任意命名的目标定义。

grunt.initConfig({ concat: { foo: { // concat 任务的目标 "foo"
 }, bar: { // concat 任务的目标 "bar"
 }, }, uglify: { bar: { // uglify 任务的目标 "bar"
 }, }, });

　　运行 grunt concat:foo 或 grunt concat:bar 只会处理指定的目标配置，而运行 grunt concat都会运行

6，任务加载

　　一些任务，比如合并，压缩和校验等都可以作为 grunt插件。只要插件被指定 package.json中，并且通过 npm install 安装好，就可以在 gruntfile中加载: