compressing javascript minified files in single file

Question

I am developing single file application with angularjs. I have multiple modules and so I have so many javascript files. I am using YUIcompressor to minify javascript files. And I am referencing files to index.html file.

<script src="js/app.main.min.js"></script>
<script src="js/app.settings.min.js"></script>
<script src="js/app.main.states.min.js"></script>
<script src="js/directives/attribute.min.js"></script>
.....
....
...
.

When I change a js file YUIcompressor is updating min.js file.

I want to create a single minified file like this: app.min.js CDN references are working like this. For example Google Maps, Jquery, angular and so on. We are referencing only one link to our web pages.

Haven't used YUICompressor but a large part of the angular community (meet us in the IRC, but not now it's dead in there) use gulp or grunt to manage the builds. For any easy way to get started with these you can check out the yeoman generators for angular gulp or grunt based projects and can copy the gulpfile.js or Gruntfile.js accordingly. These build systems and the configs in those generators are setup for concatenation (combining the files into one) and minification along with running tests doing CDN replacements, turning templates into JS so they can be loaded up front as well etc. — shaunhusain, Jan 26 '15 at 07:45

score 0 · Answer 1 · edited May 23 '17 at 11:57

You should do this as part of your build process (as well as minifying), you can for example use the tools provided by the OS, so for example type on Windows, or cat on Unices.

Using JavaScript build tools is another option, for example the already mentioned grunt.

If by any chance, you are using Maven as your build tool, there is the YUI Compressor module, which provides minification and aggregation too. For further details, please take a look at this question.

compressing javascript minified files in single file

1 Answers1