How can to get all srcs for my js file from index.html?

Question

I am using the following configuration to uglify all my JS files into one file. This cause some problem with the ordering (I need to follow the order of the js files from index.html instead).

I would like to know:

• How can to get all srcs for my js files from index.html (with order as appear in the html)?
• How to replace all js file in index.html with a unique reference to 'build.js'?

---

  uglify : {
      yourTask : {
        src : 'src/**/*.js',
        dest : 'build.js'
      }
    }

Answer 1

I don't think uglify comes with anything built-in that will make this easier for you. Your only option without adding another grunt plugin would be to manually insert them into the files array in the order that you want them joined.

I would suggest using usemin , which is a grunt plugin by yeoman that will first concat css and/or js files, and then minify them. It's also extendable so that you could add additional steps such as ngAnnotate.

Here's an example usage:

<!-- build:js js/components-optimized.js -->

<!-- angularjs scripts -->
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-ui-router/release/angular-ui-router.js"></script>
<script src="bower_components/angular-touch/angular-touch.js"></script>
<script src="bower_components/angular-sanitize/angular-sanitize.js"></script>
<script src="bower_components/angular-resource/angular-resource.js"></script>
<script src="bower_components/ngstorage/ngStorage.js"></script>        
<script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.js"></script>
<script src="bower_components/angular-file-upload/angular-file-upload.js"></script>
<!-- endbuild -->

that tells the usemin task to build all of the scripts within the two comments into a single components-optimized.js file using the js flow process and tells it where to store the file. the "build" portion can be customized to perform any other task, such as concatenate, uglify, ngannotate, cssmin, or anything else you could think of that would need to be ran on each of the files, or on the concatenated file.

Here's my config:

    useminPrepare: {
        html: 'build/index.html',
        options: {
            root: 'build',
            dest: 'build',
            flow: {
                steps: {
                    js: ['concat', 'uglifyjs'],// ngAnnotate can be added here for example
                    css: [ 'concat', 'cssmin' ]
                },
                post: {
                    js: [{
                        name: 'uglify',
                        createConfig: function (context) {
                            context.options.generated.options = {preserveComments: 'some'};
                        }
                    }]
                }
            }
        }
    },