如何通过gulp sass+gulp minify-css+ autoprefixer + rename使用源映射？

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');
});

对于这样的任务，我如何才能最好地使用源地图？我尝试过使用gulp-sourcemaps，但我需要能够将init()和write()函数封装在sass、autoprefixer、minifyCSS和rename中。我不认为minifyCSS或rename支持gulp-sourcemaps。有没有其他/更好的方法？

Answer 1

你依赖于在你的管道中使用的每个单独的gulp plugin上对源地图的支持。

支持的插件的完整表格可以在here找到。

这是一个已知的问题，也适用于您例如@import您的Sass文件的情况。在GitHub上可以看到这一点，他们使用了一种(丑陋的)方式来解决这个问题，通过管道传输两次源地图，可以说它围绕着每个插件。

Answer 2

当gulp-*插件(gulp less，gulp concat，gulp minify-css，...)有了sourcemaps support，它就“应该”工作了。

我的问题是，我使用的是那些单独的gulp-*插件的旧版本。Sourcemaps是在更高版本中添加的。始终检查您使用的是最新版本的gulp-*插件(支持源地图)。