Siberiawolf +

grunt 自动化之压缩javascript代码

2015-05-21

遇到的问题

说grunt之前，先来说说开发中遇到的问题。
1.压缩代码很麻烦
如果不使用自动化工具，压缩代码一般使用在线工具。将本地代码拷到网页中，压缩，然后再拷贝回本地。如果文件不多，还可以忍受。但是实际开发中文件肯定是少不了的。更令人抓狂的是，如果文件频繁的修改，那就需要不断的复制粘贴。。 此外不同的在线工具，压缩代码标准是不一样的。有的在线工具只是去掉注释、换行符；有的在线工具使用的Uglify压缩；有的在线工具使用的是Yui压缩… 不同的压缩自然生成的文件不一样。每个人使用的压缩工具都不一样，开发中一定会遇到问题。
2.压缩之后的代码无法调试
压缩代码，自然是为了减少文件大小，提高网站的访问速度。但是压缩之后的代码根本没法阅读，给开发带来了不少困难。尤其是如果使用类似Uglify这种压缩方式的工具，压缩之后的代码变量名都会被修改成a、b、c、d了，想调试，完全不可能。

开发应该是件很easy的事情。以上问题不光是我会遇到，肯定有不少人会遇到，那么就一定会有牛人解决了这些问题。grunt就可以解决上面这些简单事情。

grunt

关于Grunt的简介，官网上面很详细。此外还有Grunt中文网。
为了解决上面的两个问题，需要使用到Grunt的两个插件

安装node

要想使用grunt，必须要安装node。因为grunt中的插件都是使用npm来安装并管理的。So~ 安装node。从Node.js官网上下一个windows版本的node.js，然后安装到本地。安装完成后，要确保自己的环境变量中有node.exe的路径。然后打开命令提示符，输入node，就进入到node.js交互模式下了。说明node已经安装成功了。

C:\Users\Administrator>node
> console.log("Hello World");
Hello World
undefined
>

安装grunt

在命令提示符下，运行npm install -g grunt-cli，这条命令就会将grunt命令植入到系统路径，然后在任意目录下就可以运行grunt了。

配置grunt

要想让grunt自动干活，还得写点配置文件。package.json和Gruntfile.js。
package.json文件就是告诉grunt需要使用哪些插件，例如这里我们就需要使用grunt-contrib-concat和grunt-contrib-uglify这两个插件。
Gruntfile.js是告诉每个插件具体应该如何干活的。例如哪几个文件需要合并，那个文件需要压缩，压缩之后生成的文件路径等等。

package.json

package.json文件如下

{
  "name": "my-project-name",		// 项目名称
  "version": "0.1.0",				// 项目版本
  "devDependencies": {
    "grunt": "~0.4.5",				// 使用grunt；版本是0.4.5
    "grunt-contrib-concat": "~0.5.1",	// 使用concat；版本是0.5.1
    "grunt-contrib-uglify": "~0.9.1"   // 使用uglify；版本是0.9.1
  }
}

文件的配置很简单，就是在package.json中配置上项目中需要使用哪些插件，以及插件的版本。
找插件的方法也很简单，在plugins中有一个列表，这里头包括了所有可以使用的插件。将需要使用的插件名称、版本号添加到package.json中即可。
如果列表前面有”contrib”字样的，说明该插件是由官网维护的。例如grunt-contrib-concat就是官方维护的。
那么该如何知道该插件的版本号呢？通过列表点到插件的详情页中，在每个插件的右侧都会有该插件的最新版本号。例如0.5.1 is the latest of 11 releases，那么0.5.1就是最新的版本号了。
添加完package.json之后，我们需要下载一下插件。既然我们要使用concat和uglify这两个插件，没有代码可不行。所以必须下载下来。 在项目目录中命令提示符下，执行npm install，然后稍等片刻，我们所需要的插件就全都下载好了。在你的目录下会多出一个node_modules文件夹，这个文件夹中就是上面配置的三个插件grunt、concat、uglify。

Gruntfile.js

Gruntfile.js文件如下

module.exports = function(grunt) {

  // 项目配置信息
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),	// grunt会读取package.json中的文件信息
    concat : {    	// concat插件的配置信息
       test_grunt : {	// 名称而已~
         files : {	// 将source目录下doT.js和common.js合并成tmp.js，并保存到dist目录下
           'dist/tmp.js': ['source/doT.js','source/common.js']
         }
       }
     },
     uglify: {	// uglify插件的配置信息
       test_grunt : {	// 名称而已~
       	  options: {
            sourceMap: true	// 允许自动生成source map文件
          },
         files : {	// 将tmp.js压缩成tmp.min.js
           'dist/tmp.min.js' : 'dist/tmp.js'
         }
       }
     }
  });

  // 加载插件
  grunt.loadNpmTasks('grunt-contrib-concat');
  grunt.loadNpmTasks('grunt-contrib-uglify');

  // 执行任务，任务名称是default
  grunt.registerTask('default', ['concat','uglify']);

};

就是告诉concat将哪些文件合并，告诉uglify将哪些文件进行压缩，是否生成source map。更高级的配置方法可以从插件的详情中找到：concat、uglify。将上面的文件都配置完之后，运行grunt命令，然后稍等片刻，可以看到如下信息

e:\work\web\demo\grunt>grunt
Running "concat:test_grunt" (concat) task
File dist/tmp.js created.

Running "uglify:test_grunt" (uglify) task
>> 1 sourcemap created.
>> 1 file created.

Done, without errors.

生成的文件

最后我们再来看下生成的文件吧。 生成的文件 dist文件夹下是压缩之后的代码
node_modules文件夹下是通过package.json配置生成的插件
source文件夹下是未压缩的代码
dist文件夹下内容如下
审查元素 tmp.js是将doT.js和common.js合并之后的文件
tmp.min.js是将tmp.js压缩之后的文件 tmp.min.js.map是生成的source map文件

source map

source map就是一个信息文件，通过这个信息文件，可以让压缩后的.min.js文件找到与之对应的未压缩的.js文件。调试的时候直接使用未压缩的文件。
开启source map的方法也很简单，在Chrome浏览器中F12开启开发者工具，打开Setting面板，找到Sources，其中有个Enable JavaScript source maps选项，勾选上就可以了(PS:Chrome版本是39之后的)。然后在Sources标签下，就会发现多加载了个js文件。 审查元素 关于Source map的详解，直接看吧~
如何在Chrome下使用Source map，谷歌已经给出了详细方法：Chrome using Source Maps
此外有很多语言支持source map，也有很多工具支持source map，甚至包括css也支持source map。已经有人整理出来一份列表了Source maps

总结

使用了grunt之后压缩代码、调试压缩代码，就很方便了~当然如果你不想配置node和grunt环境，宁愿使用在线工具，也是可以的~
grunt并不只是可以用来压缩代码。实际上对于需要返回重复的任务，如压缩、编译、单元测试等，使用grunt都可以自动话解决。

参考连接

补充一篇文章：grunt整合版

技术

项目