grunt基于NodeJS打包压缩JS和CSS( 二 ) _打包

对于的灵活配置，我们会在后面提到
这个文件尤其关键，他一般干两件事情：
① 读取信息
② 插件加载、注册任务，运行任务（grunt对外的接口全部写在这里面）
一般由四个部分组成
① 包装函数
这个包装函数没什么东西，意思就是我们所有的代码必须放到这个函数里面
module.exports = function (grunt) {//你的代码}
这个不用知道为什么，直接将代码放入即可
② 项目/任务配置
我们在一般第一个用到的就是方法配置依赖信息
pkg: grunt.file.readJSON('package.json')
这里的 grunt.file.就会将我们的配置文件读出，并且转换为json对象
然后我们在后面的地方就可以采用pkg.XXX的方式访问其中的数据了
值得注意的是这里使用的是模板引擎，所以你在这里可以写很多东西
是一个插件的，我们在依赖项进行了配置，这个时候我们为系统配置了一个任务
（压缩），他会干这几个事情：
① 在src中找到zepto进行压缩（具体名字在中找到）
② 找到dest目录，没有就新建，然后将压缩文件搞进去
③ 在上面加几个描述语言
这个任务配置其实就是一个方法接口调用，按照规范来就好，暂时不予关注，内幕后期来
这里只是定义了相关参数，但是并未加载实际函数，所以后面马上就有一句：
【grunt基于NodeJS打包压缩JS和CSS】grunt.loadNpmTasks('grunt-contrib-uglify');
用于加载相关插件
最后注册一个自定义任务（其实也是默认任务），所以我们下面的命令行是等效的：
grunt == grunt uglify
至此，我们就简单解析了一番grunt的整个操作，下面来合并文件的例子
合并文件
合并文件依赖于grunt--插件，所以我们的依赖项要新增一项
"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"},
然后再将代码写成这个样子
module.exports = function (grunt) {// 项目配置grunt.initConfig({pkg: grunt.file.readJSON('package.json'),concat: {options: {separator: ';'},dist: {src: ['src/zepto.js', 'src/underscore.js', 'src/backbone.js'],dest: 'dest/libs.js'}}});grunt.loadNpmTasks('grunt-contrib-concat');// 默认任务grunt.registerTask('default', ['concat']);}
运行后，神奇的一幕发生了：
三个文件被压缩成了一个，但是没有压缩，所以，我们这里再加一步操作，将之压缩后再合并
module.exports = function (grunt) {// 项目配置grunt.initConfig({pkg: grunt.file.readJSON('package.json'),concat: {options: {separator: ';'},dist: {src: ['src/zepto.js', 'src/underscore.js', 'src/backbone.js'],dest: 'dest/libs.js'}},uglify: {build: {src: 'dest/libs.js',dest: 'dest/libs.min.js'}}});grunt.loadNpmTasks('grunt-contrib-uglify');grunt.loadNpmTasks('grunt-contrib-concat');// 默认任务grunt.registerTask('default', ['concat', 'uglify']);}

文章插图
我这里的做法是先合并形成一个libs ，然后再将libs压缩成libs.min.js