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中加载:

  

  

原文地址:https://www.cnblogs.com/zhiyuan-2011/p/4165366.html