如何使用我自己的选项配置concat和uglify与grunt-usemin

Question

For example: Im using the current configuration below to uglify my JS scripts in my Gruntfile:

    uglify: {
        options: {
            report: "min", //"gzip",
            sourceMap: true,
            preserveComments: false, //"some", "all"
        },
        application: {
            options: {
                // expand: true,
                banner: '<%= app.banner %>',
                preserveComments: "some"
            },
            src: 'dist/js/application.js',
            dest: ".tmp/js/application.min.js"
        },
        dependencies: {
            options: {
                sourceMap: false
            },
            src: ['dist/js/dependencies.js'],
            dest: ".tmp/js/dependencies.min.js"
        },

Im aware that grunt-usemin generates the src and dest options from the code block in the html file declared in useminPrepare gruntfile option, for example:

    <!-- build:js js/app.js -->
    <script src="js/app.js"></script>
    <script src="js/controllers/thing-controller.js"></script>
    <script src="js/models/thing-model.js"></script>
    <script src="js/views/thing-view.js"></script>
    <!-- endbuild -->

So how can I configure grunt-usemin to use these same options, such as banner , sourceMap: false with the generated file blocks, I've read through the quick documentation usually given in github or NPM registry but seem not to find a solid answer to this.

Answer 1

One sentence is very important in the documentation :

In addition, useminPrepare dynamically generates the configuration for concat, uglify, and cssmin. Important: you still need to manually manage these dependencies and call each task.

The principle is to declare only that you want to use usemin (in the grunt register task) with all the main task you want : concat, uglify... Usemin will by default create all these tasks without anymore declaration, based on your registertask options and html markup comments.

Code is better than words :

1. Express your block markup target files . In your case something like :

  <!-- build:js js/app.min.js --> <script src="js/app.js"></script> <script src="js/controllers/thing-controller.js"></script> <script src="js/models/thing-model.js"></script> <script src="js/views/thing-view.js"></script> <!-- endbuild --> 

2 - Register the tasks that you want usemin generates for your during the runtime (it does not generate anything in your file - something that should be precised in the documentation). For example :

grunt.registerTask('minify', [ 'useminPrepare' ,'concat' ,'cssmin' ,'uglify' ,'copy'
,'rev ,'usemin' ])

3 - By default, all these tasks are generated except useminPrepare and usemin (look at the documentation for these 2 blocks grunt-usemin ).

Then if you want to add specific options like sourcemap, just rewrite the configuration code without redefining everything :

uglify: { options: { sourceMap: false } }

Hope it helps.