css - 我如何将源映射与 gulp-sass + gulp-minify-css + autoprefixer + 重命名一起使用？

Question

我目前正在使用 gulp 工作流，该工作流使用 createSassTask() 方法为同一元素中的几个不同 httpddocs 目录中的每一个目录生成一个任务。下面是我当前的 gulpfile.js:

var package = require('./package.json'),
    gulp = require('gulp'),
    sass = require('gulp-sass'),
    autoprefixer = require('gulp-autoprefixer'),
    concat = require('gulp-concat'),
    uglify = require('gulp-uglify'),
    rename = require('gulp-rename'),
    minifyCSS = require('gulp-minify-css'),
    notify =  require('gulp-notify');

function createSassTask(directory) {
    var taskName = 'sass-'+directory;
    gulp.task(taskName, function() {
        return gulp.src('./'+directory+'/media/sass/**/*.scss')
            .pipe(sass({errLogToConsole: true}))
            .pipe(autoprefixer('last 4 version'))
            .pipe(minifyCSS({keepBreaks:true}))
            .pipe(rename({suffix: '.min' }))
            .pipe(gulp.dest('./'+directory+'/media/css'))
            .pipe(notify('SASS compiled for ' + directory));
    });
    gulp.watch('./'+directory+'/media/sass/**/*.scss', [taskName]);
}

gulp.task('default', function () {
    createSassTask('httpdocs-site1');
    createSassTask('httpdocs-site2');
    createSassTask('httpdocs-site3');
});

我怎样才能最好地使用 sourcemaps 来完成这样的任务？我试过使用 gulp-sourcemaps 但我需要能够将 init() 和 write() 函数包装在 sass、autoprefixer 周围, minifyCSS 并重命名。我不认为 minifyCSS 或重命名支持 gulp-sourcemaps。还有其他/更好的方法吗？

Answer 1

您依赖于您在管道中使用的每个单独的 gulp-plugin 对 sourcemaps 的支持。

可以找到受支持插件的完整表格 here .

这是一个已知问题，同样适用于您 @import 您的 Sass 文件的情况。在 GitHub 上看到这个，他们使用一种(丑陋的)方法来解决这个问题，方法是将 sourcemaps 管道两次，这样可以说它环绕每个插件。