Upload js files - merge them all

I am using Backbone / Marrionette and AMD Require.js

My goal is to speed up the loading time of the web application by combining all the files. The fewer files I have to download, the higher the download speed.

So I achieved the goal of combining the files in the / lib folder. These files are jQuery, underscore, backbone ... just a regular lib folder. After concatenation, I get the main.js file, which contains all the files. And it works, however I cannot concatenate my application files. I use r.js to complete the task

Here is the folder structure of the application:

  • CSS
  • IMG
  • Js

    • (most files are here)
    • collections
    • Models
    • the regions
    • routers
    • Lib
    • Controllers

    app.js config.js main.js

This is the build file that I use for the specified structure:

appDir: './',
baseUrl: './js',
dir: './dist',
modules: [
    {
        name: 'main'
    }
],
fileExclusionRegExp: /^(r|build)\.js$/,
optimizeCss: 'standard',
removeCombined: true,
paths: {
    underscore        : 'lib/underscore',
    backbone        : 'lib/backbone',
    babysitter  : 'lib/backbone.babysitter',
    wreqr       : 'lib/backbone.wreqr',
    marionette        : 'lib/backbone.marionette',
    handlebars  : 'lib/handlebars',
    jquery                : 'lib/jquery',
    jqueryui        : 'lib/jqueryui',
    text        : 'lib/text',
    templates   : '../templates'
},
shim: {
    underscore: {
        exports: '_'
    },
    backbone: {
        exports: 'Backbone',
        deps: ['jquery', 'underscore']
    },
    jqueryui: {
        exports: '$',
        deps: ['jquery']
    },
    babysitter: {
        exports: 'Backbone.Babysitter',
        deps: ['backbone']
    },
    wreqr: {
        exports: 'Backbone.Wreqr',
        deps: ['backbone']
    },
    marionette: {
        exports: 'Backbone.Marionette',
        deps: [
            'backbone',
            'babysitter',
            'wreqr',
            'lib/json2'
        ]
    },
    handlebars: {
        exports: 'Handlebars'
    },

    'lib/marionette.handlebars': {
        exports: 'Marionette.Handlebars',
        deps: ['handlebars', 'marionette']
    },
    'lib/foundation': {
        exports: '$',
        deps: ['jquery']
    },
    'lib/foundation.orbit': {
        exports: '$',
        deps: ['lib/foundation']
    },
    'lib/foundation.reveal': {
        exports: '$',
        deps: ['lib/foundation']
    },
    'lib/foundation.dropdown': {
        exports: '$',
        deps: ['lib/foundation']
    }
},
deps: ['jquery', 'underscore']

This is the app.js file:

define([
'marionette',
'lib/marionette.handlebars',
'wreqr',
'routers/router',
'views/header_view',
'views/footer_view',
'lib/foundation',
'lib/foundation.dropdown',
'lib/foundation.orbit',
'lib/foundation.reveal',
'controllers/format_controller'
], function(
Marionette, 
MarionetteHandlebars, 
Wreqr, 
Router, 
HeaderView, 
FooterView,
Foundation,
Dropdown,
Orbit,
Reveal,
FormatController
)
{
var App = new Marionette.Application();

App.addRegions({
    header  : '#header',
    main    : '#main',
    footer  : '#footer'
});

App.addInitializer(function(config) {          
    $.ajaxPrefilter( function( options, originalOptions, jqXHR ) {
        options.xhrFields = {
            withCredentials: true
        };
    });
    // Make the application config available via request/response.
    this.reqres.setHandler('config', _.bind(function() {
        return config;
    }, this));
    // Make the application session available via request/response.
    this.reqres.setHandler('session', _.bind(function() {
        return null;
    }, this));
});
App.addInitializer(function(config) {
    App.request = new Wreqr.RequestResponse();          
    new Router({vent: App.vent, reqres: App.reqres});
    Backbone.history.start();
});
// Initialize any utilities that will be available through vent or reqres.
App.addInitializer(function(config) {
    // String formatter for dates, etc.
    new FormatController({vent: App.vent, reqres: App.reqres});
})

App.vent.on('app:main:show', function(view, isLoggedIn) {
    App.header.close();
    App.main.close();
    App.footer.close();

    var totalRegionsShown = (isLoggedIn) ? 3 : 1;

    var initFoundation = _.after(totalRegionsShown, function() {
        $(document).foundation();
    });

    if (isLoggedIn) {
        var headerView = new HeaderView({
                reqres: view.reqres
        });
        headerView.on('show', _.bind(initFoundation, this));
        App.header.show(headerView);

        var footerView = new FooterView();
        footerView.on('show', _.bind(initFoundation, this));
        App.footer.show(footerView);
    }

    view.on('show', _.bind(initFoundation, this));
    App.main.show(view);
});
return App;

And finally, this is my main.js file:

require.config({
baseURL: '.',
urlArgs: "ver=2", //Control Client Cache. Change this value for every new release.
paths: {
    underscore    : 'lib/underscore',
    backbone      : 'lib/backbone',
    babysitter    : 'lib/backbone.babysitter',
    wreqr         : 'lib/backbone.wreqr',
    marionette    : 'lib/backbone.marionette',
    handlebars    : 'lib/handlebars',
    jquery        : 'lib/jquery',
    jqueryui      : 'lib/jqueryui',
    text          : 'lib/text',
    templates     : '../templates'
},
waitSeconds: 60,
shim: {
    underscore: {
        exports: '_'
    },
    backbone: {
        exports: 'Backbone',
        deps: ['jquery', 'underscore']
    },
    jqueryui: {
        exports: '$',
        deps: ['jquery']
    },
    babysitter: {
        exports: 'Backbone.Babysitter',
        deps: ['backbone']
    },
    wreqr: {
        exports: 'Backbone.Wreqr',
        deps: ['backbone']
    },
    marionette: {
        exports: 'Backbone.Marionette',
        deps: [
            'backbone',
            'babysitter',
            'wreqr',
            'lib/json2'
        ]
    },
    handlebars: {
        exports: 'Handlebars'
    },
    'lib/marionette.handlebars': {
        exports: 'Marionette.Handlebars',
        deps: ['handlebars', 'marionette']
    },
    'lib/foundation': {
        exports: '$',
        deps: ['jquery']
    },
    'lib/foundation.orbit': {
        exports: '$',
        deps: ['lib/foundation']
    },
    'lib/foundation.reveal': {
        exports: '$',
        deps: ['lib/foundation']
    },
    'lib/foundation.dropdown': {
        exports: '$',
        deps: ['lib/foundation']
    }
 },
deps: ['jquery', 'underscore']
});

require(['app', 'backbone', 'config'], function(App, Backbone, Config) {

var runEnvironment = "stg";
console.log(Config[runEnvironment]);

console.log("Running environment is: "  + runEnvironment);
App.start(Config[runEnvironment]);
});

, , , ?

, build.js lib . 15 java. , , , ... .

+3
1
0

All Articles