How to exclude certain requireJS files from uglifying/optimizing

27
votes

I have a working requirejs project that is using grunt for building and deployment. If using no optimization at all, the build is working without problems and I get one big js file to deploy it on production.

The problem I have is, that I have some external frameworks (like angularJS) where I already have a minimized/optimized version of it and don't want to optimize it again.

Currently without optimization I include the minified version of this framework via a seperate path config in my gruntfile. Whereas in my normal main.js I have the non-minified version for development.

Now I want to use the optimizer to optimize my own code, but to NOT optimize the external frameworks. But the external frameworks should be included in the resulting big javascript file. Basically I want to tell the optimizer that he should use the original file in some cases.

Can I do it something like this?

I only have found a global exclude option, so that some modules are not included in the resulting optimized js at all.

This is my grunt configuration:

requirejs: {
            compile: {
                options: {
                    baseUrl: "<%= pkg.folders.jsSource %>",
                    name: "../external-libs/almond-0.1.1",
                    include: "main",
                    mainConfigFile: "<%= pkg.folders.jsSource %>/main.js",
                    out: "<%= pkg.folders.build + pkg.name + '-' + pkg.version %>/js/main.js",
                    //logLevel: 0,
                    optimize: "uglify2",
                    //optimize: "none",
                    paths: {
                        'angular':'../external-libs/min/angular-1.0.4',
                        'jquery':'../external-libs/min/jquery-1.7.2',
                        'jquery.mobile':'../external-libs/min/jquery.mobile-1.2.0',
                        'adapter': '../external-libs/min/jquery-mobile-angular-adapter-1.2.0',
                        'moment': '../external-libs/moment-1.6.2.min',
                        'iscroll': '../external-libs/min/iscroll-4.2.5',
                        'iscrollview': '../external-libs/min/jquery.mobile.iscrollview-1.2.6',
                        'add2Home': '../external-libs/min/add2home',
                        'config/config': "config/<%=configDatei%>"
                    }
                }
            }
        },

And this is the relevant part of the main.js: 

require.config({
        paths:{
            'angular':'../external-libs/angular-1.0.4',
            'jquery':'../external-libs/jquery-1.7.2',
            'jquery.mobile':'../external-libs/jquery.mobile-1.2.0',
            'adapter': '../external-libs/jquery-mobile-angular-adapter-1.2.0',
            'moment': '../external-libs/moment-1.6.2.min',
            'iscroll': '../external-libs/iscroll-4.2.5',
            'iscrollview': '../external-libs/jquery.mobile.iscrollview-1.2.6',
            'add2Home': '../external-libs/add2home'
        },
        shim:{
            'angular':{ deps:['jquery'], exports:'angular' },
            'iscroll':{ deps:['jquery'], exports:'iscroll' },
            'iscrollview':{ deps:['jquery.mobile', 'iscroll'], exports:'iscrollview' }
        }
    });

Thanks for any help.

2
requirejsrequiregruntjsuglifyjsuglifyjs2

2 Answers

19
votes

Just some suggestions use empty: to indicate NOT to include the module in the optimization.

In require.config will then indicate the usage of the min file.

requirejs: {
            compile: {
                options: {
                    {{ all other settings }}
                    paths: {
                        'angular':'empty:',
                    }
                }
            }
        },

   require.config:{  
              paths:{
              'angular':'../external-libs/min/angular-1.0.4',
        },
   }

Please note, that's "empty:" with a colon at the end, not "empty". If you omit the colon, you'll get an error like this:

"No such file or directory [...]/empty.js"

Hope this helps.

5
votes

I was having the same issue of the external libraries always being re-minified as the comments to the answer, and this is the method that I use to get around that. I have a two tasks, one for my code and one for the external libraries. It is really just copying files -- so just a copy task would work as well. I do also use the "empty:" keywork for the external libraries so that are not included in the minifications of my code.

requirejs: {
    options: {
        mainConfigFile: '...',
        fileExclusionRegExp '...common things to exclude...'
    },
    main: {
        options: {
            baseUrl: '.../js',
            dir: '.../js-built',
            fileExclusionRegExp: /^external$/,
            ... etc ...
        }
    },
    external: {
        options: {
            baseUrl: '.../js/external',
            dir: '.../js-built/external',
            optimize: 'none'
        }
    }
}