获取源映射以使用Grunt,usemin,uglify和rev

时间:2015-05-29 18:48:42

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

我正在使用Grunt来优化我的AngularJS应用程序以进行生产。它使用useminPrepare和usemin从我的index.html页面读取要连接/缩小的文件。我正在尝试使用源图,因此我可以查看错误发生的位置。这是package.json的相关版本:

"grunt": "0.4.5",
"grunt-autoprefixer": "2.2.0",
"grunt-contrib-clean": "~0.5.0",
"grunt-contrib-concat": "~0.3.0",
"grunt-contrib-copy": "~0.5.0",
"grunt-contrib-cssmin": "~0.11.0",
"grunt-contrib-uglify": "~0.9.1",
"grunt-rev": "~0.1.0",
"grunt-usemin": "~2.0.2",

这是我Gruntfile.js的精简版,只是相关的任务:

'use strict';

// usemin custom step
var useminAutoprefixer = {
    name: 'autoprefixer',
    createConfig: require('grunt-usemin/lib/config/cssmin').createConfig // Reuse cssmins createConfig
};

module.exports = function (grunt) {
    require('load-grunt-tasks')(grunt);

    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),
        clean: ["dist", '.tmp'],
        copy: {
            main: {
                files: [
                    {
                        expand: true,
                        src: ['**', '!css/**', '!*.js', '!node_modules/**', '!*.log', '!tests/**'],
                        dest: 'dist/'
                    }
                ]
            }
        },
        cssmin: {
            options: {
                root: './' // Replace relative paths for static resources with absolute path
            }
        },
        rev: {
            files: {
                src: ['dist/assets/**/*.{js,css}']
            }
        },
        useminPrepare: {
            html: 'index.html',
            options: {
                flow: {
                    html: {
                        steps: {
                            js: ['concat', 'uglifyjs'],
                            css: ['cssmin', useminAutoprefixer] // Let cssmin concat files so it corrects relative paths to fonts and images
                        },
                        post: {
                            js: [{
                                name: 'concat',
                                createConfig: function (context, block) {
                                    context.options.generated.options = {
                                        sourceMap: true
                                    };
                                }
                            }, {
                                name: 'uglifyjs',
                                createConfig: function (context, block) {
                                    context.options.generated.options = {
                                        sourceMapIn: '.tmp/concat/' + block.dest.replace('.js', '.js.map'),
                                        mangle: false,
                                        beautify: {
                                            beautify: true
                                        }
                                    };
                                }
                            }]
                        }
                    }
                }
            }
        },
        usemin: {
            html: ['dist/index.html']
        },
        uglify: {
            options: {
                report: 'min',
                mangle: false
            },
            generated: {
                options: {
                    sourceMap: true
                }
            }
        }
    });

    grunt.registerTask('build', [
        'clean', 'useminPrepare', 'concat', 'copy', 'cssmin', 'autoprefixer', 'uglify', 'rev', 'usemin'
    ]);
};

*.js.map中正在生成dist/assets/js个文件。加速的JS文件似乎很好地引用它们:

//# sourceMappingURL=app.js.map

但是,查看源映射,似乎它可能有一个错误的目录路径和文件名:

{"version":3,"file":"app.js","sources":["../../../.tmp/concat/assets/js/app.js"] ...

知道如何让源图使用Grunt,usemin,uglify和rev吗?

0 个答案:

没有答案