我没有测试过所有浏览器,但我经常使用 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']);

#1楼 票数:4

就我而言,我将 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("."));

}

#2楼 票数:2 已采纳

gulp-uglify为2014年1月15日的没有内置的工作sourcemaps。

这是使源映射正常工作的当前解决方案:

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

  ask by user3448990 translate from so

未解决问题?本站智能推荐:

1回复

使用源映射(gulp-sourcemaps)时Chrome中的断点问题

我在 gulp-sourcemaps 和 gulp-uglify 一起工作时遇到了一些奇怪的问题,基本上,我们使用 gulp-uglify 来缩小我们的代码和 gulp-sourcemaps 来创建要调试的项目的源映射安慰。 所以今天,在调试时我注意到谷歌浏览器似乎正在执行一个 if 语句,即使我知
1回复

如何使用Gulp,Uglify和Concat生成有效的源地图?

有没有人找到Gulp,Uglify和Concat的工作组合来生成有效的源地图? 在GitHub中似乎存在很多关于这些类型的交互的问题,但同样地,人们似乎找到了成功运作的组合。 我尝试了很多变化,但是当我打开uglify时,符号映射不起作用,断点在浏览器中无法正常工作。 例如,以下工作正常:
1回复

生成的源映射中的源路径错误

使用gulp-uglifyjs (正在使用mozilla / source-map ),我们正在创建源地图。 问题在于所有源均以“ app /”开头。 反正有没有删除而不替换字符串? 我们已经尝试了sourceRoot设置,但是没有运气。
1回复

Gulp-sourcemaps没有创建源图文件?

我正在尝试使用Gulp源图来编写文件,但我无法在任何地方看到这些文件。 如果在工作树中创建了任何新文件,我会看到它们处于git status ,但没有任何新文件可以找到。 下面是我的gulpfile.js 这是正确的用法吗? 从我在别处看到的例子来看,这应该没问题。 我还看到这些插
3回复

JavaScript用babel在angularjsgulp源映射ngannonate中内存不足

我在我的有角JS项目中使用es6语法,但是在运行gulp build ,在github上搜索时会引发错误,因此有人说这是由于gulp uglify引起的错误,而有人说这是babel问题,而有人说这是ng-annonate问题。 Ubuntu 14.04 节点-v: 8.4.0 npm
1回复

Gulp:如何将生成的文件输出到与源相同的文件夹中?

1)我已经有了一个角度应用程序设置,其中包含“ 角度应用程序结构的最佳实践 ”。 因此,每个部分的文件夹可能都有自己的* .scss文件。 需要将* .scss转换为* .css,并在同一文件夹中输出* .css文件。 在Gulp中纠缠了几个小时,但语法不正确。 它给了我很多不同的行为
2回复

将Gulp与源映射插件一起使用时,源映射不正确

我最近开始使用Gulp因为我更喜欢Grunt的语法,虽然我在很大程度上喜欢它,但我注意到在使用Chrome或任何浏览器时它会告诉我在检查器中查看错误的行映射。 它总是告诉我正确的文件,但是它错误地告诉我它所在的行。 我发现它似乎与Sass嵌套有问题; 因为它给我的行号是第一个父级开始的行,例如在下面
1回复

如何链接Gulp:使用源映射链接到Babel到Webpack?

我正在尝试创建一个转换的gulp任务 TS -> (ES6) -> Babel -> (ES5) -> Webpack -> [bundle.js, bundle.js.map] 源映射映射回原始TS代码的位置。 如何用gulp做到这一点? 到目前为