繁体   English   中英

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

Gulp - sourcemaps aren't loading source in Chrome

提示:本站收集StackOverFlow近2千万问答,支持中英文搜索,鼠标放在语句上弹窗显示对应的参考中文或英文, 本站还提供   中文繁体   英文版本   中英对照 版本,有任何建议请联系yoyou2525@163.com。

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

}

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

1 Gulp-合并媒体查询时,源映射更少

在这个项目中,我将“ Gulp”用于某些任务,但是最近收到了添加源映射的请求。 我可以使用sourcemap,但是它似乎与其他插件(如'gulp-combine-mq'和"gulp-combine-media-queries" 又称为“ cmq”)发生冲突 在注释掉“ cmq”的情况 ...

2 未在Chrome中加载图片

对于我正在做的一个小项目,我正在使用css3列数创建砌体样式的css3 。 这可以完美地工作并创建我要使用的4列。 我的问题是,填充卡片的图像仅在第一列中呈现。 在其他情况下,它们是它们的属性,如果我click并drag或右键单击,它将提供图像url / thumbnail 。 在f ...

3 Tree Grid未在Chrome中加载

基于官方TreeGrid示例设置ExtJS 示例 。 它从JSON文件加载数据并在树形网格中呈现它。 一切都在Firefox上运行良好,但在Chrome上则不行。 在Chrome上我必须多次重新加载示例,直到它出现。 我怀疑在渲染树形网格时JSON文件还没有准备好加载,但是没有出 ...

4 iFrame未在Chrome中加载

当用户登录到我的网站时,我检查是否有任何活动的促销活动,如果有,我想在弹出的iFrame中显示一条消息。 这适用于IE8和IE9,但不适用于FF或Chrome。 使用Chrome时,页面仅循环浏览document.ready函数...也就是说,它执行document.ready和sh ...

8 跨源视频无法在Chrome中加载

我正在尝试在Chrome(版本20.0.1132.47 m)中播放带有crossorigin属性的视频。 它甚至不加载。 网络面板显示,由于某种原因, OPTIONS (所谓的“预检”)请求被浏览器中止。该请求在没有crossorigin属性的情况下crossorigin 。 Firefo ...

9 用gulp生成源映射

我刚开始使用gulp来捆绑和缩小我们的js和css文件。 我将下面的gulpfile.js设置为使用我们的bundleconfig.json,它适用于捆绑和缩小js文件,但我也想让它处理生成源映射。 我查看了源映射插件文档但是没有太多运气来设置它。 我如何修改我的gulpfile.js来处 ...

2019-05-15 18:05:34 1 21   gulp
10 gulp-“ cli”代表什么?

有人可以解释一下以下两种gulp安装方法之间的确切区别是什么: 和 在我看来,两者都做相同的事情,除了第一种方法给我的版本是1.2.1,而第二种方法给了我的版本3.9.1 有人可以简单地说一下有什么区别吗? 加上“ cli”代表什么? ...

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2022 STACKOOM.COM