Requirejs r.js optimization

I am developing an app using requirejs. The app uses the Page client routing framework . Actually it's a single page application using hash tag router.The application structure is like this

index.html
----app
--------global
--------modules
--------router
--------config.js
--------main.js
----vendor
----bower_compenents
----images
----css

The index will load the main.js file which will load the config and router. The main.js will look like this.

requirejs(['./config'], function (config) {
    "use strict";

    require(['router/router']);

},function(err){
    console.log(err);
});

The router.js will load the controllers and other modules using the hash tag.

My doubt is how to build the app using the r.js? I don't want include anything from the bower_compenents and vendor folder which holds frameworks like jquery, underscore and so on. Only need to include the files from the app folder.

and this is my config file

requirejs.config({
    waitSeconds: 0,
    paths: {
        async: '../bower_components/requirejs-plugins/src/async',
        map: 'https://maps.googleapis.com/maps/api/js?v=3.exp',
        linkedin : '//platform.linkedin.com/in.js?async=true',
        gapi: 'https://apis.google.com/js/client:platform',
        facebook: '//connect.facebook.net/en_US/sdk', 
        jquery: '../bower_components/jquery/dist/jquery.min',
        jqueryui: '../bower_components/jquery-ui/jquery-ui.min',
        cookie:'../vendor/jquery.cookie',
        page: '../bower_components/page/page',
        polyglot: '../vendor/jquery.polyglot.language.switcher',
        bootstrap : '../bower_components/bootstrap/dist/js/bootstrap.min',
        text : '../bower_components/requirejs-text/text',
        validate : '../bower_components/jquery-validation/dist/jquery.validate',
        datatables : '../vendor/jquery.dataTables.min',
        dataresp : '../vendor/dataTables.responsive.min',
        typeahead : '../bower_components/typeahead.js/dist/typeahead.bundle',
        underscore : '../bower_components/underscore/underscore-min',
        camera : '../vendor/camera',
        qs: '../vendor/qs',
        sweetAlert : '../bower_components/sweetalert/dist/sweetalert.min',
        colorbox : '../bower_components/jquery-colorbox/jquery.colorbox-min'
    },
    shim: {
        'polyglot': {
            exports: 'polyglot',
            "deps" : ['jquery']
        },
        'map': {
            exports: 'map'
        },
        'facebook' : {
            exports: 'FB'
        },
        'linkedin' : {
            exports: 'IN'
        },
        'gapi':{
            exports :'gapi'
        },
        'cookie': {
            "deps" : ['jquery']
        },
        'datatables':{
            "deps" : ['jquery']
        },
        'dataresp' :{
            "deps" : ['jquery' , 'datatables']
        },
        'bootstrap':{
            "deps" : ['jquery']
        },
        'validate':{
            "deps" : ['jquery']
        },
        'underscore': {
            exports : '_'
        },     
        'camera':{
            exports: 'camera',
            "deps" : ['jquery', 'jqueryui']
        },
        'colorbox' : {
            exports : 'colorbox',
            "deps" : ['jquery']
        }

    }
});

Solution

There is full r.js example build file acn be found here. Actually you could do this by two ways. One is compressing all the js and html file into one . This is the common r.js way of compressing where the requests to the server will be reduced.

Other way is to minify each file without joining the whole file. In this the number of requests will not be reduced but the size of the file will be reduced.

For fist case you could try

    ({
   mainConfigFile : "app/config.js",
    baseUrl: "./app",
    out: "../build/app/main.js",

    optimizeCss : "none",
    optimize: "uglify2",
    name: 'main',
    removeCombined: true,
    findNestedDependencies: true,
})

for the second one you could use

({
    appDir: "./",
    baseUrl: "app",
    dir: "../../build",
    modules: [
        {
            name: "main"
        }
    ],
})

It's better to use gulp for what you need. create a task in gulp and copy only needed files to other folder and use the second method to build the application. In that way , the other files will not be optimized.