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\'
}
}
});
配置好以后，运行下面的命令就可以进行文件合并操作了：
grunt concat
合并后的代码示例如下：
/*! 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));
您可能感兴趣的相关文章