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


所以我们这里换个做法 , 先压缩再合并 , 其实已经干了这些事情了
module.exports = function (grunt) {// 项目配置grunt.initConfig({pkg: grunt.file.readJSON('package.json'),uglify: {"my_target": {"files": {'dest/libs.min.js': ['src/zepto.js', 'src/underscore.js', 'src/backbone.js']}}}});grunt.loadNpmTasks('grunt-contrib-uglify');// 默认任务grunt.registerTask('default', ['uglify']);}
所以 , 我们就暂时不去关注了
最后 , 今天时间不早了 , 我们最后研究下grunt配合于是便结束今天的学习吧
合并管理的文件
有了前面基础后 , 我们来干一件平时很头疼的事情 , 便是将管理的所有js文件给压缩了合并为一个文件
首先我们建立一个简单的程序 , 里面使用了zepto、、(事实上我并未使用什么)
在main.js中新增代码:
require.config({baseUrl: '',shim: {$: {exports: 'zepto'},_: {exports: '_'},B: {deps: ['_','$'],exports: 'Backbone'}},paths: {'$': 'src/zepto','_': 'src/underscore','B': 'src/backbone'}});requirejs(['B'], function (b) {});
这样的话运行会自动加载几个文件 , 我们现在希望将之合并为一个libs.js该怎么干呢???
我们这里使用自定义任务方法来做 , 因为我们好像没有介绍他
要使用相关需要插件
grunt.loadNpmTasks('grunt-contrib-requirejs');
因为我们以后可能存在配置文件存在各个项目文件的情况 , 所以我们这里将相关的配置放入.json中
这样我们的.json就没有什么实际意义了:
{"name": "demo","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"}}
我们这里设置的相关的grunt配置文件如下(.json):
{"requirejs": {"main": {"options": {"baseUrl": "","paths": {"$": "src/zepto","_": "src/underscore","B": "src/backbone","Test": "src/Test"},"web": {"include": ["$","_","B","Test"],"out": "dest/libs.js"}}}}}
这里我们要打包这些文件搞到dest的libs.js文件中 , 这个文件照做就行 , 最后核心代码如下:
module.exports = function (grunt) {grunt.loadNpmTasks('grunt-contrib-requirejs');//为了介绍自定义任务搞了一个这个grunt.registerTask('build', 'require demo', function () {//任务列表var tasks = ['requirejs'];//源码文件var srcDir = 'src';//目标文件var destDir = 'dest';//设置参数grunt.config.set('config', {srcDir: srcDir,destDir: destDir});//设置requireJs的信息var taskCfg = grunt.file.readJSON('gruntCfg.json');var options = taskCfg.requirejs.main.options,platformCfg = options.web,includes = platformCfg.include,paths = options.paths;var pos = -1;var requireTask = taskCfg.requirejs;options.path = paths;options.out = platformCfg.out;options.include = includes;//运行任务grunt.task.run(tasks);grunt.config.set("requirejs", requireTask);});}
搞完了运行就好:grunt build
grunt build
最后发现叶小钗三字 , 我就放心了 , 安全!!!!!!
下集预告 1 HTML文件打包 2 样式文件打包 3 移动打包文件
我们的开发版本与使用版本可能不在一个位置哦
4 分支处理
不同分支打包
5 包与HTML5包
在HTML5嵌入的时代 , 我们当然存在一次打包既要形成网站文件也要形成app文件