|
以现在前端js激增的态势，一个项目下来几十个js文件轻轻松松 但是grunt的出现却让这些事情变得优雅起来！ grunt是一套前端自动化工具，一个基于nodeJs的命令行工具，一般用于： 对于其他用法，我还不太清楚，我们这里简单介绍下grunt的压缩、合并文件 初学，有误请包涵 准备阶段1、nodeJs环境因为grunt是基于nodeJs的，所以首先各位需要安装nodeJS环境，这块我们便不管了 2、安装grunt有了nodeJs环境后，我们便可以开始搞grunt了，因为我们可能在任何目录下运行打包程序，所以我们需要安装CLI npm install -g grunt-cli这条命令将会把grunt命令植入系统路径，这样就能在任意目录运行他，原因是 每次运行grunt时，它都会使用node的require查找本地是否安装grunt，如果找到CLI便加载这个本地grunt库 实例学习：打包zepto一些东西说多了都是泪，直接先上实例吧，实例结束后再说其它的 ① package.json { "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-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" } } ② Gruntfile.js完了我们需要在grunt目录下执行 npm install将相关的文件下载下来： $ cd d:
$ cd grunt
然后我们的目录就会多一点东西：
多了很多东西，先别管事干什么的，我们后面都会用到，这个时候在目录下新建src文件夹，并且搞一个zepto进去
然后在Gruntfile中新增以下代码（先别管，增加再说） module.exports = function (grunt) { // 项目配置 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']); } 然后运行 grunt命令后 grunt
嗯嗯，多了一个文件，并且是压缩的，不差！！！第一步结束 认识Gruntdile与package.json不出意外，每一个gurnt都会需要这两个文件，并且很可能就只有这两个文件（复杂的情况有所不同） package.json这个文件用来存储npm模块的依赖项（比如我们的打包若是依赖requireJS的插件，这里就需要配置） Gruntfile这个文件尤其关键，他一般干两件事情： Gruntfile一般由四个部分组成 module.exports = function (grunt) { //你的代码 } 这个不用知道为什么，直接将代码放入即可 ② 项目/任务配置 pkg: grunt.file.readJSON('package.json')这里的 grunt.file.readJSON就会将我们的配置文件读出，并且转换为json对象 然后我们在后面的地方就可以采用pkg.XXX的方式访问其中的数据了 uglify是一个插件的，我们在package依赖项进行了配置，这个时候我们为系统配置了一个任务 ① 在src中找到zepto进行压缩（具体名字在package中找到） 这个任务配置其实就是一个方法接口调用，按照规范来就好，暂时不予关注，内幕后期来 grunt.loadNpmTasks('grunt-contrib-uglify');用于加载相关插件 最后注册一个自定义任务（其实也是默认任务），所以我们下面的命令行是等效的： grunt == grunt uglify 至此，我们就简单解析了一番grunt的整个操作，下面来合并文件的例子 合并文件合并文件依赖于grunt-contrib-concat插件，所以我们的package依赖项要新增一项 "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
所以我们这里换个做法，先压缩再合并，其实unglify已经干了这些事情了 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']); } 所以，我们就暂时不去关注concat了 最后，今天时间不早了，我们最后研究下grunt配合require于是便结束今天的学习吧 合并requireJS管理的文件有了前面基础后，我们来干一件平时很头疼的事情，便是将require管理的所有js文件给压缩了合并为一个文件
在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该怎么干呢？？？ 我们这里使用自定义任务方法来做，因为我们好像没有介绍他 要使用requireJS相关需要插件 grunt.loadNpmTasks('grunt-contrib-requirejs');因为我们以后可能存在配置文件存在各个项目文件的情况，所以我们这里将requireJs相关的配置放入gruntCfg.json中 这样我们的package.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" } } 我们这里设置的require相关的grunt配置文件如下（gruntCfg.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 native包与HTML5包在HTML5嵌入webview的时代，我们当然存在一次打包既要形成网站文件也要形成app文件 6 分频道打包当然可能存在分频道分分支打包的情况 今日到此为止，待续...... |
|
|
