用GruntJS合并、压缩JS文件

为什么要合并、压缩你的JS文件？

一个项目开发完成我们总能发现有一堆js文件非常混乱。

一般在一个HTML文档加载的时候，浏览器会根据HTML代码从上到下读取所需要加载进来的CSS、JS、图片等文件，指定为异步加载的文件除外。每读取一个文件，浏览器都会向Web服务器发送一个加载的请求，服务器觉得这个请求没问题后，浏览器才会开始接收文件。也就是说，每次加载一个文件都会消耗一定的时间在服务器和客户端的来回上。

加载一个文件消耗的时间可以忽略不计，问题是你显示一个复杂的网页可能会加载N多文件，那我们在我们可以控制的范围内，能少花点时间就少花点呗。用户可是对网页加载的速度很挑剔的！

对图片我们经常会把一些图标合并成一个大图片用CSS的background来取得相应图片以减少请求。CSS也通常对一种媒体只写一个文件，当然这边要注意万恶的IE对CSS的限制，参考我的博文:用SCSS需要小心IE对css的几个限制。对JS，一般就会将本地的所有用到的文件合并及压缩。当然，以上对使用requireJS一类的框架加载的除外。

所谓的压缩就是会将所有空格符、注释等不影响代码都移除，把长的名称都替换为短的名称以节省字符。当你的JS被压缩后，除了头部可能会额外加点文件注释外，所有的JS代码都并为一行，很多变量名都变为a啊a的字母，完全失去了可读性。然后你看到自己的JS从300KB可能缩减为只有5KB。这样做的唯一目的就是把JS文件变小，使其加载的速度更快。

GruntJs是一套前端自动化工具，一个基于nodeJs的命令行工具，一般用于：

① 压缩文件
② 合并文件
③ 简单语法检查

GruntJS的安装及使用

GruntJS是一个建立在NodeJS基础上的任务管理工具。

到NodeJS官网下载安装适合你系统的NodeJS。如今的NodeJS安装会自带NPM包管理，所以你不用再另外装NPM了。

用NPM装GruntJS的CLI，由于你要在命令行执行GruntJS的命令：

npm install -g grunt-cli

在开发项目根文件夹准备package.json文件。
将命令行指定到这个根文件夹，执行
```
npm install
```

想要在你的项目里执行GruntJS呢，还须要下面几步：

准备文件Gruntfile.js或Gruntfile.coffee。
将命令行指定到这个根文件夹，执行
```
grunt 
```

package.json的配置

这个JSON文件就是给NPM包管理用的。这里我们仅仅要依据GruntJS官网给的一个样例改就已足够。具体的配置请參考官网： https://www.npmjs.org/doc/files/package.json.html

{

  "name": "demo",

  "file": "zepto",

  "version": "0.1.0",

  "description": "demo",

  "license": "MIT",

  "devDependencies": {

      "grunt": "~0.4.1",

      "grunt-contrib-jshint": "~0.6.3",

      "grunt-contrib-concat": "~0.3.0",

      "grunt-contrib-uglify": "~0.2.1",

      "grunt-contrib-requirejs": "~0.4.1",

      "grunt-contrib-copy": "~0.4.1",

      "grunt-contrib-clean": "~0.5.0",

      "grunt-strip": "~0.2.1"

  },

  "dependencies": {

    "express": "3.x"

  }

}

这个样例包括了配置这个项目的名称，项目的版本号，开发用到的NPM包。执行npm install的时候就是读取这个devDependencies的内容，来下载对应的包到项目根文件夹的node_modules文件夹内。还能够指定下载的包的版本号。

在这里，我们合并、压缩JS须要用到2-3个NPM包。各自是：

grunt
grunt-contrib-concat https://github.com/gruntjs/grunt-contrib-concat
用于文件的合并。
grunt-contrib-uglify https://github.com/gruntjs/grunt-contrib-uglify
用于JS的压缩。

名称中间带“contrib”的为GruntJS官方提供的插件。

另外，演示样例其中使用的grunt-contrib-jshint是一个用来检查JS语法错误的插件，能够在你合并文件的时候就帮你检查出错误。

Gruntfile.js的配置

一个主要的Gruntfile包括下面几部分：

 module.exports = function(grunt) {

  grunt.initConfig({

    pkg: grunt.file.readJSON('package.json'),

    // 这里放插件的设置信息

    taskname: { }

  });

  // 加载要使用的插件

  grunt.loadNpmTasks('grunt-taskname');

  // 注冊任务

  grunt.registerTask('default', ['grunt-taskname']);

};

整段代码包括在一个函数中，利用了NodeJS一个把函数公开，能够被其它文件使用的一个写法。

合并js示例：

module.exports = function (grunt) {

  // 项目配置

  grunt.initConfig({

    pkg: grunt.file.readJSON('package.json'),

    concat: {

      options: {

        separator: ';'

      },

      dist: {

        src: ['src/login.js', 'src/reg.js', 'src/index.js'],

        dest: 'dest/cdel.min.js'

      }

    }

  });

  grunt.loadNpmTasks('grunt-contrib-concat');

  // 默认任务

  grunt.registerTask('default', ['concat']);

}

"concat"指定了这套配置所相应的插件。"dev"是我自己定义的一个子任务，我给它取名为"dev"。一个插件能够拥有多套不同的配置以应付不同的需求，也就是说在"concat"下能够包括随意多个自己定义的子任务，每一个子任务都能够有不同的配置。

这里我设置了"banner"參数，这个參数在非常多对文件操作的插件中都有，如uglify, less, sass等等。它的作用是给终于的目标文件头部加上一些信息或者代码。

在这个"banner"中，我为终于生成的app.debug.js加上了一段文件凝视。当中还使用了几个特殊的代码：

\n: 换行符，写入文件后，前后的字符就会分行。

<%= pkg.name %>: 类似ASP的写法。pkg是用grunt.file.readJSON('package.json')读取到的JSON，而且已经转换为JS对象。依照前面package.json的演示样例，这段代码会在写入文件时被替换为"my-project-name"。; 事实上从这里就能够看出在grunt的配置中，我们能够利用JS对象和JSON来做辅助的配置。

<%= grunt.template.today("yyyy-mm-dd") %>: 这是利用了个grunt的方法，能够执行任务的时间而且指定生成的格式。

执行这个concat任务时，我的app.debug.js的头部会有下面一段凝视：

/*!

 * my-project-name - JS for Debug

 * @licence my-project-name - v0.1.0 (2014-07-07)

 * http://blog.csdn.net/jennieji | Licence: MIT

 */

而在文件路径的写法上，则能够用一些匹配的符号。如我这里用了一个星号"*.js"表示随意名称的JS文件，两个星号"**"表示当前文件夹或者子文件夹下。所以这里"js/app/"文件夹下及其全部子文件夹下的JS文件都会被合并到app.debug.js的文件里。

配置完后，还要记得加载插件和注冊你这个任务，否则会报错！

加载插件就是把插件NPM包的名字"grunt-contrib-concat"传给grunt.loadNpmTasks方法。

注冊任务呢，则是用grunt.registerTask方法。第一个參数为注冊的任务队列的名称，写为"default"则成为这个 Gruntfile的默认任务队列。第二个參数就是这个任务队列要运行的任务名称的数组，这里的任务名称使用在initConfig配置时使用的名称，即"concat"。改动代码例如以下：

// 加载要使用的插件

grunt.loadNpmTasks('grunt-contrib-concat');

// 注冊任务

grunt.registerTask('default', ['concat']);

假设这样写，那配置完后直接输入下面命令到命令行便能够运行一次JS的合并：

grunt

假设将"default"改为其它名字，比方"debug"，那么命令行须要输入：

grunt debug

增加Uglify压缩JS也做类似的配置。注意的是这边源文件和目标文件的配置写法不一样。是在files參数里以“目标文件路径：[源文件路径1,源文件路径2,...]”的格式来写。

压缩js示例：

module.exports = function (grunt) {

  // 项目配置

  grunt.initConfig({

    pkg: grunt.file.readJSON('package.json'),

    uglify: {

      options: {

        banner: '/*! <%= pkg.file %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'

      },

      build: {

        src: 'src/<%=pkg.file %>.js',

        dest: 'dest/<%= pkg.file %>.min.js'

      }

    }

  });

  // 加载提供"uglify"任务的插件

  grunt.loadNpmTasks('grunt-contrib-uglify');

  // 默认任务

  grunt.registerTask('default', ['uglify']);

}