Optimize RequireJS front-end application

Question

I am learning to use r.js to optimize/minify/uglify a front-end app. So far it is really cool and promising, but I am trying to figure out how to do one thing. I want to able to concatenate all the files (js,css,html) in a directory into one optimized file that I can put in a script tag on the front-end.

So far I have only succeeded in putting only the JS files listed in my requirejs.config file into one optimized file.

But I am wondering if there is a way to concatenate more files than just those listed in the requirejs.config file - here is my requirejs.config file for reference:

requirejs.config({
    enforceDefine: false,
    waitSeconds: 8,
    baseUrl: '/static',
    paths: {
        'async': 'vendor/async',
        'jquery': 'vendor/jquery',
        'ejs': 'vendor/ejs',
        'text': 'vendor/text',
        'form2js': 'vendor/form2js',
        'underscore': 'vendor/underscore',
        'ijson':'vendor/idempotent-json',
        'backbone': 'vendor/backbone',
        'bootstrap': 'vendor/bootstrap',
        'handlebars': 'vendor/handlebars',
        'backbone-validation': 'vendor/backbone-validation-amd'
        //'socketio': 'https://cdn.socket.io/socket.io-1.3.5'
    },

    'shim': {
        'underscore': {
            'exports': '_'
        },
        'backbone': {
            'deps': ['jquery', 'underscore'],
            'exports': 'Backbone'
        },
        'handlebars': {
            'exports': 'Handlebars'
        },
        ejs: {
            exports: "ejs"
        }
    }
});

my build.js file looks like so:

({
    "baseUrl": "./public/static",
    "name": "app/js/main",
    "mainConfigFile": "./public/static/app/js/main.js",
    "out": "./public/static/app/js/optimized.js"
})

the other build.js file that I tried looks like this:

({
    "baseUrl": "./public/static",
    "dir": "./js-built",
    "mainConfigFile": "./public/static/app/js/main.js",
    //"optimize": 'none',

    "modules": [
        {
            name: "app/js/main",

            include: [
                "text"
            ],

            excludeShallow: [

            ]
        }


    ],
})

like I said, the first version of the build.js file concatenates all the JS files listed inside requirejs.config into one file (in my case, optimized.js). The second version of the build.js file copies the entire directory and minifies all the files, but leaves the directory structure as is.

What I want to do is combine the first and the second. Minify all the files in the directory, but concatenate them all into one file somehow.

Is this possible?

My one guess on how to do this is to simply list ALL the files I want to concatenate inside my requirejs.config and then use the first build.js file that I mentioned. Is this correct?

Answer 1

No, you can't combine both scripts given that in the first one you're just optimizing one file (that's why the optimization is creating a single file : the 'out' parameter) and in the second one you're optimizing a whole directory (that's why you're using the 'dir' parameter to copy all the optimized resources). Actually, using both 'dir' and 'out' parameters in the same script should produce an error when you launch the optimization. With the second script use you'll have the main.js optimized in the js-built directory, why aren't you using just that one ?

Also those parameters could be useful to you in your script : optimizeCss: 'standard' (uglify css files), removeCombined: true (remove files that have been included in others during the optimization)

Have a look at this website for more info.