grunt usemin - concat + uglify sourcemap

时间:2018-06-18 16:47:47

标签: angularjs gruntjs grunt-contrib-uglify grunt-usemin

我正在尝试缩小我的js和css文件,但我的源映射文件有问题。

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

我的 <!-- 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: {
            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'
            }
    },

现在concat任务正在连接我的源文件

uglify:{
            generated:{
                options:{

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

                }
            }
        },

并正确生成 sourcemap(app.concat.js.map)文件。

生成的源图是uglify:generated task

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

最后这是grunt的registeredTask

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

任务运行正常,无论如何Chrome开发者工具都不允许我在我想要的地方设置brekpoints

按照此处的要求进行ngtemplates任务

{{1}}

1 个答案:

答案 0 :(得分:0)

uglify:{
        generated:{
            options:{

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

            }
        }
    },

这将无效,因为它将忽略“生成的”选项中的所有内容。

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