Question

首先，这将是我第一次尝试通过我的gulp构建导出源映射。我使用角度1.4.x，我们采用了以下模式::

(function() {
'use strict';

    var thing = (function() { 
        function thingFunc(thingToInject) {...}

        thingFunc.$inject = ['thingToInject'];
        return thingFunc;
    })();

    angular.module('app').controller('thing', thing);
})();

当我运行我的gulp时，我使用

gulp.task ('thingTask', [], function() {
    return gulp.src(thingFiles)
        .pipe(sourcemaps.init())
        .pipe(concat(things.Out, { newLine: '\n\n' }))
        .pipe(sourcemaps.write())
        .pipe(gulp.dest(things.Dist));
});

输出正如预期的那样......一堆顺序的文件，每个文件之间有两个换行符，整个文件以一个长的sourceMap blob的注释文本结尾。

我不明白这段文字是如何为我做的。我在每个文件周围包含的IIFE包装器是否对地图文件的工作方式施加了某种限制？当我在Chrome中进行调试时，通过提供此源地图确实没有任何好处。无论我在哪里强制休息，都没有任何东西可以帮助开发人员找到存在问题的实际源文件。

我错过了什么？

Answer 1

您需要告诉sourcemaps在哪里写。对于源映射行，尝试类似：

.pipe(sourcemaps.write('.'));

这应该将源图放在与css相同的文件中。

然后确保您已将源图配置为在浏览器中工作。有关详细信息，请访问：https://developer.chrome.com/devtools/docs/javascript-debugging

使用带有角度（IIFE模式）的gulp-sourcemaps。我能正确理解源图吗？

1 个答案: