grunt入门讲解1：grunt的基本概念和使用

Grunt和 Grunt 插件是通过 npm 安装并管理的，npm是 Node.js 的包管理器。

Grunt 0.4.x 必须配合Node.js >= 0.8.0版本使用。老版本的 Node.js 被认为是不稳定的开发版。之前，在用grunt来合并文件时，老是报错，原因是node.js的版本太低了。

在安装grunt之前，你需要先将Grunt命令行（CLI）安装到全局环境中。

npm install -g grunt-cli

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

注意，安装了grunt-cli并不等于安装了 Grunt！

Grunt CLI的任务很简单：调用与Gruntfile文件在同一目录中的Grunt。这样带来的好处是，允许你在同一个系统上同时安装多个版本的 Grunt。这样就能让多个版本的 Grunt 同时安装在同一台机器上。

Grunt CLI的运行原理：每次运行grunt 时，Grunt CLI就利用node提供的require()，去系统查找本地安装的 Grunt。正是由于这一机制，你可以在项目的任意子目录中运行grunt 。如果找到一份本地安装的 Grunt，CLI就将其加载，并传递Gruntfile中的配置信息，然后执行你所指定的任务。

如何打造一个 Grunt 项目？

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

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

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

package.json应当放置于项目的根目录中，与Gruntfile在同一目录中，并且应该与项目的源代码一起被提交。在上述目录(package.json所在目录)中运行npm install将依据package.json文件中所列出的每个依赖来自动安装适当版本的依赖。

下面列出了几种为你的项目创建package.json文件的方式：

大部分 grunt-init 模版都会自动创建特定于项目的package.json文件。
npm init命令会创建一个基本的package.json文件。
复制下面的例子，并根据需要做扩充。

{
　　"name": "my-project-name",
　　"version": "0.1.0",
　　"devDependencies": {
　　　　"grunt": "~0.4.1",
　　　　"grunt-contrib-jshint": "~0.6.0",
　　　　"grunt-contrib-nodeunit": "~0.2.0",
　　　　"grunt-contrib-uglify": "~0.2.2"
　　}
}

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

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

npm install grunt --save-dev
同样，grunt插件和其它node模块都可以按相同的方式安装。安装完成后一定要记得把被修改的package.json文件提交到源码管理器中。

Gruntfile.js 或 Gruntfile.coffee 文件是有效的 JavaScript 或 CoffeeScript 文件，应当放在你的项目根目录中，和package.json文件在同一目录层级，并和项目源码一起加入源码管理器。

Gruntfile由以下几部分构成：

（1）包装函数
（2）项目与任务配置
（3）加载grunt插件和任务
（4）自定义任务

举个例子：

module.exports = function(grunt) {
  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']);
};

每一份 Gruntfile 都遵循同样的格式，你所书写的Grunt代码必须放在此包装函数内：

module.exports = function(grunt) {
　　// Do grunt-related things in here
};

大部分的Grunt任务都依赖某些配置数据，这些数据被定义在一个json对象内，并传递给grunt.initConfig 方法中。

在上面的例子中，grunt.file.readJSON('package.json') 方法会把存储在package.json文件中的JSON元数据引入到grunt config中。

由于<% %>模板字符串可以引用任意的配置属性，因此可以通过这种方式来指定诸如文件路径和文件列表类型的配置数据，从而减少一些重复的工作。

你可以在这个配置对象中(传递给initConfig()方法的对象)存储任意的数据，只要它不与你任务配置所需的属性冲突，否则会被忽略。

此外，由于这本身就是JavaScript代码，所以你不仅可以使用JSON对象，你也可以在这里使用任意有效的JS代码。如果有必要，你甚至可以以编程的方式生成配置。

与大多数task一样，grunt-contrib-uglify 插件中的uglify 任务要求它的配置被指定在一个同名属性中。

在这个例子中, 我们指定了一个banner选项(用于在文件顶部生成一个注释)，紧接着是一个单一的名为build的uglify目标，用于将一个js文件压缩为一个目标文件。

像 concatenation、[minification]、grunt-contrib-uglify 和 linting这些常用的任务（task）都已经以grunt插件的形式被开发出来了。只要在 package.json 文件中被列为dependency（依赖）的包，并通过npm install安装之后，都可以在Gruntfile中以简单命令的形式使用：grunt.loadNpmTasks('grunt-contrib-uglify');

注意： grunt --help 命令将列出所有可用的任务。

通过定义 default 任务，可以让Grunt默认执行一个或多个任务。在上面的例子中，执行 grunt 命令时如果不指定一个任务的话，将会执行uglify任务。这和执行grunt uglify 或者 grunt default的效果一样。default任务列表数组中可以指定任意数目的任务（可以带参数）。grunt.registerTask('default', ['uglify']);

如果Grunt插件中的任务（task）不能满足你的项目需求，你还可以在Gruntfile中自定义任务（task）。例如，在下面的 Gruntfile 中自定义了一个default 任务，并且他甚至不依赖任务配置：

module.exports = function(grunt) {

　　grunt.registerTask('default', 'Log some stuff.'  ,  function() {
　　　　grunt.log.write('Logging some stuff...').ok();
　　});

};

当然，特定于项目的任务不必在 Gruntfile 中定义。他们可以定义在外部.js 文件中，并通过grunt.loadTasks 方法加载。

在上面列出的这个 Gruntfile 中，package.json文件中的项目元数据（metadata）被导入到 Grunt 配置中， grunt-contrib-uglify 插件中的uglify 任务（task）被配置为压缩源码文件，并依据上述元数据动态生成一个文件头注释。当在命令行中执行 grunt 命令时，uglify 任务将被默认执行。

 

 

 

加油！