Requirejs Multi-page, multi-JS packaging code, REQUIREJS Multi-Pack "collection"

This code comes from

Http://stackoverflow.com/questions/20583812/grunt-requirejs-optimizer-for-a-multi-app-project

I used Requirejs and r.js to pack the demo,

Demo you know, 1 pages more than 10 js ...

The plan is to package the company's projects

Because in general, most projects are multi-page very few items are single-page applications

and r.js default package support two cases

1 All JS files packaged into 1 files

2 on the basis of 1 can be used to block JS according to modules, supporting multiple modules in 1 JS files

But all are finally attributed to 1 JS files ...

But this is not what I want, I would like a page related to the JS package into a JS file, each page has its own JS file package

The method is simple based on Grunt+grunt-contrib-requirejs

The specific configuration here Https://github.com/qqqzhch/webfans/blob/master/Gruntfile.js

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37

// 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‘         }     }; }); //

By observing we can find that the configuration and r.js Build.js are consistent and then stored in the object according to the file name,

The configuration of the pair and the grunt is much simpler.

?

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‘]);

The operation results are as follows

After observing each of the packaged JS files, found that depending on the packaging, really strong, so that each page JS plug-in number just to meet the needs of this page, so that each page code is the least, visible more to more packaging or very good