如何将sourcemaps与gulp sass+；狼吞虎咽缩小css+；自动刷新器+；改名？

我目前正在使用一个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

，但我需要能够围绕sass、autoprefixer、minifyCSS和rename来包装

init（）

和

write（）

函数。我不认为minifyCSS或rename支持

gulpsourcemaps

。还有其他/更好的方法吗？

您依赖于在管道中使用的每个gulp插件对sourcemaps的支持

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

这是一个已知问题，也适用于您导入Sass文件的情况，例如

@import

。请看这篇文章，他们使用了一种（丑陋的）方法来解决这个问题，方法是通过管道将源地图传输两次，这样可以说，它围绕着每个插件。

当gulp-*插件（gulp less、gulp concat、gulp minify css等）有了，它“应该”工作

我的问题是我使用了那些单独的gulp-*插件的旧版本。Sourcemaps是在以后的版本中添加的。始终检查您是否正在使用最新版本的gulp-*插件（支持sourcemaps）