Example case:
我有3个javascript文件（Act.js，Body.js，SpriteSheets.js），它们与gulp 4.0一起编译，源代码与gulp-sourcemaps 2.6.4一起映射 . Body.js的第43行引发了错误，但控制台显示了Act.js的第194行 . Act.js有151行，所以如果我点击Console中的Act.js：194链接，它会打开Sources并突出显示Act.js中的最后一行（151） .
所有3个javascript源在Sources选项卡中正确显示，控制台打印正确的类和函数名称，但控制台始终指向Act.js，甚至是其他文件中存在的控制台日志 .
我不知道这是Chrome问题，gulp-sourcemaps问题，还是代码问题 . 有任何想法吗？
Gulp Compile Function:
const gulp = require('gulp');
const concat = require('gulp-concat');
const minify = require('gulp-minify');
const plumber = require('gulp-plumber');
const sourcemaps = require('gulp-sourcemaps');
....
const compileJS = (src, dest, name, include) => {
console.log(`js compile ${src}`);
let glob = [src];
if (include){
glob = include.first ? include.src.concat(glob) : glob.concat(include.src);
}
return gulp.src(glob)
.pipe(plumber())
.pipe(sourcemaps.init())
// concat all js in folder and name result as folder's name
.pipe(concat(name + '.js'))
.pipe(minify({
noSource: true,
ext: {
min: '.min.js'
}
}))
.pipe(sourcemaps.write('./', {
sourceMappingURLPrefix: src.replace('./', '').replace('src', '').replace('/**', '').replace('/*.js', '')
}))
.pipe(gulp.dest(dest));
};
我应该注意，SASS也正在编译和源映射，并且源图正常工作 .
1 回答
看起来gulp-minify就是问题所在 . 在使用gulp-sourcemaps时，这是一个不受支持的插件 . 哎呦！我应该彻底阅读文档 . 我转而使用gulp-uglify-es进行缩小 .