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));
您可能感興趣的相關文章