Эта статья является частью серии о Стартовом проекте, и на этот раз я расскажу все о задачах 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.