对于没有接触过类似自动化工具的朋友，对 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测试项目的目录结构：