Чем в gulp корректно минифицировать CSS?

Question

[Владимир Гомонов]

Уже неделю работаю без нормальной карты CSS в билде. Довольно мучительно отлаживаться. Помогите, плиз, кто в теме.
Суть: После минификации (пробовал и gulp-minify-css и gulp-csso) создаётся некорректная линк-карта (common-app.min.css.map). В результате во всех браузерах при отладке не отображается адресация CSS классов в файлах исходников.

gulp.task('css', function() {
    var cssFilter = gulpFilter('**/*.css');
    gulp.src(CSS_SRC)
    .pipe(plumber())
    .pipe(order([
		"app-struct.css",
      "app-colors.css",
       "app-widgets.css",
       "app-grid2-grey.css",
       "app-animate.css"
	 ]))
    .pipe(sourcemaps.init({debug:true}))
    .pipe(concat('common-app.css'))
    .pipe(sourcemaps.write('.',{debug:true})) 
                             // это файл корректен, адресация отображается
    .pipe(gulp.dest(CSS_BUILD))
    .pipe(cssFilter)
    .pipe(minifyCSS())
    .pipe(rename({
       suffix: ".min",
    }))
    .pipe(sourcemaps.write('.',{debug:true}))  // а здесь уже всё поломано..   :((
 //   .pipe(utf8ize())   // это пробовал, не помогает.
    .pipe(gulp.dest(CSS_BUILD))
});

Для маппинга использован gulp-sourcemaps (других не нашёл).
В качестве ответа устроит либо ссылка на корректный маппер CSS, либо описание структуры map-файла (или ссылка на описание), чтобы я сам мог написать маппер.

Comments

[TedMarsh]

Владимир Гомонов решил?

Answer 1

[Александр Ковпашко]

Возможно это поможет https://www.npmjs.com/package/gulp-cssmin
Там в описании ссылка на конфигурационные параметры cssmin, в которых есть опция sourceMap: true.

Answer 2

[Иван]

Пробовал?

var gulp = require('gulp');
var minifyCSS = require('gulp-minify-css');
var sourcemaps = require('gulp-sourcemaps');
 
gulp.task('minify-css', function() {
  return gulp.src('./src/*.css')
    .pipe(sourcemaps.init())
    .pipe(minifyCSS())
    .pipe(sourcemaps.write())
    .pipe(gulp.dest('dist'));
});

Answer 3

[VyacheslavFomenko]

https://www.npmjs.com/package/gulp-clean-css - Вот этот плагин подходит

Answer 4

[MalGym]

Если используете препроцессор , то можно писать так, естественно со своими путями тд

function sassOnCss(done) {
    gulp.src('sass/*.sass')
    .pipe(sass())
    .pipe(gulp.dest('css'))
    .pipe(gulp.src('sass/main.sass'))
    .pipe(sass({
        outputStyle: 'compressed' // минифицируем только файл main.sass
    }))
    .pipe(rename('main.min.css')) // дописываем к минифицированному файлу .min - main.min.css
    .pipe(gulp.dest('css'));

    done();
}