AngularJs——grunt神器的使用

浏览数：21 / 时间：2015年06月09日

　前面我们已经知道了如何安装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都会运行