这段代码来自
http://stackoverflow.com/questions/20583812/grunt-requirejs-optimizer-for-a-multi-app-project
一般情况下，大部分项目都是多页面很少有项目是单页面应用程序
而 r.js 默认打包支持两种情况
1 所有js文件打包到1个文件
2 在1的基础上可以给js按照模块分组，支持多个模块在1个js文件中
BUT 都是最终归结为1个js文件。。。。。。
但是这不是我想要的，我就想要一个页面相关的js打包成一个js文件包，每个页面都有自己的js文件包
方法很简单 基于grunt+grunt-contrib-requirejs
具体配置在这里https://github.com/qqqzhch/webfans/blob/master/Gruntfile.js
module.exports = function(grunt) { // r.js 打包 准备 var files = grunt.file.expand('js/app/*/main.js'); //读取要打包的js入口 一般都为 main的js var requirejsOptions = {}; //用来存储 打包配置的对象 //遍历文件 files.forEach(function(file) { var filenamelist = file.split('/'); var num = filenamelist.length; var filename = filenamelist[num - 2]; //获取目录名称，因为这里的文件名都是main的js requirejsOptions[filename] = { options: { baseUrl: "js/", paths: { "text": 'lib/text', "jquery": 'lib/jquery', "backbone": 'lib/backbone', "underscore": 'lib/underscore', "Highcharts": 'lib/highcharts/highcharts', "select2": 'lib/select2/select2', "moment": 'lib/moment', "jquery-ui": 'lib/jquery-ui/jquery-ui', "jquery.cookie": 'lib/jquery.cookie', "validate": 'lib/jquery.validate', "metadata": 'lib/jquery.metadata', "jsplumb": "lib/jquery.jsPlumb", "qtip": 'lib/qtip/jquery.qtip', "nicescroll": "lib/jquery.nicescroll", "Htheme": 'lib/highcharts/theme', 'jquery.mousewheel': 'lib/jquery.mousewheel' }, optimizeAllPluginResources: true, name: 'app/' + filename + '/main', out: 'js/appbuild/' + filename + '/main.js' } }; }); // grunt.initConfig({ pkg: grunt.file.readJSON('package.json'), // requirejs: requirejsOptions connect: { //这里为插件子刷新方式 options: { port: 9000, hostname: 'localhost', //默认就是这个值，可配置为本机某个 IP，localhost 或域名 livereload: 35729 //声明给 watch 监听的端口 }, server: { options: { open: true, //自动打开网页 http:// base: [ '.' //主目录 ] } } }, watch: { sass: { files: ['sass/**/*.{scss,sass}', 'sass/_partials/**/*.{scss,sass}'], tasks: ['compass:dist'] }, livereload: { options: { livereload: '<%=connect.options.livereload%>' //监听前面声明的端口 35729 }, files: [ //下面文件的改变就会实时刷新网页 'app/*.html', 'stylesheets/{,*/}*.css', 'javascripts/{,*/}*.js', 'images/{,*/}*.{png,jpg}' ] } }, compass: { dist: { options: { config: 'config.rb' } } }, jst: { options: { amd: true, // define()的方法包裹生成的内容 namespace: false, // prettify: true, // 生成的内容在一行 templateSettings: { evaluate: /{%([\s\S]+?)%}/g, interpolate: /{{([\s\S]+?)}}/g, escape: /{%-([\s\S]+?)%}/g } }, // files: { // src: 'js/app/*/tpl/*.html', // dest: 'js/app/$1/tpljs/$2.js' // } files: { expand: true, // 开启构建动态文件对象 cwd: 'js/app/', // 模板目录（源文件） src: ['**/*.html'], // 能匹配到模板的二级目录 dest: 'js/app/', // 目标文件目录 rename: function(dest, src) { var path = require('path'); var filename = path.basename(src); var dirname = path.dirname(src); dirname = dirname.replace('tpl', 'tpljs') var finalPath = path.resolve(dest, dirname, 'js', filename); console.log(dirname); console.log(finalPath); return finalPath; }, ext: '.js' // 目标文件的后缀名 } }, jshint: { options: { curly: true, eqeqeq: false, eqnull: true, browser: true, es3: true, latedef: true, newcap: true, noarg: true, noempty: true, //quotmark: true, undef: true, strict: true, maxdepth: 3, maxstatements: 50, maxlen: 255, globals: { jQuery: true, $: true, require: true, define: true, Blueware: true, _: true, Backbone: true, ATM: true, console: true, }, }, files: { expand: true, // 开启构建动态文件对象 cwd: 'js/app/', // 模板目录（源文件） src: ['*/*.js'], // 能匹配到模板的二级目录 } } }); grunt.loadNpmTasks('grunt-contrib-compass'); grunt.loadNpmTasks('grunt-contrib-watch'); grunt.loadNpmTasks('grunt-contrib-connect'); grunt.registerTask('default', ['compass:dist', 'connect:server', 'watch']); };
通过观察我们可以发现，配置和r.js 的build.js 是一致的，然后按照文件名存贮到对象中，
对与和grunt的配置则简单多了
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
//*****省略其他代码
requirejs: requirejsOptions
});
// Default task(s).
grunt.registerTask(
'dev'
, [
'compass:force'
,
'connect:server'
,
'watch'
]);
grunt.registerTask(
'dist'
, [
'compass:force'
]);
grunt.registerTask(
'js'
, [
'requirejs'
]);
|
运行结果如下
观察每个打包后的js文件，发现根据依赖打包，果然强悍，做到了每个页面js的插件数量刚好满足这个页面的需求，做到每个页面的代码都是最少的，可见多对多打包还是挺不错的