Multiple script tags and concatenation + minimization + preprocessing

Question

I have an html file with several script tags (about 20). I decided to combine all the JS files into one, and then minimize the concatenated file. I use ant tasks to concatenate and do this to minimize. I know that I need to provide a non-concatenated / non-minified version for debugging purposes (also in dev env).

I was wondering how to achieve this. For example: the main.html file has 20 script tags, one of the ways I decided to do this is to use an HTML preprocessor and conditionally include script tags:

#ifdef perf <script src="main.min.js"></script> #else <script src="ctrl.js"></script> <script src="services.js"></script> <script src="directives.js"></script> <script src="model.js"></script> . . .PS <script src="file_no_20.js"></script> #endif 

main.min.js is a concatenated and minified file during the build process using ant.

Is there a better way to do this? What are the disadvantages of this approach?

Thank you, Chris. PS: Thinking of using http://fmpp.sourceforge.net/ for html preprocessing, any other suggestions are welcome.

Answer 1

Chrome supports a terrific feature called “source mapping,” which is perfect for this. I would advise you to read the manual here for more information:

http://www.html5rocks.com/en/tutorials/developertools/sourcemaps/

There are some caveats if you use AngularJS regarding minimization. From the docs:

Since angular determines the dependencies of the controller on the argument names of the controller constructor function, if you want to minimize the JavaScript code for the PhoneListCtrl controller, all its function arguments will also be reduced, and the dependency injector will be unable to correctly identify the services.

To overcome the problems caused by minimization, simply assign an array with the service identifier lines to the $ injection property of the controller function, as in the last line in the fragment (commented out):

 PhoneListCtrl.$inject = ['$scope', '$http']; 

There is also another way to specify this list of dependencies and avoid problems with minimization - using the bracket notation, which wraps the function that needs to be inserted into the string array (representing the dependency names), and then the function that needs to be entered:

 var PhoneListCtrl = ['$scope', '$http', function($scope, $http) { /* constructor body */ }]; 

Both of these methods work with any function that can be introduced using Angular, so before your project style guide you can decide which one you use.

http://docs.angularjs.org/tutorial/step_05

Answer 2

I suggest using tag libraries, something like http://java.sun.com/j2ee/tutorial/1_3-fcs/doc/JSPTags4.html#67771 , to accept this. Include your script as:

 <script:include src="myscript1.js" /> <script:include src="myscript2.js" /> <script:include src="myscript3.js" /> .. 

And use the page option for your system to decide whether to concatenate and minimize scripts. Something like below:

www.yourapp.com/app?debugMode=true

By default, scripts are combined and minimized. If you are a developer working on a project, just add a page parameter, for example debugMode = true. When debugMode is true, just visualize the scripts as they are.

There are many services on the market, such as http://developer.yahoo.com/yui/compressor/ , that can be integrated with your project to do the job for you.

Do not compress scripts every time you load a page. Do it the first time and write it down so that you don’t have to do it every time. At any given time, to rebuild the last script file, just add another parameter, for example: rebuild = true so that all the latest files are minfied and cached. You can do the same with CSS too.