30分钟学会使用grunt打包前端代码(二)

30分钟学会使用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文件给压缩了合并为一个文件
首先我们建立一个简单的程序，里面使用了zepto、backbone、underscore（事实上我并未使用什么）

在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

最后发现叶小钗三字，我就放心了，安全！！！！！！