首页 > 代码库 > AngularJs——grunt神器的使用

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

  

  

AngularJs——grunt神器的使用