PostCSS быстро набирает популярность в течение некоторого времени. Если вы еще не использовали его или не знаете, что такое PostCSS, то я предлагаю вам взглянуть на это вводное руководство по PostCSS , в котором рассматриваются основы PostCSS, включая способы установки и запуска PostCSS, а также краткий обзор некоторых плагинов.
В этом уроке я покажу вам, как использовать PostCSS с Gulp , популярным инструментом автоматизации. Поскольку это не вводный урок по Gulp, я не буду раскрывать основы Gulp. Но для быстрого освежения, вы можете проверить эту прекрасную статью .
Настройка проекта
Перед началом этого урока у вас должна быть папка проекта, в которой вы будете работать. В этой папке должен быть установлен Gulp и две папки с именами «начальная» и «конечная» (или другое имя по вашему выбору). Папка с именем «initial» будет содержать ваш необработанный и необработанный код CSS. В «последней» папке будут находиться обработанные файлы, готовые к использованию.
Прежде чем идти дальше, перейдите в папку вашего проекта с помощью терминала и выполните следующую команду:
npm install 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 .
npm install postcss-short-color --save-dev
Вы также можете установить одновременно gulp-postcss и postcss-short-color используя:
npm install gulp-postcss postcss-short-color --save-dev
После установки обоих плагинов вам нужно открыть и отредактировать файл gulpfile.js чтобы вы могли начать работать с плагином. Мы начнем с включения следующих строк для включения обоих плагинов:
var gulp = require('gulp'); var postcss = require('gulp-postcss'); var shortColor = require('postcss-short-color');
Теперь давайте настроим задачу Gulp для обработки нашего необработанного CSS-файла и создания готовой таблицы стилей. Вот код для этого:
gulp.task('css', function () { return gulp.src('initial/*.css') .pipe(postcss([shortColor])) .pipe(gulp.dest('final')); });
Я начинаю с создания задачи под названием 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 имеет много впечатляющих и невероятно полезных плагинов, поэтому в большинстве случаев вы будете использовать более одного. В этом разделе я покажу вам, как работать с несколькими плагинами одновременно.
Вам могут пригодиться три плагина / пакета PostCSS: short , cssnext и autoprefixer .
short позволит вам написать сокращенный CSS для многих свойств. Например:
.heading { font-size: 1.25em 2; }
станет:
.heading { font-size: 1.25em; line-height: 2; }
cssnext позволяет использовать новейший синтаксис CSS в ваших таблицах стилей. Например, следующий CSS:
.link { color: color(green alpha(-10%)); }
преобразуется в:
.link { background: rgba(0, 255, 0, 0.9); }
Наконец, autoprefixer добавит префиксы вендора в ваш CSS и преобразует:
img { filter: grayscale(0.9); }
чтобы:
img { -webkit-filter: grayscale(0.9); filter: grayscale(0.9); }
Теперь давайте посмотрим, как мы можем установить эти плагины, а затем использовать их для преобразования наших таблиц стилей. Запустите следующую команду в каталоге проекта:
npm install autoprefixer postcss-short postcss-cssnext --save-dev
Мы должны будем изменить нашу задачу Gulp, чтобы включить все эти плагины. Вместо того, чтобы пилить все эти плагины по одному, мы будем хранить их в массиве для простоты обслуживания и краткости. Вот код для нашего gulpfile.js :
var gulp = require('gulp'); var postcss = require('gulp-postcss'); var autoprefixer = require('autoprefixer'); var cssnext = require('postcss-cssnext'); var shortcss = require('postcss-short'); gulp.task('css', function() { var plugins = [ shortcss, cssnext, autoprefixer({browsers: ['> 1%'], cascade: false}) ]; return gulp.src('initial/*.css') .pipe(postcss(plugins)) .pipe(gulp.dest('final')); });
Вы могли заметить, что я указал некоторые параметры для плагина Autoprefixer. Эти параметры определяют CSS, который выводит Autoprefixer. В этом случае я говорю плагину для поддержки всех браузеров с более чем 1% глобального использования. Я также отключил каскадирование, чтобы все префиксные и нефиксированные свойства были выровнены по левому краю. Подобные опции также доступны для большинства других плагинов.
Чтобы проверить, все ли работает, поместите следующий CSS в вашу таблицу стилей:
.prefix-filter { display: flex; } .cssshort-section { text: #333 bold justify uppercase 1.25em 1.7 .05em; } .cssnext-link { color: color(blue alpha(-10%)); } .cssnext-link:hover { color: color(orange blackness(80%)); }
Если вы сейчас запустите gulp css в терминале, вы должны получить следующий обработанный CSS внутри style.css в папке «final».
.prefix-filter { display: -webkit-box; display: flex; } .cssshort-section { color: #333; font-weight: 700; text-align: justify; text-transform: uppercase; font-size: 1.25em; line-height: 1.7; letter-spacing: .05em; } .cssnext-link { color: #0000ff; color: rgba(0, 0, 255, 0.9); } .cssnext-link:hover { color: rgb(51, 33, 0); }
Порядок исполнения плагинов
Пример в последнем разделе достаточно ясно продемонстрировал полезность 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 из исходной цветовой функции.
Если вам нужно изменить порядок плагинов и запустить их в следующей последовательности:
var plugins = [ colorfunction, rgbafallback ];
Окончательный CSS будет:
body { background: #ffa500; background: rgba(255, 165, 0, 0.9) }
На этот раз плагин цвета сначала преобразует цвет фона в значение RGBA, а плагин резервирования позже добавляет шестнадцатеричный откат.
Вывод
В этом уроке я рассмотрел основы совместного использования Gulp и PostCSS. С правильной комбинацией плагинов и эффективным использованием Gulp вы можете сэкономить много часов разработки и избежать ненужной головной боли. Если у вас есть какие-либо вопросы или предложения по методам, упомянутым в этом руководстве, дайте мне знать в комментариях!