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.
Advertisements. RequireJS can be initialized by passing the main configuration in the HTML template through the data-main attribute. It is used by RequireJS to know which module to load in your application. For instance − <script data-main = "scripts/main" src = "scripts/require.js"></script>
RequireJS is a JavaScript file and module loader. It improves perceived page load times because it allows JavaScript to load in the background. In particular, it enables asynchronous JavaScript loading.
Generally you only use RequireJS in its loading form during development. Once the site is done and ready for deployment, you minify the code. The advantage here is RequireJS knows exactly what your dependencies are, and thus can easily minify the code in the correct order.
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.
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' } } }
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With