对于没有接触过类似自动化工具的朋友，对 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") %> */ ' }, //具体任务配置 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测试项目的目录结构：
