grunt usemin - concat + uglify 源映射

Question

我正在嘗試縮小我的 js 和 css 文件，但我的源映射文件有問題。

我的應用程序是一個angularjs應用程序，在usemin之前，我需要生成 angular 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)文件。

生成的 sourcemap 是 uglify:generated 任務的輸入

uglify:{
            generated:{
                options:{

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

                }
            }
        },

最后這是 grunt 的注冊任務

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

任務運行正確，無論如何 Chrome 開發人員工具不允許我在我想要的地方設置斷點

按照這里的要求，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 或更現代的東西