首页手记 Grunt综述，从安装到使用

Grunt综述，从安装到使用

标签：

Node.js 前端工具

写在前面

关于Grunt，在Grunt中文网上已有较为详细的介绍，这里只做一个整理和归纳，以便查漏补缺。

一、安装最新Node.js

Grunt及其插件是通过npm安装并管理的，npm是Node.js的包管理器。
Grunt 0.4.x 必须配合Node.js >= 0.8.0版本使用。奇数版本号的Node.js被认为是不稳定的开发版。
在安装 Grunt 前，执行npm update -g npm（在某些系统中可能需要sudo）指令进行升级，确保当前环境中所安装的npm已经是最新版本。

二、安装Grunt命令行（CLI）

执行npm install -g grunt-cli指令，将Grunt命令行安装到全局环境中。
执行完后，grunt命令就被加入到你的系统路径中了，以后就可以在任何目录下执行此命令了。
Grunt CLI的任务很简单：调用与Gruntfile在同一目录中Grunt。这样就能让多个版本的Grunt同时安装在同一台机器上。
每次运行Grunt时，他就利用node提供的require()系统查找本地安装的Grunt。正是由于这一机制，你可以在项目的任意子目录中运行Grunt。如果找到一份本地安装的Grunt，CLI就将其加载，并传递Gruntfile中的配置信息，然后执行你所指定的任务。

三、创建Grunt项目

一般需要在你的项目中添加两份文件：package.json 和 Gruntfile。
1.package.json
被npm用于存储项目的元数据，以便将此项目发布为npm模块。你可以在此文件中列出项目依赖的Grunt和Grunt插件，放置于devDependencies配置段内。
可执行npm init命令，创建一个基本的package.json文件。
其基本内容如下：

{
  "name": "grunt_test",
  "version": "1.0.0",
  "main": "Gruntfile.js",
  "directories": {
    "test": "test"
  },
  "dependencies": {
    "grunt": "^1.0.1"
  },
  "devDependencies": {},
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "description": ""
}

关于package.json字段更为详细的介绍，请参考package.json中文文档
2.Gruntfile: 被命名为Gruntfile.js或Gruntfile.coffee，用来配置或定义任务（task）并加载Grunt插件的。
Gruntfile.js或Gruntfile.coffee文件是有效的JavaScript或CoffeeScript文件，应当放在你的项目根目录中，和package.json文件在同一目录层级，并和项目源码一起加入源码管理器。
Gruntfile由以下几部分构成："wrapper" 函数、项目与任务配置、加载Grunt插件和任务、自定义任务。
其基本内容如下：

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']);
};

在这个Gruntfile中，package.json文件中的项目元数据被导入到Grunt配置中，grunt-contrib-uglify 插件中的uglify任务被配置为压缩源码文件并依据上述元数据动态生成一个文件头注释。当在命令行中执行 grunt命令时，uglify任务将被默认执行。
其中，最外部的函数就是“wrapper”函数，所书写的Grunt代码必须放置在此函数内；
grunt.initConfig()里就是项目与任务配置，由于这本身就是JavaScript，你不仅限于使用JSON，而可以使用任意的有效的JS代码。如果有必要，你甚至可以以编程的方式生成配置；
grunt.loadNpmTasks()就是加载Grunt插件和任务；
当现有插件不能满足需要，可以使用grunt.registerTask()自定义任务。

四、安装Grunt及其插件

Grunt CLI已经正确安装，并且已经配置好package.json和Gruntfile文件，可按以下步骤安装Grunt及其插件：
1.将命令行的当前目录转到项目的根目录下。
2.执行npm install命令安装项目依赖的库。
3.执行grunt命令。
还可以通过grunt --help命令列出所有已安装的Grunt任务，但是一般更建议去查看项目的文档以获取帮助信息。

另外，npm install <module> --save-dev命令不光安装了<module>，还会自动将其添加到devDependencies配置段中。

在Grunt插件页面可以看到当前可用的Grunt插件，他们可以直接在项目中安装并使用。
安装插件之后，请务必确保将更新之后的package.json文件提交到项目仓库中。