grunt 用法小结

npm install -g grunt-cli

上述命令执行完后，grunt 命令就被加入到你的系统路径中了，以后就可以在任何目录下执行此命令了。

CLI 是如何工作的

每次运行grunt 时，他就利用node提供的require()系统查找本地安装的 Grunt。正是由于这一机制，你可以在项目的任意子目录中运行grunt 。

Grunt 项目

一般需要在你的项目中添加两份文件：package.json 和 Gruntfile。

package.json: 此文件被npm用于存储项目的元数据，以便将此项目发布为npm模块。你可以在此文件中列出项目依赖的grunt和Grunt插件，放置于devDependencies配置段内。

Gruntfile: 此文件被命名为 Gruntfile.js 或 Gruntfile.coffee，用来配置或定义任务（task）并加载Grunt插件的。

Package.json

{

  "name": "angular",

  "version": "0.1.0",

  "devDependencies": {

    "grunt": "^0.4.5",

    "grunt-contrib-jshint": "~0.10.0",

    "grunt-contrib-nodeunit": "~0.3.3",

    "grunt-contrib-requirejs": "^0.4.4",

    "grunt-contrib-uglify": "~0.4.0"

  }

}

安装Grunt 和 grunt插件

向已经存在的package.json 文件中添加Grunt和grunt插件的最简单方式是通过npm install <module> --save-dev命令。此命令不光安装了<module>，还会自动将其添加到devDependencies 配置段中，遵循tilde version range格式。

例如，下面这条命令将安装Grunt最新版本到项目目录中，并将其添加到devDependencies内：

npm install grunt --save-dev

同样，grunt插件和其它node模块都可以按相同的方式安装。

Gruntfile

Gruntfile.js 或 Gruntfile.coffee 文件是有效的 JavaScript 或 CoffeeScript 文件，应当放在你的项目根目录中，和package.json文件在同一目录层级,

Gruntfile由以下几部分构成：

· "wrapper" 函数

· 项目与任务配置

· 加载grunt插件和任务

· 自定义任务

Gruntfile文件案例

module.exports = function(grunt) {

 

  // Project configuration.

  grunt.initConfig({

    pkg: grunt.file.readJSON('package.json'),

    uglify: {

      options: {

        banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'

      },

      build: {

        src: 'src/<%= pkg.name %>.js',

        dest: 'build/<%= pkg.name %>.min.js'

      }

    }

  });

 

  // 加载包含 "uglify" 任务的插件。

  grunt.loadNpmTasks('grunt-contrib-uglify');

 

  // 默认被执行的任务列表。

  grunt.registerTask('default', ['uglify']);

 

};

任务配置和目标

当运行一个任务时，Grunt会自动查找配置对象中的同名属性。多任务（multi-task）可以通过任意命名的“目标（target）”来定义多个配置。在下面的案例中，concat任务有名为foo和bar两个目标，而uglify任务仅仅只有一个名为bar目标。

grunt.initConfig({

concat:{

foo:{

// concat task "foo" target options and files go here.

},

bar:{

// concat task "bar" target options and files go here.

},

},

uglify:{

bar:{

// uglify task "bar" target options and files go here.

},

},

});

同时指定任务（task）和目标（target），例如grunt concat:foo或者grunt concat:bar，将只会处理指定目标（target）的配置，而运行grunt concat将遍历所有目标（target）并依次处理

options属性

options属性可以用来指定覆盖内置属性的默认值。此外，每一个目标（target）中还可以拥有一个专门针对此目标（target）的options属性。目标（target）级的平options将会覆盖任务级的options。

文件

Grunt有一个强大的抽象层用于声明任务应该操作哪些文件。

所有的文件格式都支持src和dest属性，此外"Compact"[简洁]和"Files Array"[文件数组]格式还支持以下一些额外的属性：

 

文件对象格式

支持每个目标对应多个src-dest形式的文件映射，属性名是目标文件，值是源文件(源文件列表则使用数组格式声明)。

foo: {

    files: {

      'dest/a.js': ['src/aa.js', 'src/aaa.js'],

      'dest/a1.js': ['src/aa1.js', 'src/aaa1.js'],

    },

},

文件数组格式

这种形式支持每个目标对应多个src-dest文件映射，同时也允许每个映射拥有额外属性：

 

concat: {

    foo: {

      files: [

        {src: ['src/aa.js', 'src/aaa.js'], dest: 'dest/a.js'},

        {src: ['src/aa1.js', 'src/aaa1.js'], dest: 'dest/a1.js'},

      ],

    },

    bar: {

      files: [

       {src: ['src/bb.js', 'src/bbb.js'], dest: 'dest/b/', nonull: true},

        {src: ['src/bb1.js', 'src/bbb1.js'], dest: 'dest/b1/', filter: 'isFile'},

      ],

},

},

自定义过滤函数

grunt.initConfig({

clean:{

foo:{

  src:['temp/**/*'],

  filter:'isFile',

},

},

});

 

 

导入外部数据

Grunt有grunt.file.readJSON和grunt.file.readYAML两个方法分别用于引入JSON和YAML数据。

 

创建任务

任务别名

下面的任务别名案例中定义了一个 'default' 任务，如果运行Grunt时没有指定任何任务，它将自动执行'jshint'、'qunit'、'concat' 和 'uglify' 任务。

grunt.registerTask('default', ['jshint', 'qunit', 'concat', 'uglify']);

还可以给任务指定参数。在下面的案例中，别名 "dist" 将执行 "concat" 和 "uglify" 两个任务，并且它们都带有一个 "dist" 参数：

grunt.registerTask('dist', ['concat:dist', 'uglify:dist']);

多任务

grunt.registerMultiTask(taskName, [description, ] taskFunction)

例：

grunt.initConfig({

  log: {

    foo: [1, 2, 3],

    bar: 'hello world',

    baz: false

  }

});

grunt.registerMultiTask('log', 'Log stuff.', function() {

  grunt.log.writeln(this.target + ': ' + this.data);

});

 

基本任务

当一个基本任务执行时，Grunt并不会检查配置和环境 -- 它仅仅执行指定的任务函数，并传递任何使用冒号分割的参数作为函数的参数。

 

下面的案例中，如果执行 grunt foo:testing:123，将输出日志 foo, testing 123。 如果执行这个任务时不传递参数，只是执行 grunt foo，那么将输出日志 foo, no args。

grunt.registerTask('foo', 'A sample task that logs stuff.', function(arg1, arg2) {

  if (arguments.length === 0) {

    grunt.log.writeln(this.name + ", no args");

  } else {

    grunt.log.writeln(this.name + ", " + arg1 + " " + arg2);

  }

});

注意 grunt.task.requires 并不会真正的运行其他任务，它仅仅检查其它任务是否已经执行，并且没有失败