grunt concat js / css - node.js

Question

I have created a web site using backbone + requirejs + bootstrap on client side and php REST on server side. The site contains a lot of .js file. I use requirejs to load the .js when it is needed (to implement asynchronous loading).
However, I have start using Node.js + Yeoman + grunt + bower recently. I use Yeoman webapp generator to create the basic structure of my web again. When I build my web, it concat all the .js files into 1 single .js file and put the tag on the index.html to refer it.
From my understand the pros is that the whole .js is cached in client's browser. which is slow at first time visit, but fast on re-visit. Since everything is concat to 1 file and it is loaded to the client's browser, so I guess the asynchronous loading is not work in this case. (correct me if I wrong).
* the web site is created for both mobile and desktop. (1 src for 2 version)
Should I concat all .js files in 1 single file
OR should I use requirejs to require the .js when I need it (Asynchronous loading)?
How to config requirejs in Node. I have tried it in normal way (include the data-main in index.html, when I compile using grunt build. it give me error "... is no more support".
Is browserify similar to requirejs in Node?
I have spent a week to figure it out already but still no luck. Hope someone can point me to the right direction. Thanks a lot.
The .js file structure is something like this:
-app
-vendor
-jquery.js
-backbone.js
-assets
-js
-model
-person.js
-collection
-people.js
-router.js
-controller.js
-dist
-js
-build.js

Answer 1

i had familiar issues. So lets start with strategy of file concatenation. There are three major ways to follow:
first - always concat all modules in one file, in this case you loose on first start and may win or next starts, but you can face another issue - you use less then half of modules from concatenated file at a time, but always load all modules.
second way is to build specific concatenated file with specific module set for each type of page - so you know how many page type you have and build file for each - following this you can decrease size of file, but its hardly to maintain and need manual sets correction in case of page changes.
third - build 1 concatenated file with libs and modules which in use nearly on all pages, all other stuff (additional modules, views, special models and collection) load on demand. This way is good in case of SPA pages.
Let me say a few words about grunt + r.js configauration.
Keep this link for first times .
Here is the sample of config:
requirejs: {
compile: {
options: {
baseUrl: "path/to/base",
mainConfigFile: "path/to/config.js",
name: "path/to/almond",
out: "path/to/optimized.js"
}
}
}
Main point here mainConfigFile - it is a file then you keep require.config
Next step - configure r.js - keep this link its very helpfull as describe all possibilities of r.js.
Usually its quite enough to checkout these links.
Also you can checkout recommend file structure for multi page site to avoid issues in future.
Also here is a link to a similar post - you may find it usefull.
If you have any additional questions let me know.
And a few words about CSS - logic nearlly the same : you can build separate file for each page or create sinngle. The main point here is how large your site is. In my case i've choose second option, but to be honest first one is more scalable, especially in large projects

Answer 2

I can get the requirejs work with Backbone now. However, I cannot use Marionette with error something like "Backbone is undefined". I've install Marionette with this command "bower install marionette --save". I did some search on google, and someone said use the AMD version of Marionette should fix this issue and after replace Marionette with AMD version it is work.
But my question is how can I install the AMD version of Marionette using "bower install"?
My web use bootstrap. When I compile the web with "grunt build". it copy bootstrap's font from "app/bower_components/bootstrap/dist/fonts" to "dist/bower_components/bootstrap/dist/fonts" but the web is refer the font on "dist/fonts". How can I change it to refer to the right directory?
I use yo webapp (with bootstrap) to generate the structure of my web.