用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基础上的任务管理工具。

1. 到NodeJS官网下载安装适合你系统的NodeJS。现在的NodeJS安装会自带NPM包管理，因此你不用再另外装NPM了。
2. 用NPM装GruntJS的CLI，因为你要在命令行执行GruntJS的命令：

       
       
       
       
   
        
        
        
        
   
          npm install -g grunt-cli 
        
       
       
       
       

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

       
       
       
       
   
        
        
        
        
   
          npm install 
        
       
       
       
       

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

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

       
       
       
       
   
        
        
        
        
   
          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']); }