gulp-postcss: набор опций (плагинов) в зависимости от условия

253
22 ноября 2017, 01:38

Я ознакомился со списоком так называемых оптимизаций 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))
        // ...
});
READ ALSO
Как реализовать фильтрацию по дереву в Ext js?

Как реализовать фильтрацию по дереву в Ext js?

Есть Tree Panel в него я добавл поле для фильтрации

222
Не проходит авторизацию Skype Web SDK

Не проходит авторизацию Skype Web SDK

Здравствуйте! Пытаюсь разобраться со Skype Web SDKСмотрю примеры кода, делаю так же, но почему-то авторизовываться не хочет приложение

343
createElement(“span”) сбрасывается при добавлении текста

createElement(“span”) сбрасывается при добавлении текста

Друзья, имеется такой пользовательский интерфейс

262
считать данные json не из файла

считать данные json не из файла

Как считать данные json не из отдельного файла?

281