Grunt 是一个基于任务的 JavaScript 项目命令行构建工具，运行于 Node.js 平台。Grunt 能够从模板快速创建项目，合并、压缩和校验 CSS & JS 文件，运行单元测试以及启动静态服务器。上一篇文章《Grunt：基于任务的 JavaScript 项目构建工具》介绍了 Grunt 安装和创建项目框架步骤，这篇文章介绍如何使用 Grunt 合并文件。
Grunt 内置 concat（文件合并）、lint（代码校验） 和 min（代码压缩） 任务，在 grunt.js 文件配置好任务后，运行 grunt 命令就可以自动完成一系列的项目构建操作了，如图示：
对应的 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 任务，后面几个任务将会在随后的文章陆续介绍。
Grunt 合并文件
Grunt 内置的 concat 任务用于合并一个或者多个文件（或者指令，例如<banner>指令）到一个文件。concat 任务的项目配置框架：
- // 项目配置
- grunt.initConfig({
- // 项目元数据，用于 <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'
- }
- }
- });
多个构建目标
在实际项目中，往往需要根据模块生成多个目标文件，例如基础模块和插件模板分开打包，配置示例：
- 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'
- }
- }
- });
动态文件名
Grunt 合并任务还可以生成动态的文件名，
- 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
