Я ознакомился со списоком так называемых оптимизаций cssnano (list of cssnano optimizations): он включает в себя autoprefixer (не по умолчанию), cssnano-util-raw-cache и другие плагины.
Далее, в документации gulp-postcss я увидел такой пример:
var postcss = require('gulp-postcss');
var gulp = require('gulp');
var autoprefixer = require('autoprefixer');
var cssnano = require('cssnano');
gulp.task('css', function () {
var plugins = [
autoprefixer({browsers: ['last 1 version']}),
cssnano()
];
return gulp.src('./src/*.css')
.pipe(postcss(plugins))
.pipe(gulp.dest('./dest'));
});
Возникает путанца: непонятна иерархия между postcss, cssnano и autoprefixer. В примере выше cssnano и autoprefixer объявлены по отдельности и дальше они идут как плагины postcss. Это было бы терпимо, но из-за путаницы в иерархии непонятно, как использовать другие postcss-плагины (они же "оптимизации cssnano" согласно первой ссылке).
В примере ниже я хочу использовать плагин postcss-calc как в development-сборке, так и production-сборке, а минификатор postcss-normalize-whitespace - только в продакшен-сборке. Как мне следует дополнить приведённый ниже код, чтобы всё работало?
const gulp = require('gulp'),
gulpIf = require('gulp-if'),
sass = require('gulp-sass'),
postcss = require('gulp-postcss');
const isDevelopment = !process.env.NODE_ENV || process.env.NODE_ENV === 'develpment';
gulp.task('styles', function(){
// сначала указываем общий набор плагинов для обоих сборок
let plugins = [
autoprefixer({ browsers: ['>= 1%', 'last 5 major versions', 'ie >= 6']}),
// ...
];
if (isDevelopment) {
plugins.push(/* плагины для development-сборки */);
}
else {
plugins.push(/* плагины для production-сборки */);
}
return gulp.src(HPath.sassSourceFilesSelection)
.pipe(gulpIf(isDevelopment, sourcemaps.init()))
.pipe(sass())
.pipe(postcss(plugins))
// ...
});
Современные инструменты для криптотрейдинга: как технологии помогают принимать решения
Апостиль в Лос-Анджелесе без лишних нервов и бумажной волокиты
Основные этапы разработки сайта для стоматологической клиники
Продвижение своими сайтами как стратегия роста и независимости