Как создать исходную карту обратно в исходные бездействующие файлы из миниатюрного файла CSS?

Question

Я работаю с Gulp.js, и я нахожусь в тупике, пытаясь заставить gulp-sourcemaps указать все обратное на исходное меньше файлов после того, как я сделаю шаг миниатюры.

Поскольку gulp-minify-css не поддерживает исходные коды, я использую postcss & csswring.

В идеале, я хотел бы закончить с:

• ss.css (unminified)
• ss.css.map (указывая от ss.css обратно в исходные файлы .less)
• ss.min.css (уменьшенная)
• ss.min.css.map (указывая от ss.min.css обратно в исходные файлы .less)

на данный момент, я перестал пытаться выводить оба мини d и неминифицированные версии, но даже получение мини-версии для возврата к исходным файлам бездействия не работает.

Не делая шаг минификации моего .map файл прекрасно работает и выглядит следующим образом:

{"version":3,"sources":["ss.less"],"names":[],"mappings":";AAEA;... 

Когда я делаю шаг минификации, он изменяет карту, чтобы указать Минимизированный файл обратно в скомпилированном CSS, не оригинальные Less файлы:

{"version":3,"sources":["ss-min.css"],"names":[],"mappings":";AAEA;... 

Вот мой gulpfile.js:

var csswring = require('csswring'), 
    gulp = require('gulp'), 
    less = require('gulp-less'), 
    path = require('path'), 
    postcss = require('gulp-postcss'), 
    rename = require('gulp-rename'), 
    sourcemaps = require('gulp-sourcemaps'); 

var sourceLess = path.join(__dirname, 'app', 'assets', 'less'); 
var targetCss = path.join(__dirname, 'app', 'assets', 'css'); 

// Compile Less to CSS and then Minify, Include Sourcemaps 
gulp.task('less-and-minify-css', function() { 
    return gulp.src(lessFiles) 
     .pipe(sourcemaps.init()) 
     .pipe(less()) 
     .pipe(rename({suffix: "-min"})) 
     .pipe(postcss([csswring])) 
     .pipe(sourcemaps.write('.')) 
     .pipe(gulp.dest(targetCss)); 
}); 

Как всегда, любые мысли ценились!

Я экспериментировал с использованием фильтра только для переименования сгенерированных файлов .css и ничего другого, но это, похоже, не устраняет основную проблему.

Answer 1

После более вопиющего, я смог заставить его работать с минимизацией, хотя я все еще не смог сохранить мини-и неминифицированные версии в одной задаче.

Использование функции для переименования было необходимо, потому что просто добавление суффикса заканчивается тем, что карта имеет имя «file.css.min.map» вместо «file.min.css.map», что и требуется чтобы они соответствовали друг другу.

Я добавил gulpif, чтобы сэкономить время на выполнение бездействующих файлов с помощью команды csswring.

gulp.task('less-css-and-minify', function() { 
    return gulp.src(lessFiles) 
     .pipe(sourcemaps.init()) 
     .pipe(less()) 
     .pipe(gulpif('**/*.css', postcss([csswring]))) 
     .pipe(rename(function (path) { 
      if (path.extname === '.map') { 
      path.basename = path.basename.replace('.css', '.min.css'); 
      } 
      if (path.extname === '.css') { 
      path.basename += '.min'; 
      } 
     })) 
     .pipe(sourcemaps.write('.')) 
     .pipe(gulp.dest(targetCss)); 
});