一般而言，我会把项目代码分成两份，这两份代码内容是相同的，一份用于本地开发或者修改，另一份放在svn。在svn上的代码是与开发的工程并存的，我们前端只需要把本地开发好的文件提交到svn，开发再将svn的文件同步到服务器。在提交的过程中，我们需要做如下处理：

首先，js压缩工具压缩js

其次，css压缩工具压缩css

然后，合并多个js和css

最后，压缩和优化图片，进行覆盖

对于多个文件还需要重复以上操作…

如果我说上述工作只需要一两行命令就能完成，你相信吗？或许你不信，但却真的可以做到，是的，那就是grunt，它可以帮助我们完成自动化构建工程。具体如何使用呢？请看下文：

第一步：

因为grunt是基于nodejs环境运行的，所以需要先下载nodejs，进入http://nodejs.org/download/ 选择对应系统的nodejs安装包，然后打开命令编辑器（cmd），输入：

npm install -g grunt-cli

安装完成之后，你会看到这么个界面：

你也可以输入这么一行代码，测试是否安装成功：

grunt -versions

如果安装成功，则可以看到grunt的版本号，如下界面：

如果之前安装过grunt，你需要卸载它，则可以输入：

npm uninstall -g grunt

第二步：

在安装node的根目录新建一个文件，文件名为package.json。打开package.json，加入如下代码，这些代码是官网给出的

{
  "name": "my-project-name",
  "version": "0.1.0",
  "author": "Your Name",
  "devDependencies": {
    "grunt": "~0.4.5"
  }
}

好了，现在开始我们的第一个任务，压缩js文件，既然要有压缩js文件的功能，就必须安装相应的插件，于是我们来到官网需找插件。

第三步：

打开官网 http://gruntjs.com/plugins ，找到相应的压缩js的插件

进入到相应页面：https://www.npmjs.com/package/grunt-contrib-uglify

插件的版本号可以在这个页面右侧栏看到，其中右侧栏还包含了发布作者的信息、github地址以及相关证书。增加完之后，我们回到命令编辑器，输入对应的工程目录。假设我的node目录为：F:\node , 项目路径为：F:\test。

因为我们在命令编辑器中操作的是grunt，所以需要找到对应的路径，在命令编辑器中：

先输入 f:

回车，输入 cd node

回车，再输入

npm install runt-contrib-uglify

插件安装完成后，我们就会看到这样一个界面：

在命令编辑器可以看到插件的信息（版本号0.7.0），于此同时，你也会发现在node_modules文件夹下多了grunt-contrib-uglify插件的文件。

然后我们需要在package.json这个配置文件里面增加相应插件的代码：

{
  "name": "my-project-name",
  "version": "0.1.0",
  "author": "Your Name",
  "devDependencies": {
    "grunt": "~0.4.5",
    "grunt-contrib-uglify": "~0.7.0" // 新增代码  “插件名称” : “~版本号” 
  }
}

第四步：

然后再在node根目录新建Gruntfile.js，这个js文件的功能是将工程中需要处理的文件与package.json结合起来，并且通过控制对应的插件去设置需要处理的文件，以及处理后的文件目录或输出文件名，Gruntfile.js的基本代码如下：

module.exports = function(grunt) {
    grunt.initConfig({
      pkg: grunt.file.readJSON('package.json'), // 将js与json文件关联在一起
      uglify : {
        options :{  // 可选
            separates : ""
        },
        min: {
            expand : true,
            cwd    : '../test',
            src    : ['*/*.js'],
            dest   : '../test',
            ext    : '.min.js'
        }
      }
    });
 
    // 从node目录加载压缩js文件的插件
    grunt.loadNpmTasks('grunt-contrib-uglify');
 
    // 执行对应的grunt任务
    grunt.registerTask('default', ['uglify:min']);
};

以上代码的功能是将test文件下所有目录中的js文件全部压缩。

例如test文件下有一个a文件夹，a中有base.js 。则上面的代码在执行完grunt命令后会在a中增加一个base.min.js，这个文件就是a.js的压缩版。

如果你只是想把对应的文件压缩，不想新增.min.js文件。可把ext的值设为：’.js’ 。

uglify 中的 options 是可选的。在合并多个js文件时非常有用，为什么呢？请看下面的问题：

我在测试合并插件（grunt-contrib-concat）的时候，由于js文件中存在末尾没有加分号的语句，那么就会出现以下问题。假设合并的文件分别为a.js 和 b.js：

a.js 中：

…
var getStyle = function(ele,attr){
    return ele.currentStyle ? ele.currentStyle[attr] : getComputedStyle(ele,false)[attr];
}

b.js 中：

(function(){
 …
})()

那么，当合并完成，b.js里的自调用匿名函数的第一对括号会当做函数调用，此时就会导致错误。这也是为什么有些人会在写自调用匿名函数时，会在前后都加上分号，目的就是为了防止以上错误。

而在grunt中，我们便可以把separates 的值设为 ‘;’ 用于链接各个js文件。这样也能避免js错误。

设置参数解释：

expand : 为true时，用*代替的文件名处理完输出后也为其具体名
cwd : 需要处理文件的共同目录，或者说根目录（父目录）
src : 需要处理的单独文件 ，即对于的子目录。它的值为一个数组
dest : 处理完文件的存放目录
ext : 处理完文件的后缀名

第五步：

最后，我们需要执行grunt命令。回到命令编辑器，输入：grunt

当grunt命令执行完后，会看到这么一个界面：

这样，我们就完成了js文件压缩。打开每个文件夹，都可看到新生成且后缀名为 .min.js 的文件。

如果你还想要用grunt合并css文件、压缩图片或者其他功能，可以重复第三、四、五步骤。

倘若你不想每次在新增插件的时候，都像下面这样手动添加载入插件的代码：

grunt.loadNpmTasks('grunt-contrib-uglify'); // 加载js压缩插件
grunt.loadNpmTasks('grunt-contrib-cssmin'); // 加载css压缩插件
grunt.loadNpmTasks('grunt-contrib-concat') ; // 加载文件合并插件

那么你可以安装 load-grunt-tasks插件，然后在Gruntfile.js加入以下代码，它的功能与上面代码等价。

// 加载在package.json声明的全部插件
require('load-grunt-tasks')(grunt);

目前我用到的主要有以下几个插件：

grunt-contrib-uglify

压缩js文件，上文有介绍。

grunt-contrib-cssmin

压缩css文件，用法与压缩js的插件类似。

grunt-contrib-concat

合并多个文件，Gruntfile中只需要设置src和des，即：

concat   : {
    options :{  // 可选
        separates : ""
    },
    css : {
        src    : ['../test/a/*.css','../test/b/*.css'],
        dest   : '../test/all.css'
    }
}

grunt-contrib-imagemin

压缩图片，这个插件会对指定文件里的图片进行压缩，你不能设置输出的名称，因为它是直接对图片本身进行压缩。对于不同格式的图片，只需要把src的值图片的后缀名变为 .{jpg,png,gif} 即可。

关于grunt的内容就暂时介绍这么多，如果你想了解更多，请访问它的官网 http://gruntjs.com 。