Эта статья является частью серии о Стартовом проекте, и на этот раз я расскажу все о задачах Gulp для CSS.
Настройки
Идея Starter Project состоит в том, чтобы иметь один файл конфигурации для всех задач Gulp. Если вы откроете файл config.json
, вы увидите раздел для CSS.
Первый вариант run
. Если установлено значение true, будут выполняться задачи CSS Gulp. Есть еще три обязательных параметра для CSS:
src
- путь к папке с файлами Sass,dest
- путь к папке, в которой будут сохраняться скомпилированные файлы CSS, иclean
- путь к папке, которая будет очищена перед выполнением Gulp (почти всегда совпадает с параметромdest
).
Всем путям предшествует глобальный путь root
.
Другие параметры предназначены для gulp-cssimport, gulp-autoprefixer, gulp-rename и gulp-sourcemaps.
Сасс
Starter Project использует Sass в качестве препроцессора для CSS. Как говорится на официальном сайте, Sass — это CSS со сверхспособностями. Значительное число разработчиков являются сторонниками и пользователями этой надежной программы. Он имеет полезные функции, такие как переменные, функции и миксины.
CSS со сверхспособностями.
Starter Project использует плагин gulp-sass для компиляции Sass в CSS.
Импорт
gulp-cssimport — это плагин, который позволяет импортировать связанные файлы, включая содержимое в файл CSS. Это означает, что вы не можете использовать нативную реализацию CSS @import
, но в большинстве случаев это считается плохой практикой.
Чтобы использовать этот плагин, добавьте оператор @import
в файл Sass.
// Plugins @import ‘normalize’; @import ‘modularscale’; @import ‘mq’; // Configuration @import ‘variables’; @import ‘fonts’; @import ‘locks’; @import ‘helpers’; @import ‘typography’; @import ‘theme’;
Вы можете добавить опцию includePaths
в настройки sassConfig
, чтобы избежать записи полных путей к включенным библиотекам.
“sassConfig”: { “includePaths”: [ “./node_modules/modularscale-sass/stylesheets/”, “./node_modules/sass-mq/”, “./node_modules/normalize.css/”, “./src/scss/”, “./src/scss/components” ] },
Sass-библиотеки
В Starter Project импортированы три библиотеки:
- нормализовать.css,
- Модульная шкала и
- Медиа-запросы.
@import ‘normalize’; @import ‘modularscale’; @import ‘mq’;
Если ваш веб-сайт выглядит непоследовательно в разных браузерах, вы, вероятно, захотите использовать технику CSS для изменения поведения браузера. В Starter Project для этой задачи используется Normalize.css.
Normalize.css позволяет браузерам отображать все элементы более последовательно и в соответствии с современными стандартами. Он нацелен только на те стили, которые нуждаются в нормализации.
Николас Галлахер
Модульная шкала помогает с согласованностью размера шрифта. modularscale-sass — это список значений, которые используются для определения размера шрифта и создания ощущения гармонии в дизайне.
sass-mq — это миксин Sass, который помогает разработчику элегантно составлять медиа-запросы.
Автопрефикс
Starter Project использует плагин gulp-autoprefixer для добавления префиксов поставщиков в файлы CSS. Этот плагин удобен тем, что разработчикам не нужно добавлять эти префиксы вручную. В config.json
можно было добавить Параметры автопрефиксера в autoprefixedConfig
настройки.
“autoprefixedConfig”: { “browsers”: [“last 5 versions”], “cascade”: false },
Исходные карты
Карты исходного кода позволяют разработчикам видеть исходный код сжатых ресурсов. В Starter Project плагин gulp-sourcemaps используется для создания исходных карт для файлов CSS и JavaScript. Если ваша среда не требует исходных карт, вы можете отключить ее, установив для параметра run
значение false
в sourcemapsConfig
.
“sourcemapsConfig”: { “run”: true }
Минификация
gulp-clean-css — это плагин Gulp, который действует как оболочка для clean-css. В Starter Project этот плагин используется для минимизации CSS. Чтобы избежать путаницы с именами файлов, плагин gulp-rename
используется для переименования минифицированных ресурсов путем добавления префикса или суффикса к имени файла.
“renameConfig”: { “suffix”: “.min” }
Линтинг
Линтинг — это процесс запуска программы, которая анализирует код на наличие потенциальных ошибок.
Источник: StackOverflow
В Starter Project для линтинга файлов CSS используется плагин gulp-stylelint. Вы можете настроить плагин в файле config.json
.
“styleLintConfig”: { “reporters”: [{ “formatter”: “string”, “console”: true }] },
Настройки по умолчанию выводят ошибку в консоль в виде строки. Все доступные настройки смотрите здесь.
Параметры Stylelint хранятся в файле .stylelintrc
.
{ “plugins”: [ “stylelint-scss”, “stylelint-order” ], “extends”: “stylelint-config-sass-guidelines” }
Stylelint также имеет свои плагины. В Starter Project используются плагины stylelint-scss и stylelint-order. Кроме того, существуют Руководящие принципы Stylelint Sass, которые используются для расширения настроек Stylelint по умолчанию. Узнайте больше о Stylelint на официальном сайте.
Бонус
Вот совет для всех пользователей VS Code, как использовать Stylelint внутри редактора. Сначала установите расширения stylefmt и Run On Save для VS Code. Затем вызовите командную палитру, нажав cmd + shift + p
, и введите open workspace settings
.
Когда вы откроете настройки рабочей области, добавьте эти настройки.
{ “emeraldwalk.runonsave”: { “commands”: [{ “match”: “\\.scss?$”, “cmd”: “cd ${workspaceRoot} && stylefmt -c .stylelintrc ${file}” }] } }
Это должно запускать stylelint при сохранении .scss
файлов. Если не получится, свяжись со мной за помощью.
Вывод
В предыдущей статье я пытался объяснить идею этого проекта. Эта статья должна помочь вам понять, как можно использовать Gulp для оптимизации, анализа и обеспечения наилучшего вывода CSS.
Стартовый проект задуман как шаблон с последними передовыми практиками для достижения наилучшего результата. Если у вас есть идея или предложение, как сделать этот проект лучше и интереснее, пожалуйста, свяжитесь со мной, откройте вопрос или создайте запрос на включение на GitHub.
Поделись, пожалуйста! 🙏
Первоначально опубликовано на www.silvestarbistrovic.from.hr.