grunt usemin - concat + uglify sourcemap

389 Views Asked by At

I'm trying to minify my js and css files but i have a problem with source map files.

My app is an angularjs app and before the usemin i need to generate the angular templates.js files and concatenate all js files.

my index.html is

  <!-- build:js  js/vendor.min.js -->
    <script src="../vendor/jquery/dist/jquery.min.js"></script>
    <script src="../vendor/underscore/underscore-min.js"></script>
    <script src="../vendor/bootstrap/dist/js/bootstrap.min.js"></script>
    <script src="../vendor/es5-shim/es5-shim.min.js"></script>
    <script src="../vendor/json3/lib/json3.min.js"></script>
    <script src="../vendor/http/http.min.js"></script>
    <script src="../vendor/fs/dist/fs.min.js"></script>
    <script src="../vendor/parse/parse.min.js"></script>
    <script src="../vendor/event/dist/js/event.min.js"></script>
    <script src="../vendor/angular/angular.min.js"></script>
<!-- endbuild -->

<!-- build:js  js/app.min.js -->
    <script src="../.tmp/concat/app.concat.js"></script>
<!-- endbuild -->

Now the concat task is concatenating my source files

 concat: {
            options:{
                sourceMap:true
            },
            js: {
                src: [
                    '<%= config.src %>/**/module/**/*.js',
                    '<%= config.src %>/**/svcs/**/*.js',
                    '<%= config.src %>/**/ctrls/**/*.js',
                    '<%= config.src %>/**/dirs/**/*.js',
                    '<%= config.src %>/**/filters/**/*.js',
                    '<%= config.src %>/**/model/**/*.js',
                    '<%= config.src %>/**/prvdrs/**/*.js',
                    '<%= config.tmp %>/concat/app.templates.js'
                ],
                dest: '<%= config.tmp %>/concat/app.concat.js'
            }
    },

and the sourcemap (app.concat.js.map) file is correctly generated.

The generated sourcemap is input of the uglify:generated task

uglify:{
            generated:{
                options:{

                    sourceMap:{
                        includeSources: true
                    },
                    sourceMapIn:'.tmp/concat/app.concat.js.map'

                }
            }
        },

finally this is the registeredTask for grunt

grunt.registerTask('build',[
        'ngtemplates:app',
        'concat:js',
        'copy_assets',
        'less:dev',
        'useminPrepare',
        'concat:generated',
        'uglify:generated',
        'cssmin',
        'usemin'
    ]);

The task is runned correctly, anyway the Chrome developer tool doesn't allow me to set brekpoints where I want

as requested here the ngtemplates task

ngtemplates: {
            app:        {
                cwd: '<%= config.src %>',
                src: ['**/*.html','!<%= config.src %>/templates/*.html'],
                dest: '<%= config.tmp %>/js/app.templates.js'
            }
        },
1

There are 1 best solutions below

0
Alexey Sh. On
uglify:{
        generated:{
            options:{

                sourceMap:{
                    includeSources: true
                },
                sourceMapIn:'.tmp/concat/app.concat.js.map'

            }
        }
    },

this won't work because it will ignore anything within "generated" options.

try to rename it to "gruntisdead" or something else. however the "generated" task may run anycase and rewrite your output. so to avoid it just stop use grunt and go to gulp, webpack or something more modern