Как использовать исходные коды с 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'); 
}); 

Как я могу наилучшим образом использовать sourcemaps с задачами, как это? Я пробовал использовать gulp-sourcemaps, но мне нужно иметь возможность обертывать функции init() и write() вокруг sass, autoprefixer, minifyCSS и переименовывать. Я не думаю, что minifyCSS или переименовать поддержку gulp-sourcemaps. Есть ли другой способ?

Answer 1

Вы зависите от поддержки исходных карт на каждом отдельном плагин-глобусе, который вы используете в своем конвейере.

Полную таблицу поддерживаемых плагинов можно найти here.

Это известная проблема, так же, как если вы, например, @import своих файлов Sass. См. Это на GitHub, где они используют (уродливый) способ разрешить это, дважды подключая исходные карты, чтобы он обертывал вокруг каждого плагина так, чтобы говорить.

Answer 2

Когда gulp- * плагины (gulp-less, gulp-concat, gulp-minify-css, ...) имеют sourcemaps support, он должен «работать».

Моя проблема заключалась в том, что я использовал более старые версии этих отдельных плагинов gulp- *. Sourcemaps были добавлены позже в более поздних версиях. Всегда проверяйте, что вы используете последнюю версию плагинов gulp- * (с поддержкой sourcemaps).