Geek Answers Handbook

Concatenating and minimizing RequireJS with Grunt

I have a project written in CoffeeScript that uses AngularJS. My dependent providers are installed using Bower, and my file structure is as follows:

- assets - js - app - model - *.coffee - factory - *.coffee ... - app.coffee - config.coffee - routes.cofeee - vendor - angular - lodash ... - dist

I am trying to do the following:

  • I am trying to figure out how I can use RequireJS r.js to optimize my application files so that I essentially get a concatenated file, all ordered are nice (so the vendor dependencies, my configuration and routes, as well as my application files).
  • Integrate this into my grunt file.

I tried using the r.js optimizer, but maybe I'm too stupid, because all he thinks is to copy application files (minus vendor dependencies) to the dist folder; however, it optimizes the coffee files generated by js .

Does anyone have any experience with this?

+7
source share
2 answers

I realized: r.js works by reading your mainConfigFile and any modules that you name in your configuration, it is important to note that r.js looks only at the first require / define in your named modules and goes to look for them; therefore, for example, I had one module named app :

 require ['config'], (cfg) -> require ['angular'], (A) -> A.module cfg.ngApp, [] require ['routes'], () -> require [ 'factory/a-factory', 'service/a-service', 'controller/a-controller' ], () -> A.bootstrap document, [cfg.ngApp]

The problem was that r.js never passed the first require statement, and so concatenation didn't work. When I changed this, say (my app.coffee ):

 require ['config'], (cfg) -> require ['angular'], (A) -> A.module cfg.ngApp, [] require ['bootstrap'], (bootstrap) -> bootstrap()

And my bootstrap.coffee :

 define [ 'config', 'angular', 'routes', 'factory/a-factory', 'service/a-service', 'controller/a-controller' ], (cfg, A, routes) -> class Bootstrap constructor: () -> routes() A.bootstrap document, [cfg.ngApp]

This meant that I needed to define angular and bootstrap in my r.js configuration as includes , and then r.js would do the rest, for example:

 baseUrl: 'assets/js/app', mainConfigFile: 'assets/js/app/config.js', name: 'app', include: [ '../vendor/requirejs/require', 'bootstrap' ], out: 'assets/js/dist/app.js'

And now everything works fine! ~~ Shame that I should tell r.js to include requirejs , although maybe I did something stupid there? ~~

Blimey, I'm such a false emblem!

So, in my HTML, I loaded my concatenated script as:

 <script src="assets/js/dist/app.js"></script>

When it really should be loaded as follows:

 <script src="assets/js/vendor/requirejs/require.js" data-main="assets/js/dist/app"></script>

D'o!

+11
source

From r.js doc file

https://github.com/jrburke/r.js/blob/master/build/example.build.js#L322

Nested dependencies may be related in requireJS> v1.0.3

 //Finds require() dependencies inside a require() or define call. By default //this value is false, because those resources should be considered dynamic/runtime //calls. However, for some optimization scenarios, it is desirable to //include them in the build. //Introduced in 1.0.3. Previous versions incorrectly found the nested calls //by default. findNestedDependencies: false,
+1
source

More articles:


All Articles