使用Grunt Connect UGGLify源地图无法正常工作

时间:2018-09-20 20:39:04

标签: gruntjs grunt-contrib-uglify grunt-contrib-connect

在grunt connect上使用uglify源映射时,有人遇到任何问题吗?如果我不使用grunt connect,则源映射将起作用,并且我指向这些文件的路径如下:

<script src="~/dist1/js/vendor.js"></script>
<script src="~/dist1/js/main.js"></script>

但是,如果我使用grunt connect,当我尝试在开发人员工具中搜索文件时,它将显示空白页面,如果使用grunt connect,这是文件的路径:

<script src="http://localhost:8000/js/vendor.js"></script>
<script src="http://localhost:8000/js/main.js"></script>

这是我的gruntfile配置:

var path = require('path');

module.exports = function (grunt) {

    grunt.initConfig({
        babel: {
            dev: {
                options: {
                    sourceMap: false,
                    presets: ['env']
                },
                files: [{
                    "expand": true,
                    "cwd": "Scripts/main",
                    "src": ["**"],
                    "dest": "Scripts/main/compiled/",
                    "ext": "-compiled.js"
                }]
            }
        },

        mainScripts: [
            'Scripts/main/compiled/myfile-compiled.js',
        ],

        vendorScripts: [
            'node_modules/jquery/dist/jquery.js',
        ],

        uglify: {
            dev: {
                options: {
                    sourceMap: true,
                    beautify: true
                },
                files: {
                    'dist1/js/main.js': '<%= mainScripts %>',
                    'dist1/js/vendor.js': '<%= vendorScripts %>'
                }
            }
        },
        watch: {
            options: {
                livereload: true
            },
            scripts: {
                files: ['Scripts/main/*.js'],
                tasks: ['clean:scripts', 'babel:dev', 'uglify:dev']
            }
        },
        connect: {
            server: {
                options: {
                    base: path.resolve(__dirname, 'dist1'),
                    livereload: true,
                    middleware: function (connect, options, middlewares) {
                        middlewares.unshift(function (req, res, next) {
                            res.setHeader('Access-Control-Allow-Origin', '*');
                            res.setHeader('Access-Control-Allow-Methods', '*');
                            next();
                        });

                        return middlewares;
                    }
                }
            }
        }
    });

    // LOAD TASKS
    grunt.loadNpmTasks('grunt-babel');
    grunt.loadNpmTasks('grunt-contrib-uglify');
    grunt.loadNpmTasks('grunt-contrib-watch');
    grunt.loadNpmTasks('grunt-contrib-connect');

    // REGISTER TASKS FOR ENVIRONMENTS
    grunt.registerTask('dev', [
        'babel:dev',
        'uglify:dev',
        'connect', 
        'watch'
    ]);
}

任何建议或帮助都会很棒!

0 个答案:

没有答案