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