我最近开始使用Gulp
,因为我更喜欢语法而不是Grunt
,虽然我大部分时间都喜欢它,但我注意到在使用Chrome
或任何浏览器时,它会告诉我在检查器中查找时不正确的行映射。
总是告诉我正确的文件,但它错误地告诉我它所在的行。
我发现它似乎在Sass
嵌套方面存在问题;因为它给我的行号是第一个父项开始的行,例如在下面的代码中:
#foo {
.bar {
}
}
如果我尝试检查具有 bar
类的元素,它会告诉我它1
而不是3
在线。
这是我gulpfile.js
文件:
var gulp = require('gulp');
var concat = require('gulp-concat');
var plumber = require('gulp-plumber');
var sass = require('gulp-sass');
var sourcemaps = require('gulp-sourcemaps');
var autoprefixer = require('gulp-autoprefixer');
gulp.task('scripts', function() {
gulp.src([
'js_dev/jquery.js',
'js_dev/plugins/*.js',
// We have to set the bootstrap lines separately as some need to go before others
'js_dev/bootstrap/alert.js',
'js_dev/bootstrap/collapse.js',
'js_dev/bootstrap/modal.js',
'js_dev/bootstrap/tooltip.js',
'js_dev/bootstrap/popover.js',
'js_dev/bootstrap/tab.js',
'js_dev/bootstrap/transition.js',
'js_dev/scripts.js'
])
.pipe(plumber())
.pipe(sourcemaps.init())
.pipe(concat('scripts.js'))
.pipe(sourcemaps.write('../maps'))
.pipe(gulp.dest('./js'))
});
gulp.task('styles', function() {
gulp.src('scss/**/*.scss')
.pipe(plumber())
.pipe(sourcemaps.init())
.pipe(sass())
.pipe(autoprefixer({
browsers: [
'last 4 Chrome versions',
'last 4 Firefox versions',
'last 4 Edge versions',
'last 2 Safari versions',
'ie >= 10',
'> 1.49%',
'not ie <= 9'
],
cascade: false
}))
.pipe(sourcemaps.write('../maps'))
.pipe(gulp.dest('./css'));
});
gulp.task('watch', function() {
gulp.watch(['scss/**/*.scss', 'js_dev/**/*.js'], ['scripts', 'styles']);
});
gulp.task('default', ['scripts', 'styles']);
奇怪的问题是,gulp-sourcempas
之间有多个插件会导致此问题。这是错误,目前我可以通过暂时删除额外的插件来修复。这是最有可能工作的代码
gulp.task('styles', function() {
gulp.src('scss/**/*.scss')
.pipe(plumber())
.pipe(sourcemaps.init())
.pipe(sass())
.pipe(sourcemaps.write('../maps'))
.pipe(gulp.dest('./css'));
});
我知道这不是真正的解决方案,因为我们需要各种其他插件,但这是显示正确行号的方法。您可以在 github 上观看此问题以监控此错误的进度。
我从更少和源映射写入之间注释掉了自动前缀,现在在我的情况下它显示了正确的行号。
gulp.src(['css/custom.less'])
.pipe(sourcemaps.init())
.pipe(less())
// .pipe(autoprefixer({
// cascade: false
// }))
.pipe(sourcemaps.write('./'))
.pipe(gulp.dest('css/'));