requirejs 多頁面，多js 打包代碼，requirejs多對多打包【收藏】

這段代碼來自

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

以前用 requirejs和r.js  也做過打包demo，

demo 大家懂得，1個頁面10多個js。。。。。。。。

這次計划給公司的項目打包

因為一般情況下，大部分項目都是多頁面很少有項目是單頁面應用程序

而 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

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

通過觀察我們可以發現，配置和r.js 的build.js 是一致的，然后按照文件名存貯到對象中，

對與和grunt的配置則簡單多了

//*****省略其他代碼
        requirejs: requirejsOptions


    });
    // Default task(s).
    grunt.registerTask('dev', [
        'compass:force',
        'connect:server',
        'watch'
    ]);
    grunt.registerTask('dist', [
        'compass:force'
    ]);
    grunt.registerTask('js', ['requirejs']);

運行結果如下

觀察每個打包后的js文件，發現根據依賴打包，果然強悍，做到了每個頁面js的插件數量剛好滿足這個頁面的需求，做到每個頁面的代碼都是最少的，可見多對多打包還是挺不錯的