grunt usemin-concat + uglify sourcemap

Question

我正在尝试最小化我的js和css文件，但是我对源映射文件有问题。

我的应用程序是一个angularjs应用程序，在usemin之前，我需要生成有角度的templates.js文件并连接所有js文件。

我的index.html是

  <!-- 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 -->

现在concat任务正在串联我的源文件

 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'
            }
    },

和sourcemap（app.concat.js.map）文件已正确生成。

生成的源映射是uglify：generated任务的输入

uglify:{
            generated:{
                options:{

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

                }
            }
        },

最后这是grunt的registeredTask

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

该任务运行正确，无论如何，Chrome开发者工具不允许我在所需的位置设置brekpoints

根据此处ngtemplates任务的要求

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

Answer 1

uglify:{
        generated:{
            options:{

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

            }
        }
    },

这将不起作用，因为它将忽略“生成的”选项中的任何内容。

尝试将其重命名为“ gruntisdead”或其他名称。但是，“生成的”任务可能会在任何情况下运行并重写您的输出。因此，为避免这种情况，请停止使用grunt并转到gulp，webpack或更现代的东西