Grunt 初体验

对于没有接触过类似自动化工具的朋友，对 grunt 也许只是停留在听过阶段，而并没有真正的使用过。今天就从最初级的教程说起。
在开始教程之前，需要先确保你已经安装了 node。

下面就开始来讲解 grunt 的使用过程。

1、安装全局的 grund-cli

$ npm install -g grunt-cli

安装 grunt-cli 并不等于安装了 Grunt 任务运行器！Grunt CLI 的任务是运行 Gruntfile 指定的 Grunt 版本。 这样就可以在一台电脑上同时安装多个版本的 Grunt。

2、创建项目目录

$ mkdir grunt-project

3、接着进入项目目录，创建 package.js

$ cd grunt-project
$ touch package.js

package.js 是 node 创建插件和模块的依赖文件。、

下面是我的一个测试的 package.js 文件：

{
  "name": "gruntFirst",
  "version": "0.1.0",
  "description": "test grunt",
  "author": "yiyang",
  "license": "ISC",
  "devDependencies": {
    "grunt": "~0.4.1",
    "grunt-contrib-uglify":"*"
  }
}

4、创建 Gruntfile.js 文件
Gruntfile.js文件示例：

// 包装函数
module.exports = function(grunt) {

  // 任务配置
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    uglify: {
      build: {
        src: 'src/<%= pkg.name %>.js',
        dest: 'build/<%= pkg.name %>.min.js'
      }
    }
  });

  // 任务加载
  grunt.loadNpmTasks('grunt-contrib-uglify');

  // 自定义任务
  grunt.registerTask('default', ['uglify']);

};

我用于测试的 Gruntfile.js 文件代码如下：

module.exports = function(grunt) {
    // 构建任务配置
    grunt.initConfig({
        //读取package.json的内容，形成个json数据
        pkg: grunt.file.readJSON('package.json'),
        uglify: {
            //文件头部输出信息
            options: {
                banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
            },
            //具体任务配置
            build: {
                //源文件
                src: 'src/aa.js',
                //目标文件
                dest: 'build/aa-min.js'
            }
        }
    });
    // 加载指定插件任务
    grunt.loadNpmTasks('grunt-contrib-uglify');
    // 默认执行的任务
    grunt.registerTask('default', ['uglify']);
};

5、执行插件和模块安装命令

$ npm install

如果安装成功，你会看到如下代码。并在项目目录文件下面创建一个 node_modules 文件夹，里面放着依赖的插件和模块。

6、创建一个src文件夹，里面创建一个 aa.js 的js文件，并在 aa.js 写入一些 js 代码。
7、创建一个 build 文件夹。
8、执行 grunt 任务

$ grunt uglify

执行该任务之后，你会看到如下代码：

最后你会发现 build 文件夹里面会有一个 aa-min.js 压缩过的js文件。
到这里，你的第一个grunt任务已经完成。

下面是我该grunt测试项目的目录结构：