PostCSS быстрый старт

В этом руководстве вы узнаете, как можно использовать PostCSS вместе с GULP, позволяя вам самим определять, какие плагины вы хотите использовать и, следовательно, включать в вашу экосистему.

Требования

Мы будем работать как уже было сказано выше с GULP, предполагается что у вас уже установлены:

• Node.js
• NPM
• Git

Перед тем как мы непосредственно начнем, у вас должна быть создана папка с проектом в котором должны находиться файлы:

• gulpfile.js
  
• package.json
  
• Gulp установленный в папку «node_modules» и установлен как дев. зависимость (dev depedency) для вашего проекта
  

Базовая настройка GULP PostCSS

Внутри вашей папки с проектом создайте 2 подпапки: «src» и «dist». В папке src у нас будет находиться несжатые CSS файлы, в то время когда в папке dist будут находиться обработанные PostCSS финальные файлы.

Следующим шагом нужно установить gulp-postcss плагин в ваш проект — мы будем его использовать для управления обработкой PostCSS.

В терминале (консоли) перейдите в папку с вашим проектом, и запустите команду:

npm install --save-dev gulp-postcss

После установки ваш проект должен выглядит так:

Структура пректа

Теперь откройте Gulpfile и создайте переменные для вызова «gulp» и «gulp-postcss» модулей:

var gulp = require('gulp');
var postcss = require('gulp-postcss');

Теперь мы можем настроить задачу (task) в GULP для чтения нашего CSS и передачи его в PostCSS для дальнейшей обработки. Добавьте следующее:

gulp.task('css', function () {
 var processors = [
 ];
 return gulp.src('./src/*.css')
 .pipe(postcss(processors))
 .pipe(gulp.dest('./dest'));
});

Давайте разберемся, что мы сделали в коде выше. В первой строчке мы создали задачу для GULP и назвали ее css. Эта задача вызывает функцию, внутри которой мы создали массив processors. Пока этот массив пустой, но дальше мы его заполним PostCSS плагинами, которые мы хотим использовать. После массива processors мы указали файлы, которые будут целью для обработки: любой css файлы в папке src.

В первой из двух функций pipe() мы запускаем PostCSS c помощью функции postcss(), в качестве аргумента мы передаем массив processors, который позже мы заполним плагинами. Во второй функции pipe() мы указываем папку, в которой будет находиться наш финальный css.

Тестовый запуск

Создайте в папке src файл style.css и добавьте в него немного тестовых css свойств, например:

.test {
   background: black;
}

Теперь в консоли/терминале перейдите в каталог с вашим проектом и запустите команду:

gulp css

Эта команда запустит задачу (task), которую мы только что сделали. Теперь перейдите в папку dest и вы там должны увидеть файл style.css. Если его откроете, вы увидите тот же, что мы писали в style.css, который находится в папке src.

Добавляем PostCSS плагины

Сейчас мы добавим выборочные плагины PostCSS:

Autoprefixer
cssnext
precss

Выполните следующие команды в терминале/консоли, для того, что бы установить эти плагины:

npm install autoprefixer --save-dev
npm install cssnext --save-dev
npm install precss --save-dev

Далее мы создадим переменную, чтоб загрузить эти плагины в наш проект. Добавьте следующий код в Gulpfile после уже созданных двух переменных:

var autoprefixer = require('autoprefixer');
var cssnext = require('cssnext');
var precss = require('precss');

Далее мы добавим эти 3 плагина в наш массив processors, затем обновите код создания массива на следующий:

var processors = [autoprefixer, cssnext, precss ];

Мы добавили 3 плагина в массив и теперь GULP будет знать, что нужно применить эти плагины для исходного css файла. Теперь мы можем добавить несколько тестовых стилей чтобы проверить, что все работает. Удалите все, что находится в файле style.css в папке src и добавьте следующие строки:

/* Testing autoprefixer */
.autoprefixer { 
 display: flex; 
};
 /* Testing cssnext */
.cssnext { background: color(red alpha(-10%)); }
 /* Testing precss */
 .precss {  @if 3 < 5 { background: green; } 
                 @else { background: blue; } 
};

Запустите снова команду:

gulp css

И просмотрите файл style.css в папке dest. Вы должны увидеть что-то вроде следующего кода:

/* Testing autoprefixer */
 .autoprefixer {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
 }
/* Testing cssnext */
.cssnext {
 background: rgba(255, 0, 0, 0.9); }
/* Testing precss */
.precss {
 background: green
}
Вы должны были заметить, что добавились вендорные префиксы в первом классе. Это благодаря плагину Autoprefixer, rgba() цвет был добавлен с помощью плагина cssnext, а проверка на @if @else была реализована с помощью плагина PreCSS в третьем классе.

Дополнительные настройки плагина

Если вы хотите воспользоваться конкретными настройками (опциями) плагина, добавьте фигурные скобки после названия плагина в массиве processors и передайте параметры. К примеру, вы можете указать список браузеров, с которыми будет работать Autoprefixer. Следующий код это демонстрирует:

var processors = [
  autoprefixer({browsers: ['last 1 version']}),
  cssnext,
  precss
];