В этом руководстве вы узнаете, как можно использовать PostCSS вместе с GULP, позволяя вам самим определять, какие плагины вы хотите использовать и, следовательно, включать в вашу экосистему.
Мы будем работать как уже было сказано выше с GULP, предполагается что у вас уже установлены:
Перед тем как мы непосредственно начнем, у вас должна быть создана папка с проектом в котором должны находиться файлы:
Внутри вашей папки с проектом создайте 2 подпапки: «src» и «dist». В папке src у нас будет находиться несжатые CSS файлы, в то время когда в папке dist будут находиться обработанные PostCSS финальные файлы.
Следующим шагом нужно установить gulp-postcss плагин в ваш проект — мы будем его использовать для управления обработкой PostCSS.
В терминале (консоли) перейдите в папку с вашим проектом, и запустите команду:
После установки ваш проект должен выглядит так:
Теперь откройте Gulpfile и создайте переменные для вызова «gulp» и «gulp-postcss» модулей:
Теперь мы можем настроить задачу (task) в GULP для чтения нашего CSS и передачи его в PostCSS для дальнейшей обработки. Добавьте следующее:
Давайте разберемся, что мы сделали в коде выше. В первой строчке мы создали задачу для GULP и назвали ее css. Эта задача вызывает функцию, внутри которой мы создали массив processors. Пока этот массив пустой, но дальше мы его заполним PostCSS плагинами, которые мы хотим использовать. После массива processors мы указали файлы, которые будут целью для обработки: любой css файлы в папке src.
В первой из двух функций pipe() мы запускаем PostCSS c помощью функции postcss(), в качестве аргумента мы передаем массив processors, который позже мы заполним плагинами. Во второй функции pipe() мы указываем папку, в которой будет находиться наш финальный css.
Создайте в папке src файл style.css и добавьте в него немного тестовых css свойств, например:
Теперь в консоли/терминале перейдите в каталог с вашим проектом и запустите команду:
Эта команда запустит задачу (task), которую мы только что сделали. Теперь перейдите в папку dest и вы там должны увидеть файл style.css. Если его откроете, вы увидите тот же, что мы писали в style.css, который находится в папке src.
Сейчас мы добавим выборочные плагины PostCSS:
Autoprefixer
cssnext
precss
Выполните следующие команды в терминале/консоли, для того, что бы установить эти плагины:
Далее мы создадим переменную, чтоб загрузить эти плагины в наш проект. Добавьте следующий код в Gulpfile после уже созданных двух переменных:
Далее мы добавим эти 3 плагина в наш массив processors, затем обновите код создания массива на следующий:
Мы добавили 3 плагина в массив и теперь GULP будет знать, что нужно применить эти плагины для исходного css файла. Теперь мы можем добавить несколько тестовых стилей чтобы проверить, что все работает. Удалите все, что находится в файле style.css в папке src и добавьте следующие строки:
Запустите снова команду:
И просмотрите файл style.css в папке dest. Вы должны увидеть что-то вроде следующего кода:
Если вы хотите воспользоваться конкретными настройками (опциями) плагина, добавьте фигурные скобки после названия плагина в массиве processors и передайте параметры. К примеру, вы можете указать список браузеров, с которыми будет работать Autoprefixer. Следующий код это демонстрирует:
Требования
Мы будем работать как уже было сказано выше с 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
];
Crandel
Возможно немного нубский вопрос, но можно сразу стилус или лесс файлы подключать?
dzhiriki
Можно в несколько этапов. Сначала собираете less \ stylus в css, затем эти получившиеся стили пропускаете через postcss.
artemmalko
Порекомендую свой сборщик, про который здесь уже есть несколько статей — TARS. В нем как раз есть возможность использовать PostCSS вместе с препроцессорами. Можно не использовать весь TARS, а только выдрать эту связку. Статьи на habr можно найти по тегу «TARS»