Gulp sourcemap с меньшим/concat/autoprefixer/minifycss?

Можно ли создать исходную карту со всеми этими преобразованиями?

gulp.task('styles', function() {
    return gulp.src(source.styles)
        .pipe(plumber())
        .pipe(gulpif(/\.less$/, plumber().pipe(less({
            strictMath: true,
            strictUnits: true,
        }))))
        .pipe(concat('bundle.css'))
        .pipe(prefixer(['last 2 versions', '> 1%', 'ie 9'], {cascade: false}))
        .pipe(minifyCss())
        .pipe(gulp.dest('public/css'));
});

Используемые библиотеки:

Я знаю, less может генерировать sourcemaps, gulp -concat Я не думаю, что они поддерживаются, autoprefixer должен сохранить их, а minify-css/clean-css, похоже, не упоминает исходные карты. Мне повезло?

Ответы

Ответ 1

Сегодня у меня такая же проблема, и я все еще работаю над поиском чистого решения. Тем не менее, мне просто удалось что-то сделать, поэтому я подумал, что буду делиться:

Примечание. Я не использую ни gulpif, ни minify

Используйте gulp-sourcemaps, поскольку gulp-less, похоже, поставляется без опции исходной карты (по крайней мере, на данный момент).

Замените gulp-concat на gulp-concat-sourcemap, чтобы сохранить исходные карты.

Gulp -concat в настоящее время не поддерживается gulp -sourcemaps (см. README). Пока это не будет исправлено, здесь есть исправленная версия: https://github.com/floridoo/gulp-concat/tree/sourcemap_pipe2

gulp.task('less', function () {
  gulp.src(sources.less)
    .pipe(sourcemaps.init())
    .pipe(less())
    .pipe(prefix({ map: true })) 
    .pipe(concat('build.css'))
    .pipe(sourcemaps.write()
    .pipe(gulp.dest(dirs.build + 'assets/css'));
});

Ответ 2

Начиная с версии 2 из Less вы можете использовать плагины для компилятора Less. Кроме того, gulp -less позволяет использовать эти плагины (программные), см. Также http://lesscss.org/usage/#plugins-using-a-plugin-in-code

Документация gulp -less описывает, как использовать плагин clean-css и autoprefix на https://github.com/plus3network/gulp-less#plugins. Обратите внимание, что gulp -minify-css также использует код с чистым кодом.

Также использование gulp -less с gulp -sourcemaps для создания sourcemaps описано в https://github.com/plus3network/gulp-less#source-maps

Итак, вы должны иметь возможность использовать:

var LessPluginCleanCSS = require("less-plugin-clean-css"),
    cleancss = new LessPluginCleanCSS({advanced: true});

var LessPluginAutoPrefix = require('less-plugin-autoprefix'),
    autoprefix= new LessPluginAutoPrefix({browsers: ["last 2 versions"]});


gulp.src('./less/**/*.less')
  .pipe(sourcemaps.init())
  .pipe(less({
    plugins: [autoprefix, cleancss]
   }))
  .pipe(sourcemaps.write('./maps'))
  .pipe(gulp.dest('./public/css'));

Вышеприведенное должно генерировать autoprefixed и minified CSS вашего источника Less, с исходными картами CSS, записанными в. /public/css/maps

В качестве альтернативы вы можете рассмотреть возможность использования плагина Pleeease. Pleeease может запускать много постпроцессоров один раз, см. http://pleeease.io/docs/#features