如何将源映射与 gulp-sass + gulp-minify-css + autoprefixer + rename 一起使用？答案

【问题标题】：How can I use sourcemaps with gulp-sass + gulp-minify-css + autoprefixer + rename?如何将源映射与 gulp-sass + gulp-minify-css + autoprefixer + rename 一起使用？
【发布时间】：2015-03-11 18:49:23
【问题描述】：

我目前正在使用 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 或重命名支持 gulp-sourcemaps。还有其他/更好的方法吗？

【问题讨论】：

标签： css node.js sass gulp

【解决方案1】：

您在管道中使用的每个 gulp 插件都依赖于对源映射的支持。

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

这是一个已知问题，例如@import Sass 文件也是如此。在GitHub 上看到这个，他们使用一种（丑陋的）方法通过两次管道源映射来解决这个问题，这样它就可以环绕每个插件。

【讨论】：

【解决方案2】：

当 gulp-* 插件（gulp-less、gulp-concat、gulp-minify-css、...）具有 sourcemaps support 时，它“应该”工作。

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

【讨论】：