Работа со стилями

Используемые решения:

1. gulp-sass сборка SASS/SCSS
2. sass необходим для сборки SASS/SCSS
3. gulp-less сборка LESS
4. gulp-autoprefixer автоматически добавляет вендорные префиксы к CSS свойствам
5. gulp-clean-css сжатие CSS
6. gulp-concat объеденение скриптов

Давайте установим плагины одной командой:

npm i --save-dev gulp-sass sass gulp-less gulp-autoprefixer gulp-clean-css gulp-concat

Для начала определим константы и переменную в gulpfile.js:

gulpfile.js// Определяем переменную "preprocessor", для выбора препроцессора в проекте - sass, less, scss
let preprocessor = 'sass'; 
// определяем константы Gulp
const { src, dest, parallel, series, watch } = require("gulp");
// подключаем модули gulp-sass и gulp-less
const sass = require('gulp-sass')(require('sass'));
const scss = require("gulp-sass")(require("sass"));
const less = require('gulp-less');
// подключаем Autoprefixer
const autoprefixer = require('gulp-autoprefixer');
// подключаем модуль gulp-clean-css
const cleancss = require('gulp-clean-css');
// подключаем gulp-concat
const concat = require('gulp-concat');

Теперь создадим функцию styles(), которая будет обрабатывать стили проекта, конкатенировать и сжимать. Обратите внимание, что мы используем наименование функции styles():

gulpfile.js// определяем логику обработки стилей
function styles() {
  return (
    // выбираем источник: "app/sass/style.sass" или "app/less/style.less" или "app/scss/style.scss"
    src("app/" + preprocessor + "/style." + preprocessor + "")
      // преобразуем значение переменной "preprocessor" в функцию
      .pipe(eval(preprocessor)())
      // конкатенируем в файл app.min.js
      .pipe(concat("app.min.css"))
      // создадим префиксы с помощью Autoprefixer
      .pipe(autoprefixer({ overrideBrowserslist: ["last 10 versions"], grid: true }))
      // минифицируем стили
      .pipe(cleancss({ level: { 1: { specialComments: 0 } } /* , format: 'beautify' */ }))
      // выгрузим результат в папку "app/css/"
      .pipe(dest("app/css/"))
  );
}

• Выбираем источники. Обратите внимание, что здесь используется переменная, которую мы определили в начале файла preprocessor. В зависимости от значения этой переменной, мы будем брать файл
• С помощью функции eval() преобразуем значение переменной preprocessor в наименование функции
• Выгрузим содержимое в новый виртуальный файл с именем app.min.css. Обратите внмиание, что gulp-concat можно использовать не только для того, чтобы собирать несколько файлов в один, но и для того, чтобы просто задать имя результирующего файла, как это происходит в данном случае
• Создание префиксов для лучшей совместимости со старыми браузерами. Здесь мы используем установленный и подключенный ранее модуль gulp-autoprefixer. Параметр overrideBrowserslist задается для определения глубины версий от текущей. В нашем случае, префиксы будут раздаваться старым браузерам последних 10-ти версий. Параметр grid: true отвечает за создание префиксов CSS Grid для браузеров Internet Explorer
• Форматирование или максимальное сжатие результирующего CSS файла. Параметр level: { 1: { specialComments: 0 } } позволяет максимально сжать CSS код в одну строку. Также мы видим закомментированный параметр format: 'beautify'. Если мы его раскомментируем, на выходе мы получим не максимально сжатый CSS код, а наоборот, развернутый и читаемый
• Выгружаем результирующий файл app.min.css в папку app/css/

Для того, чтобы получить готовый к запуску таск, функцию или комбинацию функций необходимо экспортировать, далее допишем:

gulpfile.js// экспортируем функцию styles() в таск styles, значение после знака = это имеющаяся функция
exports.styles = styles;

Запускаем таск командой:

gulp styles

Запуск в автоматическом режиме

Давайте сделаем так, чтобы при сохранении стилей, происходило автоматическое обновление итогового файла. Для этого создадим новую функцию startwatch(), которая запустит наблюдение за изменениями файлов. Данную функию позже мы добавим в дефолтный экспорт для запуска вотчинга при старте:

gulpfile.js// автозапуск
function startwatch() {
  // мониторим все файлы стилей в проекте и вызываем функцию styles(), если есть изменения
  watch("app/**/" + preprocessor + "/**/*", styles);
}

Для того, чтобы наша функция startwatch() заработала и начала выполнять полезную работу, ее необходимо добавить в дефолтный экспорт:

gulpfile.js// экспортируем дефолтный таск с нужным набором функций
exports.default = parallel(startwatch);

Полный gulpfile.js

// определяем переменную "preprocessor"
let preprocessor = "scss"; // Выбор препроцессора в проекте - sass или less или scss
// определяем константы Gulp
const { src, dest, parallel, series, watch } = require("gulp");
// подключаем модули gulp-sass и gulp-less
const sass = require("gulp-sass")(require("sass"));
const scss = require("gulp-sass")(require("sass"));
const less = require("gulp-less");
// подключаем Autoprefixer
const autoprefixer = require("gulp-autoprefixer");
// подключаем модуль gulp-clean-css
const cleancss = require("gulp-clean-css");
// подключаем gulp-concat
const concat = require("gulp-concat");
// автозапуск
function startwatch() {
  // мониторим все файлы стилей в проекте и вызываем функцию styles(), если есть изменения
  watch("app/**/" + preprocessor + "/**/*", styles);
}
// определяем логику обработки стилей
function styles() {
  return (
    // выбираем источник: "app/sass/style.sass" или "app/less/style.less" или "app/scss/style.scss"
    src("app/" + preprocessor + "/style." + preprocessor + "")
      // преобразуем значение переменной "preprocessor" в функцию
      .pipe(eval(preprocessor)())
      // конкатенируем в файл app.min.js
      .pipe(concat("app.min.css"))
      // создадим префиксы с помощью Autoprefixer
      .pipe(autoprefixer({ overrideBrowserslist: ["last 10 versions"], grid: true }))
      // минифицируем стили
      .pipe(cleancss({ level: { 1: { specialComments: 0 } } /* , format: 'beautify' */ }))
      // выгрузим результат в папку "app/css/"
      .pipe(dest("app/css/"))
  );
}
// экспортируем функцию styles() в таск styles, значение после знака = это имеющаяся функция
exports.styles = styles;
// экспортируем дефолтный таск с нужным набором функций, значение после знака = это имеющаяся функция
exports.default = parallel(startwatch);

Запускаем таск командой:

gulp