用GruntJS合并、压缩JS文件
为什么要合并、压缩你的JS文件？
GruntJs是一套前端自动化工具，一个基于nodeJs的命令行工具，一般用于：
① 压缩文件② 合并文件
③ 简单语法检查
GruntJS的安装及使用
GruntJS是一个建立在NodeJS基础上的任务管理工具。
- 到NodeJS官网下载安装适合你系统的NodeJS。如今的NodeJS安装会自带NPM包管理，所以你不用再另外装NPM了。
- 用NPM装GruntJS的CLI，由于你要在命令行执行GruntJS的命令： npm install -g grunt-cli
- 在开发项目根文件夹准备package.json文件。
- 将命令行指定到这个根文件夹，执行 npm install
想要在你的项目里执行GruntJS呢，还须要下面几步：
- 准备文件Gruntfile.js或Gruntfile.coffee。
- 将命令行指定到这个根文件夹，执行 grunt
package.json的配置
这个JSON文件就是给NPM包管理用的。这里我们仅仅要依据GruntJS官网给的一个样例改就已足够。具体的配置请參考官网： https://www.npmjs.org/doc/files/package.json.html
"name": "demo",
"file": "zepto",
"version": "0.1.0",
"description": "demo",
"license": "MIT",
"devDependencies": {
"grunt": "~0.4.1",
"grunt-contrib-jshint": "~0.6.3",
"grunt-contrib-concat": "~0.3.0",
"grunt-contrib-uglify": "~0.2.1",
"grunt-contrib-requirejs": "~0.4.1",
"grunt-contrib-copy": "~0.4.1",
"grunt-contrib-clean": "~0.5.0",
"grunt-strip": "~0.2.1"
},
"dependencies": {
"express": "3.x"
}
}
这个样例包括了配置这个项目的名称，项目的版本号，开发用到的NPM包。执行npm install的时候就是读取这个devDependencies的内容，来下载对应的包到项目根文件夹的node_modules文件夹内。还能够指定下载的包的版本号。
在这里，我们合并、压缩JS须要用到2-3个NPM包。各自是：
- grunt
- grunt-contrib-concat https://github.com/gruntjs/grunt-contrib-concat
用于文件的合并。 - grunt-contrib-uglify https://github.com/gruntjs/grunt-contrib-uglify
用于JS的压缩。
名称中间带“contrib”的为GruntJS官方提供的插件。
另外，演示样例其中使用的grunt-contrib-jshint是一个用来检查JS语法错误的插件，能够在你合并文件的时候就帮你检查出错误。
Gruntfile.js的配置
一个主要的Gruntfile包括下面几部分：
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
// 这里放插件的设置信息
taskname: { }
});
// 加载要使用的插件
grunt.loadNpmTasks('grunt-taskname');
// 注冊任务
grunt.registerTask('default', ['grunt-taskname']);
};
整段代码包括在一个函数中，利用了NodeJS一个把函数公开，能够被其它文件使用的一个写法。
合并js示例：
module.exports = function (grunt) {
// 项目配置
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
concat: {
options: {
separator: ';'
},
dist: {
src: ['src/login.js', 'src/reg.js', 'src/index.js'],
dest: 'dest/cdel.min.js'
}
}
});
grunt.loadNpmTasks('grunt-contrib-concat');
// 默认任务
grunt.registerTask('default', ['concat']);
}
"concat"指定了这套配置所相应的插件。"dev"是我自己定义的一个子任务，我给它取名为"dev"。一个插件能够拥有多套不同的配置以应付不同的需求，也就是说在"concat"下能够包括随意多个自己定义的子任务，每一个子任务都能够有不同的配置。
这里我设置了"banner"參数，这个參数在非常多对文件操作的插件中都有，如uglify, less, sass等等。它的作用是给终于的目标文件头部加上一些信息或者代码。
在这个"banner"中，我为终于生成的app.debug.js加上了一段文件凝视。当中还使用了几个特殊的代码：
- \n
- 换行符，写入文件后，前后的字符就会分行。
- <%= pkg.name %>
- 类似ASP的写法。pkg是用grunt.file.readJSON('package.json')读取到的JSON，而且已经转换为JS对象。依照前面package.json的演示样例，这段代码会在写入文件时被替换为"my-project-name"。
- 事实上从这里就能够看出在grunt的配置中，我们能够利用JS对象和JSON来做辅助的配置。
- <%= grunt.template.today("yyyy-mm-dd") %>
- 这是利用了个grunt的方法，能够执行任务的时间而且指定生成的格式。
执行这个concat任务时，我的app.debug.js的头部会有下面一段凝视：
/*
!
* my-project-name - JS for Debug
* @licence my-project-name - v0.1.0 (2014-07-07)
* http://blog.csdn.net/jennieji | Licence: MIT
*/
而在文件路径的写法上，则能够用一些匹配的符号。如我这里用了一个星号"*.js"表示随意名称的JS文件，两个星号"**"表示当前文件夹或者子文件夹下。所以这里"js/app/"文件夹下及其全部子文件夹下的JS文件都会被合并到app.debug.js的文件里。
配置完后，还要记得加载插件和注冊你这个任务，否则会报错！
加载插件就是把插件NPM包的名字"grunt-contrib-concat"传给grunt.loadNpmTasks方法。
注冊任务呢，则是用grunt.registerTask方法。第一个參数为注冊的任务队列的名称，写为"default"则成为这个 Gruntfile的默认任务队列。第二个參数就是这个任务队列要运行的任务名称的数组，这里的任务名称使用在initConfig配置时使用的名称， 即"concat"。改动代码例如以下：
//
加载要使用的插件
grunt.loadNpmTasks('grunt-contrib-concat');
//
注冊任务
grunt.registerTask('default', ['concat']);
假设这样写，那配置完后直接输入下面命令到命令行便能够运行一次JS的合并：
grunt
假设将"default"改为其它名字，比方"debug"，那么命令行须要输入：
grunt debug
增加Uglify压缩JS也做类似的配置。注意的是这边源文件和目标文件的配置写法不一样。是在files參数里以“目标文件路径：[源文件路径1,源文件路径2,...]”的格式来写。
压缩js示例：
// 项目配置
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
uglify: {
options: {
banner: '/*! <%= pkg.file %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
},
build: {
src: 'src/<%=pkg.file %>.js',
dest: 'dest/<%= pkg.file %>.min.js'
}
}
});
// 加载提供"uglify"任务的插件
grunt.loadNpmTasks('grunt-contrib-uglify');
// 默认任务
grunt.registerTask('default', ['uglify']);
}