2

我最近开始使用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']);
4

2 回答 2

1

奇怪的问题是之间有多个插件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 上观看此问题以监控此错误的进度。

于 2016-11-29T06:51:05.107 回答
0

我从 less 和 source maps write 之间注释掉了 autoprefixer，在我的情况下它现在显示了正确的行号。

gulp.src(['css/custom.less'])
        .pipe(sourcemaps.init())
        .pipe(less())
        // .pipe(autoprefixer({
        //    cascade: false
        // }))
        .pipe(sourcemaps.write('./'))
        .pipe(gulp.dest('css/'));
于 2019-11-19T06:37:07.767 回答