PostCSS быстро набирает популярность в течение некоторого времени. Если вы еще не использовали его или не знаете, что такое PostCSS, то я предлагаю вам взглянуть на это вводное руководство по PostCSS , в котором рассматриваются основы PostCSS, включая способы установки и запуска PostCSS, а также краткий обзор некоторых плагинов.
В этом уроке я покажу вам, как использовать PostCSS с Gulp , популярным инструментом автоматизации. Поскольку это не вводный урок по Gulp, я не буду раскрывать основы Gulp. Но для быстрого освежения, вы можете проверить эту прекрасную статью .
Настройка проекта
Перед началом этого урока у вас должна быть папка проекта, в которой вы будете работать. В этой папке должен быть установлен Gulp и две папки с именами «начальная» и «конечная» (или другое имя по вашему выбору). Папка с именем «initial» будет содержать ваш необработанный и необработанный код CSS. В «последней» папке будут находиться обработанные файлы, готовые к использованию.
Прежде чем идти дальше, перейдите в папку вашего проекта с помощью терминала и выполните следующую команду:
npminstall gulp-postcss --save-dev
Флаг --save-dev добавляет плагин, который вы устанавливаете, в файл project.json в качестве зависимости. Это будет полезно в ситуациях, когда вам нужно сотрудничать с другими в проекте. Когда другие члены команды запускают команду npm install для вашего пакета, все плагины будут установлены автоматически.
На этом этапе ваша структура папок должна быть:
Initial — папка с вашими необработанными CSS-файлами.
style.css — необработанная таблица стилей, которую мы будем редактировать позже.
final — папка с обработанными CSS-файлами.
node_modules — папка со всеми модулями npm.
gulp — создается при установке Gulp.
gulp-postcss — создается после запуска вышеуказанной команды.
guplfile.js — Ваш файл Gulp.
package.json — Ваш файл package.json.
Установка плагина
Давайте установим базовый плагин, чтобы начать. Плагин, который мы собираемся использовать, имеет короткий цвет . Это в основном расширяет существующее свойство цвета, чтобы также установить цвет фона, используя второе значение. Выполните следующую команду, чтобы установить short-color .
npminstall postcss-short-color --save-dev
Вы также можете установить одновременно gulp-postcss и postcss-short-color используя:
После установки обоих плагинов вам нужно открыть и отредактировать файл gulpfile.js чтобы вы могли начать работать с плагином. Мы начнем с включения следующих строк для включения обоих плагинов:
var gulp =require('gulp');var postcss =require('gulp-postcss');var shortColor =require('postcss-short-color');
Теперь давайте настроим задачу Gulp для обработки нашего необработанного CSS-файла и создания готовой таблицы стилей. Вот код для этого:
Я начинаю с создания задачи под названием css . Это имя должно использоваться всякий раз, когда вы хотите запустить соответствующую функцию. Вы можете указать файлы, которые вы хотите обработать внутри gulp.src() . Использование *.css обработает все CSS-файлы в «начальной» папке.
Далее мы используем функцию pipe() для вызова всех наших плагинов. Для этого мы передаем все плагины в качестве аргумента функции postcss() . В нашем базовом примере у нас фактически есть только один плагин для прохождения. Я покажу вам, как передать несколько плагинов в качестве аргументов в следующем разделе. После gulp.dest() плагина, gulp.dest() используется, чтобы установить место назначения обработанных файлов.
Чтобы проверить, все ли настроено правильно, создайте файл style.css внутри «начальной» папки.style.css будет иметь следующий CSS:
section{color: white black;}
Далее вам нужно запустить команду gulp css внутри вашего терминала. На этом этапе, если вы загляните в «конечную» папку, вы должны увидеть файл style.css со следующим CSS:
section{color: white;background-color: black;}
Если CSS в вашей таблице стилей соответствует CSS выше, то мы можем предположить, что все работает.
Установка нескольких плагинов
Просто использование одного базового плагина не поможет вам с производительностью. PostCSS имеет много впечатляющих и невероятно полезных плагинов, поэтому в большинстве случаев вы будете использовать более одного. В этом разделе я покажу вам, как работать с несколькими плагинами одновременно.
Теперь давайте посмотрим, как мы можем установить эти плагины, а затем использовать их для преобразования наших таблиц стилей. Запустите следующую команду в каталоге проекта:
Мы должны будем изменить нашу задачу Gulp, чтобы включить все эти плагины. Вместо того, чтобы пилить все эти плагины по одному, мы будем хранить их в массиве для простоты обслуживания и краткости. Вот код для нашего gulpfile.js :
Вы могли заметить, что я указал некоторые параметры для плагина Autoprefixer. Эти параметры определяют CSS, который выводит Autoprefixer. В этом случае я говорю плагину для поддержки всех браузеров с более чем 1% глобального использования. Я также отключил каскадирование, чтобы все префиксные и нефиксированные свойства были выровнены по левому краю. Подобные опции также доступны для большинства других плагинов.
Чтобы проверить, все ли работает, поместите следующий CSS в вашу таблицу стилей:
Пример в последнем разделе достаточно ясно продемонстрировал полезность PostCSS. Вся мощь PostCSS заключается в его плагинах. Однако при использовании нескольких плагинов, которые вы в конечном итоге будете использовать в сложных проектах, следует помнить один порядок их выполнения.
Рассмотрим два плагина rgba-fallback и color-function . rgba-fallback преобразует цвет RGBA в шестнадцатеричный формат, а функция color преобразует функцию color() CSS в более совместимый CSS. Допустим, у вас есть следующий CSS:
body{background:color(orange a(90%));}
Если вы должны были запустить плагин rgba-fallback перед плагином color-function, вот так:
var plugins =[ rgbafallback, colorfunction ];
Вы получите следующий CSS:
body{background:rgba(255, 165, 0, 0.9);}
Как видите, в обработанном CSS нет отступления от RGBA. Причиной этой аномалии является то, что при запуске резервного модуля он находит color(orange a(90%)) и не знает, что с ним делать. Позже плагин цветовой функции выполняется и создает значение цвета RGBA из исходной цветовой функции.
Если вам нужно изменить порядок плагинов и запустить их в следующей последовательности:
На этот раз плагин цвета сначала преобразует цвет фона в значение RGBA, а плагин резервирования позже добавляет шестнадцатеричный откат.
Вывод
В этом уроке я рассмотрел основы совместного использования Gulp и PostCSS. С правильной комбинацией плагинов и эффективным использованием Gulp вы можете сэкономить много часов разработки и избежать ненужной головной боли. Если у вас есть какие-либо вопросы или предложения по методам, упомянутым в этом руководстве, дайте мне знать в комментариях!
