Grunt 是一個基于任務(wù)的 JavaScript 項目命令行構(gòu)建工具，運行于 Node.js 平臺。Grunt 能夠從模板快速創(chuàng)建項目，合并、壓縮和校驗 CSS & JS 文件，運行單元測試以及啟動靜態(tài)服務(wù)器。上一篇文章《Grunt：基于任務(wù)的 JavaScript 項目構(gòu)建工具》介紹了 Grunt 安裝和創(chuàng)建項目框架步驟，這篇文章介紹如何使用 Grunt 合并文件。

Grunt 內(nèi)置 concat（文件合并）、lint（代碼校驗） 和 min（代碼壓縮） 任務(wù)，在 grunt.js 文件配置好任務(wù)后，運行 grunt 命令就可以自動完成一系列的項目構(gòu)建操作了，如圖示：

對應(yīng)的 Grunt 配置文件代碼如下：

/*global module:false*/ 
module.exports = function(grunt) { 
  // Project configuration. 
  grunt.initConfig({ 
    pkg: '<json:GruntDemo.jquery.json>', 
    meta: { 
      banner: '/*! <%= pkg.title || pkg.name %> - v<%= pkg.version %> - ' + 
        '<%= grunt.template.today("yyyy-mm-dd") %>\n' + 
        '<%= pkg.homepage ? "* " + pkg.homepage + "\n" : "" %>' + 
        '* Copyright (c) <%= grunt.template.today("yyyy") %> <%= pkg.author.name %>;' + 
        ' Licensed <%= _.pluck(pkg.licenses, "type").join(", ") %> */' 
    }, 
    concat: { 
      dist: { 
        src: ['<banner:meta.banner>', '<file_strip_banner:src/<%= pkg.name %>.js>'], 
        dest: 'dist/<%= pkg.name %>.js' 
      } 
    }, 
    min: { 
      dist: { 
        src: ['<banner:meta.banner>', '<config:concat.dist.dest>'], 
        dest: 'dist/<%= pkg.name %>.min.js' 
      } 
    }, 
    qunit: { 
      files: ['test/**/*.html'] 
    }, 
    lint: { 
      files: ['grunt.js', 'src/**/*.js', 'test/**/*.js'] 
    }, 
    watch: { 
      files: '<config:lint.files>', 
      tasks: 'lint qunit' 
    }, 
    jshint: { 
      options: { 
        curly: true, 
        eqeqeq: true, 
        immed: true, 
        latedef: true, 
        newcap: true, 
        noarg: true, 
        sub: true, 
        undef: true, 
        boss: true, 
        eqnull: true, 
        browser: true 
      }, 
      globals: { 
        jQuery: true 
      } 
    }, 
    uglify: {} 
  }); 
  // Default task. 
  grunt.registerTask('default', 'lint qunit concat min'); 
}; 

這篇文章先介紹 concat 任務(wù)，后面幾個任務(wù)將會在隨后的文章陸續(xù)介紹。

Grunt 合并文件

Grunt 內(nèi)置的 concat 任務(wù)用于合并一個或者多個文件（或者指令，例如<banner>指令）到一個文件。concat 任務(wù)的項目配置框架：

// 項目配置 
grunt.initConfig({ 
  // 項目元數(shù)據(jù)，用于 <banner> 指令 
  meta: {}, 
  // 將要被合并的文件列表 
  concat: {} 
}); 

基本用法

把 src 目錄下的 intro.js、projject.js、outro.js 三個文件合并到 built.js 文件并存放在 dist 目錄，配置示例：

grunt.initConfig({  
  concat: {  
    dist: {  
      src: ['src/intro.js', 'src/project.js', 'src/outro.js'],  
      dest: 'dist/built.js' 
    }  
  }  
}); 

添加注釋

還可以通過 <banner> 指令在合并文件中添加注釋，例如包名、版本、生成時間等，示例代碼：

grunt.initConfig({  
  pkg: '<json:package.json>',  
  meta: {  
    banner: '/*! <%= pkg.name %> - v<%= pkg.version %> - ' +  
      '<%= grunt.template.today("yyyy-mm-dd") %> */' 
  },  
  concat: {  
    dist: {  
      src: ['<banner>', '<file_strip_banner:src/project.js>'],  
      dest: 'dist/built.js' 
    }  
  }  
}); 

多個構(gòu)建目標

在實際項目中，往往需要根據(jù)模塊生成多個目標文件，例如基礎(chǔ)模塊和插件模板分開打包，配置示例：

grunt.initConfig({  
  concat: {  
    basic: {  
      src: ['src/main.js'],  
      dest: 'dist/basic.js' 
    },  
    extras: {  
      src: ['src/main.js', 'src/extras.js'],  
      dest: 'dist/with_extras.js' 
    }  
  }  
}); 

動態(tài)文件名

Grunt 合并任務(wù)還可以生成動態(tài)的文件名，

grunt.initConfig({  
  pkg: '<json:package.json>',  
  dirs: {  
    src: 'src/files',  
    dest: 'dist/<%= pkg.name %>/<%= pkg.version %>' 
  },  
  concat: {  
    basic: {  
      src: ['<%= dirs.src %>/main.js'],  
      dest: '<%= dirs.dest %>/basic.js' 
    },  
    extras: {  
      src: ['<%= dirs.src %>/main.js', '<%= dirs.src %>/extras.js'],  
      dest: '<%= dirs.dest %>/with_extras.js' 
    }  
  }  
}); 

配置好以后，運行下面的命令就可以進行文件合并操作了：

合并后的代碼示例如下：

/*! Gruntdemo - v0.1.0 - 2013-01-22  
* https://github.com/dreamsky/grunt-demo  
* Copyright (c) 2013 Andy Li; Licensed MIT */ 
(function($) {  
  // Collection method.  
  $.fn.awesome = function() {  
    return this.each(function() {  
      $(this).html('awesome');  
    });  
  };  
  // Static method.  
  $.awesome = function() {  
    return 'awesome';  
  };  
   
  // Custom selector.  
  $.expr[':'].awesome = function(elem) {  
    return elem.textContent.indexOf('awesome') >= 0;  
  };  
}(jQuery)); 

原文鏈接：http://www.cnblogs.com/lhb25/archive/2013/01/31/grunt-for-javascript-project-b.html