Gulp - 源映射未在 Chrome 中加载源答案

【问题标题】：Gulp - sourcemaps aren't loading source in ChromeGulp - 源映射未在 Chrome 中加载源
【发布时间】：2015-01-14 20:08:06
【问题描述】：

我没有测试所有浏览器，但我经常使用 chrome。

使用 Grunt，我对 uglify 和生成的地图文件没有任何问题。在 Chrome 中，当在开发者工具中时，min.js 和原始 .js 都会被加载。

我正在尝试学习 Gulp，经过数小时的尝试后，我无法让地图文件链接原始 .js 以匹配 .min.js。

这是我的 gulpfile.js。我做错了什么？

var gulp = require('gulp')
    , uglify = require('gulp-uglify')
    , rename = require('gulp-rename')
    , sourcemaps = require('gulp-sourcemaps');

// default means this task will run whenever you type “gulp” at the command line without any parameters.
gulp.task('uglify:apps', function () {

    gulp.src(['core/apps/**/*.js', '!/**/*.min.js'])
        .pipe(sourcemaps.init())
        .pipe(uglify())
        .pipe(rename({ extname: ".min.js" }))
        .pipe(sourcemaps.write("."))
        .pipe(gulp.dest('core/apps/'))
    ;

});


gulp.task('default', ['uglify:apps']);

【问题讨论】：

标签： gulp source-maps gulp-uglify

【解决方案1】：

gulp-uglify 截至 2014 年 1 月 15 日没有内置有效的源地图。

这是使 sourcemap 工作的当前解决方案：

npm install gulp-uglify@https://github.com/floridoo/gulp-uglify/tarball/sourcemap_fix --save-dev

var gulp = require('gulp');
var sourcemaps = require('gulp-sourcemaps');
var uglify = require('gulp-uglify');


gulp.task('ug', function(){
  gulp.src('./test.js')
    .pipe(sourcemaps.init())
    .pipe(uglify())
    .pipe(sourcemaps.write())
    .pipe(gulp.dest('./out'));
});

gulp.task('default', ['ug']);

示例回购：https://github.com/stevelacy/gulp-test-sourcemaps

【讨论】：

感谢您快速参与并发布回购。我会尝试解决方案。你认为 gulp-uglify 会解决这个问题吗？这似乎是一个明显的错误。
@user3448990，是的，现在有来自 floridoo 的拉取请求。我已经在这个问题上提出了一些建议。
@user3448990 安装 1.1.0，他合并了更改。问题已修复

【解决方案2】：

就我而言，我将 gulp-uglify 和 gulp-sourcemaps 更新为： "gulp-sourcemaps": "2.6.5", "gulp-uglify": "3.0.2",

我改变了一点缩小功能来自：

.pipe(sourcemaps.write('.', { includeContent: false, sourceRoot: '../' }))

到：

.pipe(sourcemaps.write('.', { includeContent: false, sourceRoot: '.' }))

由于某种原因，sourceRoot: '../' 我在浏览器中看不到源代码（但调试器；断点正在停止执行，我只是没有看到代码）

我现在的全部代码

function minifyJs(src, dest) {
var minifyPaths = [src];
return gulp.src(minifyPaths)
.pipe(domSrc.duplex({ selector: 'script[data-concat!="false"]', attribute: 'src', cwd: '../' })) //dont pay attantion here
.pipe(sourcemaps.init())
.pipe(babel({
    presets: ["es2015-script"],
    compact: false
}))
.pipe(concat(dest))
.pipe(gulp.dest("."))
.pipe(uglify({
    compress: {
        unused: false
    }
}))
.pipe(rename({ extname: '.min.js' }))
.pipe(sourcemaps.write('.', { includeContent: false, sourceRoot: '.' }))
.pipe(gulp.dest("."));

}

【讨论】：

非常感谢！为你 +1！