grunt 自动化之压缩javascript代码

遇到的问题

说grunt以前，先来讲说开发中遇到的问题。

1. 压缩代码很麻烦

若是不使用自动化工具，压缩代码通常使用在线工具。将本地代码拷到网页中，压缩，而后再拷贝回本地。若是文件很少，还能够忍受。可是实际开发中文件确定是少不了的。更使人抓狂的是，若是文件频繁的修改，那就须要不断的复制粘贴。。
此外不一样的在线工具，压缩代码标准是不同的。有的在线工具只是去掉注释、换行符；有的在线工具使用的Uglify压缩；有的在线工具使用的是Yui压缩... 不一样的压缩天然生成的文件不同。每一个人使用的压缩工具都不同，开发中必定会遇到问题。

2. 压缩以后的代码没法调试

压缩代码，天然是为了减小文件大小，提升网站的访问速度。可是压缩以后的代码根本无法阅读，给开发带来了很多困难。尤为是若是使用相似Uglify这种压缩方式的工具，压缩以后的代码变量名都会被修改为a、b、c、d了，想调试，彻底不可能。

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

grunt

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

• grunt-contrib-concat 合并js代码
• grunt-contrib-uglify 压缩js代码，并生成source map文件

安装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整合版