gulp - 无法让 Gulp 引用 Stylus 文件来生成源映射

Question

我在尝试sourcemaps为我的 CSS 文件生成时遇到问题。

我当前的堆栈是：

• 吞咽
• 手写笔
• 自动前缀

有两个编译步骤：

1. Gulp 预编译为 CSS；
2. Autoprefixer 后编译 CSS 以添加浏览器供应商前缀；

我无法sourcemaps在第一次编译时生成，因为第二次编译会在 CSS 中添加新行，而我对如何让它们相互“交谈”感到很迷茫。

这是我到目前为止得到的。

var gulp = require('gulp');

var paths = {
    src: 'src',
    dist: 'dist'
};

// ---------------------------------------
// STYLUS
var stylus = require('gulp-stylus');
var rename = require('gulp-rename');

gulp.task('stylus', ['clean:css'], function () {
    return gulp.src(paths.src + '/stylus/*.styl')
        .pipe(stylus({
            compress: true,
            sourcemap: {
                inline: true,
                sourceRoot: '.',
                basePath: paths.dist + '/css'
            }
        }))
        .pipe(rename({
            suffix: '.min'
        }))
        .pipe(gulp.dest(paths.dist + '/css'));
});

// ---------------------------------------
// BROWSERSYNC
var browserSync = require('browser-sync');

// Sets up a static server
gulp.task('browser-sync', function() {
    return browserSync({
        server: {
            baseDir: './'
        }
    });
});

// ---------------------------------------
// AUTOPREFIXER
var sourcemaps = require('gulp-sourcemaps');
var autoprefixer = require('gulp-autoprefixer');
var concat = require('gulp-concat');

gulp.task('autoprefixer', ['stylus'], function () {
    return gulp.src(paths.dist + '/css/*.css')
        .pipe(autoprefixer())
        .pipe(sourcemaps.init({
             loadMaps: true
        }))
        .pipe(sourcemaps.write('.', {
            includeContent: false,
            sourceRoot: '.'
        }))
        .pipe(gulp.dest(paths.dist + '/css'))
        .pipe(browserSync.reload({stream:true}));
});

// ---------------------------------------
// CLEAN
var del = require('del');

gulp.task('clean:css', function (cb) {
    return del([
        paths.dist + '/**/*.css',
        paths.dist + '/**/*.map'
    ], cb);
});

// ---------------------------------------
// WATCH
gulp.task('watch', ['browser-sync'], function() {
    gulp.watch(paths.src + '/stylus/**/*.styl', ['clean:css', 'stylus', 'autoprefixer']);
    gulp.watch('*.html', ['compress', browserSync.reload]);
});