requirejs 多頁面，多js 打包代碼，requirejs多對多打包

這段代碼來自

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的插件數量恰好知足這個頁面的需求，作到每一個頁面的代碼都是最少的，可見多對多打包仍是挺不錯的