基于Grunt的前端的Build工具集合
关于Grunt的详细使用方法请参考：
下面简单介绍grunt-tbf2e的使用，包含如果安装和配置Grunt并安装grunt-tbf2e作为其插件来打包您的项目。
我们使用nodeJS自带的包管理工具NPM来安装grunt。由于希望能全局进行命令的调用，因此我们添加-g参数：
$ (sudo) npm install grunt -g注意，对于非windows用户，如果你直接使用npm install grunt -g命令时提示permition denied，那么请在前面添加sudo命令来启用管理员权限。
等待安装完毕后，我们在控制台中验证是否安装成功：
$ grunt --version如果正确输出了版本，比如grunt v0.3.17，那么说明安装成功了。如果你想了解更多关于grunt命令的使用，推荐使用grunt --help查看。
如果你是windows用户，请特别注意，你需要使用grunt.cmd来代替grunt来执行grunt命令，比如查看grunt帮助，windows用户需要在CMD中输入：
$ grunt.cmd --helpGrunt非常棒，但是有一点不够方便的是，所有的插件都必须安装在项目目录中，而不能像grunt本身一样安装在全局来发挥作用（或许以后会改进这一点^_^）。
因此，要在你的项目中使用grunt-tbf2e，你需要在控制台中cd到你的项目目录（或者说是你希望你的grunt配置文件出现的地方，或者是你希望执行打包操作的目录）。
比如我有一个项目的结构如下，并且我希望将配置文件放置在项目目录的根目录中：
path/to/project/app
├ build
├ source
├ js
├ css 于是我在控制台中cd path/to/project/app，到达项目目录根目录中。OK，接下来我们安装grunt-tbf2e到当前目录:
$ npm install grunt-f2e
注意到没有使用参数-g，这样才能讲模块安装到当前目录下！经过一段等待后npm会告诉你安装成功，这时候你再查看目录，你会发现多了一个node_modules目录（对nodeJS很熟悉的朋友请跳过这块啰嗦的说明^_^），目录如下：
path/to/project/app
├ node_modules
├ grunt-tbf2e
├ build
├ source
├ js
├ css 说明grunt-tbf2e安装完成。
grunt很强大，但是它并不知道我们的项目中哪些文件需要压缩，哪些文件需要打包，所有我们需要编写一个grunt.js来告诉它做哪些事情，添加一个grunt.js在当前目录下：
path/to/project/app
├ node_modules
├ grunt-tbf2e
├ build
├ source
├ js
├ css
├ grunt.js grunt.js如何编写呢？要想把所有细节说清楚需要写几篇文章！已经厌烦了大堆的文字说明了？好吧，作为程序员，你肯定在心中大喊：show me the code! Fine!!!直接上代码：
/*global module:false*/
module.exports = function (grunt) {
grunt.initConfig({
meta:{
/* 发布版本号 */
publish: 20120925
},
watch:{
ksp:{
files:['source/js/**' ],
tasks:['ksp:dev', 'base-build' ]
},
compass:{
files:['source/sass/**'],
tasks:['compass:dev', 'compass:release' ]
}
},
// 对base.js进行压缩
min: {
base: {
src: ['source/js/common/base.js'],
dest: 'release/<%= meta.publish %>/js/base-min.js'
}
},
// 复制base.js到release目录
copy: {
base: {
files: {
'release/<%= meta.publish %>/js/': 'source/js/common/base.js'
}
}
},
// SASS -> CSS
compass: {
dev: {
src: 'source/sass/',
dest: 'source/css'
},
release: {
src: 'source/sass/',
dest: 'release/<%= meta.publish %>/css'
}
},
ksp:{
dev:{
"name":"v2",
"pub":'<config:meta.publish>',
"main":[
"source/js/msg_center.js",
"source/js/list.js"
],
"output":"release/{{pub}}/js/{{filename}}.js",
"compress":'-min',
"unicode":true,
"wrapConfig":true
}
}
});
grunt.loadNpmTasks('grunt-tbf2e');
// Build 先对js文件进行打包，然后对sass进行编译，并赋值css到release文件夹下
grunt.registerTask('default', 'ksp compass base-build');
// 对base.js的压缩 已经复制
grunt.registerTask('base-build', 'copy:base min:base');
};上面就是我前一个项目的配置文件，可以看到里面做了很多事情，比如文件的copy，压缩min，JS文件的打包ksp，动态样式文件的编译compass，甚至你还看到我使用了一些变量定义<config:meta:publish>。对，相信聪明的你肯定能猜到这些配置的含义，但是我还是要简单地啰嗦两句：
- 我们通过initConfig来配置任务，这些配置过的任务不一定被执行
- 我们通过
grunt.loadNpmTasks('grunt-tbf2e');来告诉grunt我们需要使用grunt-tbf2e这个插件 - 我们通过grunt.registerTask来定义和组合任务
比如:
grunt.registerTask('default', 'ksp compass base-build');定义了default方法，也就是如果我们在控制台中直接输入:
$ grunt
它默认会执行的方法。
而base-build的定义，则使得我们可以通过在控制台中：
$ grunt base-build
来依次执行copy:base min:base两个任务。在这里简单地说明下copy:base的意思：执行copy任务中的一个子任务base。
注意到initConfig方法中，copy部分的定义下面有个base了吧？或许你会以为这个base有特殊的含义，其实它只是我随便取的一个子任务的名字，你可以根据自己的喜好定义多个子任务，比如：
grunt.initConfig({
copy: {
taskOne: {
},
taskTwo: {
}
}
});
注意，不是所有的功能，都支持多任务配置，具体要参考各个任务的具体说明和文档哦~
除了grunt的内置组件：
- concat - Concatenate files.
- init - Generate project scaffolding from a predefined template.
- lint - Validate files with [JSHint][jshint].
- min - Minify files with [UglifyJS][uglify].
- qunit - Run [QUnit][qunit] unit tests in a headless [PhantomJS][phantom] instance.
- server - Start a static web server.
- test - Run unit tests with [nodeunit][nodeunit].
- watch - Run predefined tasks whenever watched files change.
以外，tbf2e提供了以下额外组件：
复制文件到制定目录.
将LESS文件编译为CSS.
在你的项目中使用Compass(SASS)
对CSS文件进行压缩.
对遵循KISSY 1.2 的包规范的脚本文件进行打包
Copyright (c) 2012 neekey
Licensed under the MIT license.