НовостиАдминистрированиеУправления хостингомАрхив
23 октября 2015

Краткое руководство по PostCSS: Настройка Gulp

Эта статья входит в серию под названием Глубокое погружение в PostCSS .

В прошлом уроке мы рассмотрели, как быстро начать использовать PostCSS с помощью CodePen или Prepros. Это отличные варианты, но они ограничивают вас в том, что вы не можете контролировать, какие плагины использовать.

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

Учитывая, что мы будем работать с Gulp, предположим, что у вас уже есть все необходимое для его использования:

  • Node.js
    • NPM
    • Git

Прежде чем вы пойдете дальше, у вас должна быть папка проекта со следующим:

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

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

В папке проекта создайте две подпапки, одну под названием src , вторую dest . В папке src буду храниться необработанные CSS-файлы, а в папку dest будут записываться файлы, обработанные PostCSS.

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

npm install --save-dev gulp-postcss

После завершения установки, структура вашего проекта должна выглядеть следующим образом:

1.png

Теперь откройте файл Gulp для редактирования и создайте переменные для вызова в модулях gulp и gulp-postcss , добавив следующий код: 

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

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

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

Давайте разберемся, что мы имеем в вышеприведенном коде.

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

В первой из двух строк, использующих функцию pipe() мы настраиваем выполнение PostCSS через функцию postcss(). В качестве аргумента мы пропускаем через эту функцию наш массив processors, который позже будет сообщать PostCSS, какие плагины мы хотим использовать. И наконец, с помощью второй из двух функций pipe() мы записываем обработанный код в новый CSS-файл в нашей папке \"dest\".

Запуск тестовой компиляции

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

.test {
    background: black;
}

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

gulp css

Это запустит задачу, которую вы только что настроили, и в результате в папке \"dest\" вы найдете новый файл \"style.css\".Когда вы откроете этот новый файл, вы увидите тот же код, что и в исходном файле. Код не изменился, потому что мы еще не использовали плагины PostCSS, а как вы знаете из предыдущего примера, именно плагины выполняют манипуляции с CSS.

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

Добавление плагинов PostCSS А теперь мы добавим набор плагинов и пакетов PostCSS: Autoprefixer (добавляет префиксы поставщика), cssnext (включает синтаксис будущего) и precss (добавляет функциональные возможности вроде Sass).

Запустите следующие команды, чтобы установить каждый плагин в свой проект: 

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

Примечание: Установка cssnext и precss может занять определенное время, так как эти пакеты состоят из нескольких плагинов.

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

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

После этого мы добавим эти три плагина в массив processors в задаче gulp. Обновите массив следующим образом: 

var processors = [
  autoprefixer,
  cssnext,
  precss
];

Когда мы добавим эти три плагина в массив процессоров, PostCSS будет знать, что мы хотим применить каждый из них к нашему исходному CSS.Теперь мы готовы добавить немного тестового кода в наш файл \"src/style.css\" и проверить, все ли работает. Удалите все, что есть в этом файле, и вместо этого добавьте следующий CSS: 

/* 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. В результате ваш файл в папке \"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 добавил в первый класс префиксы поставщика, cssnext добавил во второй класс цвет rgba(), а PreCSS проверил @if @else в третьем классе.

Настройка опций плагинов

Примечание: если вы хотите настроить опции плагина, добавьте пару скобок после его названия в массиве препроцессоров и введите опции туда. Например, вы можете указать списку браузеров, что вы хотите отключить Autoprefixer, например, так: 

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

Совместная работа над проектом

Красота PostCSS заключается в его способности настраиваться с любым набором плагинов. Однако в этом возникает новая проблема нужно убедиться, что у остальных людей, которые хотят работать с этим проектом, есть тот же набор плагинов PostCSS. Благодаря npm, эта проблема решается с помощью системы управления зависимостями.

Так как вы используете метку --save-dev каждый раз, когда устанавливаете плагин в свой проект, она добавляется в файл \"project.json\" в качестве dev-зависимости. Это означает, что, если вы хотите организовать совместную работу над вашим проектом с другими людьми, они могут запустить команду npm install в пакете, который вы им предоставили, и получить автоматическую установку тех же плагинов.

Чтобы узнать больше о том, как работает управление зависимостями с NPM, ознакомьтесь с уроком \"The Command Line for Web Design: Taming 3rd Party Packages\".

Подведем краткий итог:

  • Создайте проект npm с установленным Gulp и файлом Gulp;
    • Установите плагин gulp-postcss;
    • Настройте файл Gulp, чтобы загрузить плагины gulp и gulp-postcss;
    • Создайте задачу gulp, чтобы скомпилировать CSS;
    • В задаче настройте массив processors;
    • Пропустите исходный CSS через функцию postcss(), а массив processors пропустите в качестве аргумента.

Теперь вы можете выполнять эти же основные шаги, чтобы включить в свой проект любой плагин PostCSS:

Установите плагин в свой проект с помощью: 

npm install <plugin_name> --save-dev

Определите переменную, чтобы загрузить плагин в свой файл Gulp, например: 

var autoprefixer = require('autoprefixer');

Добавьте название переменной в свой массив preprocessors.

В следующем уроке мы рассмотрим, как настроить проект PostCSS во втором крупнейшем таск-менеджера: Grunt. До встречи!

По материалам webdesign.tutsplus.com

Читайте также