gulp-postcss: условные опции (оптимизации)
Я узнал список оптимизации cssnano: он включает 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'));
});
Ну, хотя было сказано, что autoprefixer
один из cssnano
оптимизации, в приведенном выше примере это было определено отдельно. Однако я не могу понять из приведенного выше примера, как установить желаемые оптимизации по первой ссылке (список оптимизаций cssnano).
Например Я хочу использовать postcss-calc
как в разработке, так и в производстве, однако мне нужно использовать 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(){
// first the optimizations for both Development and production
let plugins = [
autoprefixer({ browsers: ['>= 1%', 'last 5 major versions', 'ie >= 6']}),
// ...
];
if (isDevelopment) {
plugins.push(/* plugins for development build */);
}
else {
plugins.push(/* plugins for production build */);
}
return gulp.src(HPath.sassSourceFilesSelection)
.pipe(gulpIf(isDevelopment, sourcemaps.init()))
.pipe(sass())
.pipe(postcss(plugins))
// ...
});
1 ответ
let PostCssPlugins = [
// non-conditional
require('cssnano-util-raw-cache')(),
// conditional
!options.isDevelopment ? require('postcss-normalize-whitespace')() : false
].filter(Boolean);
return gulp.src(sassFilesSelection)
.pipe(plugins.sass())
.pipe(plugins.postcss(PostCssPlugins))
.pipe(gulp.dest(outputPath));