What are Frontend build tools
Web browsers download all the included script files before parsing and evaluating them. It is best to have the least number of includes and the smallest includes possible.
On the other hand, in order to develop between team members and keep organized, it is best to break separate code into separate files. Combining them all when getting ready for a release could be a tedious and error-prone process. This is something that Grunt.js excels at. Using the standard 'concat' task you can specify the files and order that you'd like them mashed together. Doing this from the start lets you use the samething in development that you'll release in production.
JS Folder | |- Views | | | |- AccountSummaryView.js | |- AccountView.js | |- AddAccountView.js | |- AddNewCameraView.js | |- ... | |- Models | | | |- Account.js | |- Bridge.js | |- Camera.js | |- .... | |- ...
This all becomes
JS Folder | |- backbone.views.js |- backbone.models.js |- ...
and then those become
JS Folder | |- backbone.combined.js
This strategy also makes it easy to stuff templates into the index.html page so they are already in the DOM and speed up selector time.
One of the problems with using the same file names is that the browser is cache the files. Some browser are more aggressive about caching then others. This is great for files that don't change but for your new concatenated file it is very frustrating. Thanksfully Grunt.js has a hashres module that will look at your index.html and push a file hash into the file name.
This is terrific because as files are combined and generated only truely unique files will bust the cache. Nginx is smart enough to filter out the hash in the filename and serve the correct file but the browser will think it new and different.
Watching for changes
All of this functionality would be ignored if you had to tab over to the console and re-run the grunt command over and over. Included with Grunt.js is the watch module that lets you define the file patterns that it should watch. When the files change it will automagically run the grunt tasks and you can safely forget about it.
There is a lot more to learn about Grunt.js, hopefully this has got you excited. Go dig in and try it out.