Gulp group css media queries не работает

Адаптивная верстка с помощью SCSS и Gulp

Доброго времени суток, коллеги!

Давно задавался вопросом, как оптимизировать и сделать более удобным код используя @media screen . Ибо код

создает достаточно крупные файлы. Конечно, можно написать миксин вроде respond-to(tablet), его многие используют и выглядит он приятней и удобней чем выше описанный вариант, но основную проблему он не решает. В крупных проектах получим уйму @include и разобраться не то чтобы сложно, но приходится много карулесить по файлу, в поисках нужного класса или вложения.

И как же все таки получить читаемый, ну или как минимум файл в два или даже в три раза меньше? Такой вопрос я задавал себе, и пришел к ответу:

«Сделать возможным прописывать все разрешения в одну строку, т.е. не дублировать значения.»

В итоге должно получиться что-то вроде

где первое значение [1em] — для всех экранов, а второе [0.8em] для экранов меньше 1024px. Согласитесь, такой вариант значительно упрощает жизнь и уменьшает файл в разы, легко описывает правило для всех разрешений.

На первый вопрос ответ найден. А вот другой вопрос, как этого добиться? Первая мысль была написать модуль для Gulp, который бы переносил значения из [] в @media screen … Но такой вариант не очень хорош, так как во-первых, это достаточно сложный процесс. Нужно многое продумать, уметь делать не конфликтующие модули, в общем, в моем случае это проблематично. Во-вторых, такой синтаксис не воспримет ни один idea, и подобные выходки будут подчеркиваться красным, что тоже не есть хорошо.

Поэтому я решил что @mixin в Sass вариант подходящий, хоть и не такой изящный и читабельный как использование []. И так, вот что у меня получилось:

Тепер вызвать миксин можно таким образом:

Вроде бы как получили нужный результат, но так только кажется, без дополнительных модулей для Gulp не обошлось. Когда я описал несколько правил

в итоге получил не лучший CSS:

От дублирования @media screen only (max-width: 1024px) нужно как-то избавляться. Для этого я установил модуль для Gulp — gulp-group-css-media-queries, описание по установке здесь

Так намного лучше, но все равно не хорошо, так как каждое значение описывается повторно с новым элементом body. В решении этой проблемы мне помог модуль gulp-minify-css, описание здесь.

Получаем идеальный css используя минимум строк в Sass. Я использую Gulp+Sass, но для любителей Less+Webpack или Sass+Compass, или в любой другой связке, думаю не будет проблем переписать миксин и найти нужные модули.

Сам я сразу протестировал свой вариант на не столь крупном проекте, но все же править пришлось достаточно много, в результате я остался доволен процессом. Единственное что, не очень удобно, при использовании большого количества разрешений появляется такого рода код:

В таком случае по началу немного теряешься и не всегда понятно для какого экрана правишь, но это не было проблемой или неудобством для меня (открыл, проверил, поменял). В случае если у вас 2-3 разрешения, выглядеть все будет читабельно и лаконично, хоть и не привычно по началу.

Вывод

Данным миксином я добился желаемого результата, все варианты экранов в одну строку. Конечно код сыроват, и возмножно что-то подобное уже написанно кем-то куда лучше чем это сделал я, но я не нашел, может плохо искал. В любом случае буду рад услышать ваше мнение по данному методу. Может кто-то знает что-то по-лучше, или знает как приукрасить данный метод, пишите. Возможно я написал полную ересь, и вы никогда не будете исользовать данный метод потому что… В таком случае прошу обосновать почему, для меня важно понять насколько может быть полезен/бесполезен данный метод.

P.S.
Для тех кто решил опробовать, хочу уточнить что если вы используете сокращенные свойства типа маrgin: 0 auto; , тогда «0 auto» обязательно нужно взять в кавычки, иначе получите margin: 0;

Всем спасибо за внимание, и заранее за комментарии!

Источник

Error [ERR_REQUIRE_ESM]: Must use import to load ES Module?

История
Делал настройку gulp по видео уроку. По началу все прекрасно работало, но как дошел до установки плагина «imagemin» возникли проблемы. Установил плагин при помощи кода npm install —save-dev gulp-imagemin

Компилятор

Я так понял там какие то проблемы с модулем. То есть, должен быть «ES module, а у меня используется «CommonJS» (что бы это ни значило). На форумах прочитал создать еще один «package.json» в папке «src», и прописать там <"type": "module">. Но это не помогло.

• Вопрос задан 18 авг.
• 2332 просмотра

alexblackstone, а gulp-image так же ужимает размер файла ?
В плане задачи.

Поставил. Проверил. Работает.
Спасибо )

alexblackstone, Ух, эта сборка сделает седым.
При установке другого модуля «webpcss» далее.

Выдаёт новые приключения:

Error: Cannot find module ‘webp-converter/cwebp’
Require stack:
— G:\Different\Web\Andrikanych Evhen\fls-gulp\node_modules\webpcss\dist\WebpBase64.js
— G:\Different\Web\Andrikanych Evhen\fls-gulp\node_modules\webpcss\dist\Webpcss.js
— G:\Different\Web\Andrikanych Evhen\fls-gulp\node_modules\webpcss\dist\index.js
— G:\Different\Web\Andrikanych Evhen\fls-gulp\node_modules\gulp-webpcss\index.js
— G:\Different\Web\Andrikanych Evhen\fls-gulp\gulpfile.js
— C:\Users\Cobra\AppData\Roaming\npm\node_modules\gulp-cli\lib\shared\require-or-import.js
— C:\Users\Cobra\AppData\Roaming\npm\node_modules\gulp-cli\lib\versioned\^4.0.0\index.js
— C:\Users\Cobra\AppData\Roaming\npm\node_modules\gulp-cli\index.js
— C:\Users\Cobra\AppData\Roaming\npm\node_modules\gulp-cli\bin\gulp.js
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:962:15)
at Function.Module._load (internal/modules/cjs/loader.js:838:27)
at Module.require (internal/modules/cjs/loader.js:1022:19)
at require (internal/modules/cjs/helpers.js:72:18)
at Object. (G:\Different\Web\Andrikanych Evhen\fls-gulp\node_modules\webpcss\dist\WebpBase64.js:33:19)
at Module._compile (internal/modules/cjs/loader.js:1118:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1138:10)
at Module.load (internal/modules/cjs/loader.js:982:32)
at Function.Module._load (internal/modules/cjs/loader.js:875:14)
at Module.require (internal/modules/cjs/loader.js:1022:19) <
code: ‘MODULE_NOT_FOUND’,
requireStack: [
‘G:\\Different\\Web\\Andrikanych Evhen\\fls-gulp\\node_modules\\webpcss\\dist\\WebpBase64.js’,
‘G:\\Different\\Web\\Andrikanych Evhen\\fls-gulp\\node_modules\\webpcss\\dist\\Webpcss.js’,
‘G:\\Different\\Web\\Andrikanych Evhen\\fls-gulp\\node_modules\\webpcss\\dist\\index.js’,
‘G:\\Different\\Web\\Andrikanych Evhen\\fls-gulp\\node_modules\\gulp-webpcss\\index.js’,
‘G:\\Different\\Web\\Andrikanych Evhen\\fls-gulp\\gulpfile.js’,
‘C:\\Users\\Cobra\\AppData\\Roaming\\npm\\node_modules\\gulp-cli\\lib\\shared\\require-or-import.js’,
‘C:\\Users\\Cobra\\AppData\\Roaming\\npm\\node_modules\\gulp-cli\\lib\\versioned\\^4.0.0\\index.js’,
‘C:\\Users\\Cobra\\AppData\\Roaming\\npm\\node_modules\\gulp-cli\\index.js’,
‘C:\\Users\\Cobra\\AppData\\Roaming\\npm\\node_modules\\gulp-cli\\bin\\gulp.js’
]
>

Установил module ‘webp-converter’.
А вот как его применить не понимаю пока.

Источник

Что не так с gulp?

Начал устанавливать gulp по видео https://www.youtube.com/watch?v=stFOy0Noahg&t=1988s уже практически досмотрел но часто возникают ошибки.
Например:
Error: EPERM: operation not permitted, lstat ‘C:\Users\User\Desktop\fls-gulp\dist’
и после этого исчезает dist
Еще после установки плагина gulp-webp-html (в видео это на 58:30) при запуске gulp в открывшимся окне в браузере не показывается картинка в консоли пишет
Failed to load resource: the server responded with a status of 404 (Not Found)
хотя картинка есть.
Вот код gulpfile.js

• Вопрос задан 02 мая
• 111 просмотров

Привет, спасибо за помощь! А как это сделать?
Я попробовал переставить вот так:

но все равно ошибка:
PS C:\Users\User\Desktop\fls-gulp> gulp
[13:28:40] Using gulpfile

\Desktop\fls-gulp\gulpfile.js
[13:28:40] Starting ‘default’.
[13:28:40] Starting ‘watchFiles’.
[13:28:40] Starting ‘browserSync’.
[13:28:40] Starting ‘clean’.
[13:28:40] Finished ‘clean’ after 242 ms
[13:28:40] Starting ‘js’.
[13:28:40] Starting ‘css’.
[13:28:40] Starting ‘html’.
[13:28:40] Starting ‘images’.
[Browsersync] Access URLs:
—————————————
Local: localhost:3000
External: 192.168.0.103:3000
—————————————
UI: localhost:3001
UI External: localhost:3001
—————————————
[Browsersync] Serving files from: ./dist/
[13:28:40] ‘js’ errored after 298 ms
[13:28:40] Error: EPERM: operation not permitted, mkdir ‘C:\Users\User\Desktop\fls-gulp\dist\js’
[13:28:40] ‘default’ errored after 553 ms
И исчезает папка dist

Константин Вонотон, исправлять надо приоритет запуска задач, т.е. let watch и let build.
Примерно так.

Сначала очистка, затем сборка и только потом параллельный запуск сервера и отслеживания.

Источник

Каким плагином кроме gulp-sourcemaps можно генерировать sourcemaps?

Я не очень догоняю слово «поддерживает».

All plugins between sourcemaps.init() and sourcemaps.write() need to have support for gulp-sourcemaps. You can find a list of such plugins in the wiki.

Вот если не шарите в вопросе, зачем отвечаете?

Dmitry-W, У css-mqpacker есть траблы с сортировкой медиа-запросов. Он их сортирует по первому попавшему. То есть могут быть траблы, если у вас медиа-запросы не в одном файле.
Если он встретит в потоке первым запрос media (max-width: 575px), а потом только media (max-width: 1199px), то будет следующая картина:

Что естественно повлияет на работоспособность.

Однако есть решение. У самого плагина есть опция «sort» https://github.com/hail2u/node-css-mqpacker#sort,
но она поддерживает только запросы с min-width, а max-width обрабатывает по старому.
После поисков альтернативы css-mqpacker’у случайно наткнулся на

Пользовательский метод сортировки (mobile-first / desktop-first) для css-mqpacker или pleeease (который использует css-mqpacker) или, возможно, для чего-то еще ))

Собственно с помощью этого метода сортировки всё становится на свои места. Плюс автор русскоговорящий поэтому есть туториал на русском языке.

mqpacker к сожалению устарел, поэтому разработчик ремондует использовать плагин для postcss: https://github.com/solversgroup/postcss-sort-media. Устанавливаем его через npm, и прописываем в таске стилей:

Надеюсь кому — нибудь поможет.

Всё работает, уже проверено временем.
В любом случаи спасибо за альтернативное решение.

Источник

Gulp group css media queries не работает

Что такое gulp и зачем он нужен

Gulp — это инструмент, который помогает разработчикам автоматизировать рутинные задачи. Чаще всего gulp используется в frontend разработке для таких задач:

• Автоматическая перезагрузка браузера при сохранении файла
• Использование препроцессоров
• Оптимизация ресурсов таких как javascript, css, изображения
• Использование автопрефиксера
• Создание карт проекта
• Объединение нескольких файлов в один

Если вы внедрите в свою практику эту систему, вы значительно увеличите скорость вашей работы. Так же gulp откроет вам путь к новым возможностям, который значительно повысит ваш уровень знаний в веб-разработки.

Установка Gulp

Установка Gulp 4 довольно простая. Так как Gulp написан на языке javascript, изначально необходимо установить Node.js на вашу систему. Просто заходите на сайт https://nodejs.org, скачиваете инсталятор последний версии и устанавливаете.

Далее создаем папку для проекта в любом удобном месте компьютера и вызываем окно терминала в этом каталоге. В командной строке запускаем инициализацию проекта:

Отвечаем на вопросы на каждом шаге. После каждого ввода нажимаем Enter и переходим к следующему шагу. В результате получим файл package.json, который содержит информацию о проекте и установленных плагинах. Далее установим gulp в наш проект:

После установке Gulp 4 название пакета и его версия сохранятся в файле package.json. Флаг —save-dev используется для сохранения пакета в package.json в раздел devDependencies, то есть в целях разработки. Если установить пакет с флагом —save, то пакет попадает в раздел dependencies (для запуска приложения).

Такой подход дает возможность сохранять все пакеты в файле package.json со всеми зависимостями, а при разворачивании нового проекта достаточно скопировать файл package.json и запустить команду:

Таким образом все пакеты и зависимости установятся автоматически. После установки gulp в каталоге проекта создалась папка node_modules. Все новые установленные пакеты и зависимости сохраняются в данную папку. Поэтому изменять содержимое этого каталога нельзя.

Далее в каталоге проекта создаем файл gulpfile.js. Это самый основной файл, без которого Gulp работать не может. По сути в него можно писать любой javascript код, но gulp — это менеджер управления задачами, и эти задачи описываются в этом файле в виде обычных функций. Что бы запускать эти задачи, функцию нужно экспортировать через оператор exports. Пример:

На примере выше мы создали задачу под название testTask, в которой выводим строчку test. После этого мы экспортируем эту задачу. Что бы Gulp знал, что задача выполнена, мы вызываем функцию обратного вызова done.

Что бы запустить Gulp, можно установить отдельную утилиту глобально на вашу систему:

После этого в консоли вводим команду gulp и через пробел название задачи:

Но есть и альтернативный вариант. Можно передать дополнительные параметры командам запуска в файле package.json для раздела scripts:

В этом случае запускается задача так:

gulp — это значение с раздела scripts файла package.json, а test — название задачи. В итоге в консоле выведется слово test:

Задача по умолчанию (gulp default task)

Создадим в файле gulpfile.js задачу по умолчанию. Этот такс лучше всего представить, как точку входа в наш проект. Цель этой задачи — собрать и запустить таски в определенной последовательности, которые gulp должен выполнить по умолчанию. В нашем случае мы заменим таск test на default в функции экспорта:

Теперь для запуска проекта нам необходимо ввести:

Таким образом мы получим такой же результат, как и раньше, но при этом мы не указываем конкретный таск, а запускаем задачу по умолчанию.

Gulp parallel, gulp series

В Gulp существуют методы parallel и series для объединения задач в цепочки. Метод parallel запускает задачи одновременно в любой последовательности. Метод series — выполняет задачи одна за одной в указанном порядке:

На примере выше, задачи a и b запускаются параллельно. Только после завершения этих задач, запускаются таски c и d в паралельном режиме.

Gulp src, gulp dist, gulp pipe

Прежде чем приступать к практике, определимся еще с некоторыми базовыми понятиями. Ранее мы создали тестовый таск, который просто выводит значение в консоль. Но смысл gulp в том, чтобы выполнять рутинные задачи в процессе разработки. Другими словами — взять какой-то файл нашего проекта, выполнить определенные манипуляции с ним, и на выходе получить обновленный файл. Для того, чтобы указать входной файл, используется выражение gulp.src(‘source-file’), а исходящий — gulp.dest(‘dest-folder’). Давайте рассмотрим на примере:

Первой строчкой подключаем сам gulp в наш проект. Далее создаем таск, как мы делали это ранее. Указываем gulp что мы работаем с файлом test.js. После этого через метод pipe говорим gulp, что исходная папка называется output. Таким образом мы просто скопировали файл test.js в папку output.

Метод pipe — это основное API для gulp. Этот метод как бы объединяет все операции внутри таска. Через pipe можно выстроить неограниченную цепочку из операций для создания определенных сценариев.

Шаблоны путей к файлам

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

./input/*.js — выберет все файлы с расширением js в корне папки input

./input/**/*.js — выберет все файлы с расширением js в корне папки input и дочерних каталогах

!./input/test.js — исключает файл test.js из выборки

./input/*.+(js, css) — выберет файлы js и css

Так же, в качестве входных данных в gulp можно передавать массив с несколькими файлами или шаблонами:

На примере мы выбираем все файлы с расширением css, но исключаем файл test.css.

Gulp плагины

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

Ранее мы написали скрипт, который просто копирует файл в другую папку. Давайте усложним задачу: при копировании имя файла должно переименовывается. Для этого как раз и воспользуемся плагином, который называется gulp-rename. Для начала, установим этот плагин:

Любой плагин, как и npm модуль, устанавливается в папку node_modules, и попадает в файл package.json. Далее его нужно подключить в gulpfile.js, и через метод pipe вызвать необходимую операцию:

Таким образом, мы берем файл test.js, переименовываем его в testNew.js, и копируем в папку output.

Gulp сборка для верстки сайта. Стартовый шаблон

И так, мы установили Gulp, настроили окружение и можем переходить к созданию своей сборки для верстки сайта.

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

Режимы работы

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

В файле package.json в раздел scripts вносим некоторые изменения:

Для запуска сборки в режиме разработки необходимо ввести команду:

Для запуска в режиме продакшин:

Как видим выше, в режиме прод мы добавляем переменную окружения prod. Далее, чтобы определить в каком режиме мы работаем, необходимо установить плагин yargs:

Подключаем этот плагин в gulpfile.js:

Если запустить сборку в режиме дев, то значение переменной argv.prod будет равно undefined, а если в прод режиме, то true. Таким образом, если переменная argv.prod равна true, то мы работаем в прод режиме. Если не true, то дев режим.

Для удобства, создадим две функции, которые проверяют режим работы:

Файловая структура gulp сборки

Создадим базовую структуру файлов и папок. Это стандартная структура любого web проекта, которую можно поменять под свой вкус и потребности.

Рассмотрим предназначение каждой папки и файла:

• gulpfile.js — главный файл для настройки Gulp4
• package-lock.json — файл создается автоматически при изменении в node_modules
• package.json — файла-манифеста для проекта
• dist — в эту папку автоматически сохраняются все готовые файлы. Другими словами в этой папке содержится готовый проект
• src — в этом каталоге хранятся исходники проекта
• index.html — шаблон главной страницы
• assets — папка для активов, таких, как стили, скрипты, шрифты и др
• css — файлы для препроцессора CSS
• fonts — каталог для шрифтов
• img — папка для исходных изображений
• js — каталог для исходных скриптов

Это основная файловая структура сборки, но она будет меняться в ходе работы.

Давайте сразу добавим файл .gitignore в корень проекта со следующим содержимым:

Здесь мы скрываем каталоги dist и node_modules от систем контроль версий, так как они создаются автоматически.

Настройка путей

Создадим в корне проекта файл projectConfig.json. Это простой json файл, в него мы будем записывать различные настройки для нашей сборки. Для начала определим переменные для путей:

Мы определили переменную path, которая в свою очередь содержит два значения: настройки путей для исходников проекта и для готового результата. В конечном итоге мы можем изменять эти значения, что дает гибкость нашей gulp сборки. В процессе работы мы будем добавлять необходимые нам настройки.

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

Теперь можно обратится к переменной path и получить необходимые значения.

Browser sync gulp. Автоматическое обновление страницы в браузере

Browser sync — это очень полезный плагин. Он позволяет открыть страницы сайта, используя локальный сервер, и настроить автоматическую перезагрузку сайта. Установим плагин browsersync в наш проект:

В файле gulpfile.js добавим описание таска для плагина browsersync. На данном этапе файл gulpfile.js выглядит так:

Все как обычно: подключаем browserSync через require, описываем задачу для него, и запускаем таск по умолчанию. Теперь при запуске gulp автоматически откроется браузер. На данном этапе нам этого будет достаточно.

Gulp html

Для работы с html, будем использовать шаблонизатор nunjucks (подробнее почитать можно тут). Для начала определим структуру каталога и файлов для штмл файлов:

Рассмотрим подробнее файловую структуру:

• index.html — главная страница сайта
• _includes — каталог с подключаемыми файлами
• _header.html — верхняя часть сайта
• _footer.html — нижняя часть сайта
• _layouts — папка с шаблонами
• _default.html — основной шаблон

Нижний прочерк в названии файлов и папок говорит о том, что они подключаются в основной файл.

Далее зададим настройки путей для html в файле projectСonfig.json. В раздел src добавим массив со значением папки, где находятся штмл файлы, относительно каталога с исходниками проекта. Аналогично добавим значения для исходящего файла в раздел dist.

В gulpfile.js создадим массив путей для входных файлов:

В первой строке формируем путь к html файлам, которые нужно скомпилировать. Во второй запрещаем компилировать файлы, которые начинаются с нижнего прочерка. В третей и четвертой запрещаем компиляцию с папки assets и _html. В итоге получим такой массив:

Так же формируем переменную для папки с готовыми html файлами:

В результате получим такое значение:

И так, пути мы сформировали, теперь описываем задачу для html файлов:

Как видим, это обычная задача для gulp. В конце этого таска мы автоматически перезагружаем браузер.

Создадим общий каркас для всех страниц сайта в файле _default.html:

В файлах _header.html и _footer.html выведем верхнюю и нижнюю части сайта, которые мы подключаем к основному шаблону. _header.html:

В файле index.html находится основная часть главной страницы сайта:

На примере выше мы определили переменные title страницы и класса тега body. В процессе работы можно добавлять другие переменные и передавать их в основной шаблон. Далее мы указываем, что наследуем основной шаблон и в блоке content описываем контентную часть страницы.

Таким образом мы можем создавать общие html файлы для нашего проекта, подключать их в шаблон и менять содержимое в одном месте.

Теперь запустим на выполнение таск:

В результате получим такую страницу:

Как видим, все исходники скомпилировались в один файл index.html. Теперь можно создавать сколь угодно html файлов и все они будут собираться в папке dist.

Gulp watch. Отслеживаем изменения в файлах

В Gulp предусмотрен метод watch, с помощью которого можно отслеживать изменения в том или ином файле. Если мы, например, модифицировали наш файл index.html, то с помощью метода watch можно автоматически запустить тот или иной таск. Реализуем это в нашей сборке.

Для начала в переменной path определим свойство watch как пустой объект:

В ней укажем файлы, которые нужно отслеживать для сборки html:

То есть, мы отслеживаем все файлы в папке src. Создадим gulp tack для отслеживания изменений в файлах:

На примере выше мы создали обычный таск, в нем вызываем метод watch, в который передаем два параметра: какие фалы отслеживаем, и какой таск запускаем при модификации в этих файлах.

После этого изменим дефолтный таск:

Здесь сначала запускается таск njk, после этого в параллельном режиме запускаем локальный сервер и отслеживание в файлах.

Теперь при запуске дефолтного таска откроется главная страница на локальном сервере. При изменении в штмл файлах сайт обновляется автоматически уже с измененными данными.

Gulp scss. Работа со стилями

В качестве препроцессора для стилей будем использовать SASS в синтаксисе SCSS. В папке src/assets/css создадим файл app.scss. Это будет основной файл стилей.

В projectСonfig.json задаем настройки путей к файлам стилей. В разделе src добавляем:

В gulpfile.js задаем массив путей для файлов стилей:

В итоге получим:

• Входной файл: ./src/assets/css/app.scss
• Исходящая директория: ./dist/assets/css/
• Файлы для отслеживания: ./src/assets/css/**/*.scss

Сразу откроем наш основной шаблон _default.html и в раздел head добавим файл стилей, который будет называется app.min.css:

Далее добавляем нужные плагины для работы со стилями:

• sass — скрипт компиляции sass файлов
• gulp-sass — gulp плагин для sass
• gulp-sourcemaps — плагин для source maps, который позволяет в DevTools отслеживать стили в исходных файлах
• gulp-autoprefixer — плагин для расстановки префиксов
• gulp-csso — плагин для минификации css
• gulp-rename — плагин для переименования файлов
• gulp-group-css-media-queries — плагин для группировки медиа запросов в стилях
• gulp-if — плагин для создания условий в gulp файле

Подключаем все эти плагины:

Далее создаем gulp таск для CSS стилей:

Рассмотрим детально код выше. С помощью плагина gulpif мы проверяем в каком режиме мы работаем. Если в дев режиме, то мы инициализируем sourcemaps, выполняем компиляцию sass, сохраняем sourcemaps в конец файла, добавляем суффикс min к названию файла, сохраняем готовый файл и перезагружаем браузер. Таким образов, в папке dist/css создастся файл app.min.css. Несмотря на то, что мы добавили суффикс min, стили в нем не сжаты и добавлены sourcemaps для удобства разработки.

В прод режиме нам нужно оптимизировать стили и подготовить для боевых условий. После компиляции SASS добавляются префиксы, группируются медиа запросы (gulp group css media queries). Далее мы сохраняем несжатый файл стилей в папку dist/css. Этот файл называется app.css и он не будет подключен к сайту. Сделано это для удобства, что бы рядом со сжатым файлом был оригинальный файл стилей. Далее мы минифицируем стили, добавляем суффикс min, сохраняем и перегружаем браузер. В итоге получим файл app.min.css, который оптимизирован и подключен к проекту.

Теперь нужно немного настроить автопрефиксер, указать какие браузеры нужно поддерживать. Это можно сделать, добавив в файл package.json специальное свойство browserslist в конец файла:

Добавим отслеживание изменения в файлах стиле в таске watch:

Так же скорректируем таск по умолчанию:

Теперь можно запустить сборку. И если мы все правильно сделали, то все стили должны применятся на сайте, и при модификации любого scss файла в пвпке ./src/assets/css/, браузер будет перегружаться автоматически.

Gulp и webpack. Работа со скриптами

Для работы с js скриптами мы будем использовать webpack. Webpack — это популярный и гибкий сборщик модулей для javascript. Он умеет решать великое множество задач, как простых, так и сложных. Это полноценный и самостоятельный инструмент, с большим количеством дополнений. Но в нашей сборке мы попробуем подружить webpack и gulp. Для этого будем использовать gulp плагин webpack-stream.

И так, как обычно, в файле projectСonfig.json зададим настройки путей для скриптов. Раздел src:

Как видим, исходный файл находится по пути src/assets/js/app.js, а компилироваться скрипты будут в папку dist/ assets/js/.

В gulpfile.js задаем массивы с путями:

В итоге получаем:

• Входящий файл: ./src/assets/js/app.js
• Исходящая директория: ./dist/assets/js/
• Файлы для отслеживания: ./src/assets/js/**/*.js

После этого устанавливаем нужные плагины:

Рассмотрим каждый плагин:

• webpack-stream — gulp плагин для работы с webpack
• webpack — сам бандлер
• gulp-plumber — специальный gulp плагин для отслеживания ошибок
• gulp-uglify — плагин для сжатия скриптов
• babel-loader, @babel/core, @babel/preset-env — набор плагинов для совместимости для старых браузеров

Описываем таск для работы со скриптами. Для начала создаем объект для конфигурации webpack:

Здесь определяем в каком режиме работаем, включаем source maps в dev режиме и задаем исходящий файл app.js.

Далее подключаем babel в прод режиме:

На этом не будем подробно останавливается, единственное что еще нужно — это создать файл .babelrc с таким содержимым:

И наконец, создаем сам таск:

Здесь все подобно, как и с таском со стилями. Включаем отображение ошибок, запускаем webpack, сжимаем файл в прод режиме, добавляем суффикс min и перегружаем браузер.

Добавим файлы для отслеживания в функцию watch:

Далее изменяем таск по умолчанию:

Создаем файл app.js. Подключаем в шаблоне _default.html файл app.min.js перед закрывающимся тегом body:

На этом настройка gulp задачи для работы со скриптами закончена.

Gulp imagemin. Сжатие изображений

Далее мы реализуем возможность для работы с изображениями с помощью плагина imagemin. Этот плагин предназначен для сжатия и оптимизации изображений различных форматов.

Зададим настройки для путей к изображениям. В раздел src добавим:

Создаем массивы настроек в gulpfile.js:

Получаем такой массив:

• Входящие файлы: ./src/assets/img/**/*.*, !./src/assets/img/svgIcons/*.svg
• Исходящая директория: ./dist/assets/img/
• Файлы для отслеживания: ./src/assets/img/**/*.*, !./src/assets/img/svgIcons/*.svg

Здесь мы исключаем папку svgIcons, которая предназначена для генерации svg спрайтов. К этому мы вернемся чуть позже. Устанавливаем необходимые плагины:

Рассмотрим каждый плагин:

• gulp-newer — запускают задачи только для тех файлов, которые изменились
• gulp-imagemin — плагин для сжатия изображений
• imagemin-jpeg-recompress — плагин для оптимизации jpeg изображений
• imagemin-pngquant — плагин для оптимизации png изображений

Создаем таск для сжатия изображений:

Gulp webp. Конвертация изображений в webp формат

Далее создадим таск, который конвертирует все изображение в webp формат. Это делается с целью оптимизации скорости загрузки сайта. Для этого установим плагин gulp-webp:

Подключим этот плагин:

Создаем таск для конвертации изображений в webp:

В этом таске в качестве входных файлов мы берем изображения в папке dist/img, преобразовываем в webp формат и сохраняем в эту же папку.

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

Далее изменяем таск по умолчанию:

Также установим отслеживание за изображениями в исходной папке:

Gulp fonts. Работа со шрифтами

Следующая возможность, которую хотелось бы реализовать в нашей сборке — это работа со шрифтами. На сегодняшний день самыми популярными форматами шрифтов являются woff2 и woff. Именно их и нужно подключать в CSS стилях. Для начала определим пути для работы со шрифтами в файле projectСonfig.json. Раздел src:

Определяем массив для настройки путей шрифтов:

• Входящий файл: ./src/assets/fonts/**/*.*, !./src/assets/fonts/src/*.*
• Исходящая директория: ./dist/assets/fonts/
• Файлы для отслеживания: ./src/assets/fonts/**/*.*, !./src/assets/fonts/src/*.*

Как видим, исходные шрифты будут копироваться с папки ./src/assets/fonts/ в каталог ./dist/assets/fonts/. Так же мы исключили каталог src в папке с исходными шрифтами.

Очень часто возникает задача сконвертировать шрифты устаревших форматов в современные. Эта задача довольно скучная, поэтому мы автоматизируем конвертацию с помощью gulp. Именно в папке src будут сохранятся шрифты старых форматов, а преобразовывать их будем в форматы woff2 и woff и сохранять в папку с исходными шрифтами.

Для начала создадим задачу, которая конвертирует шрифт ttf в woff2 и woff. Нам понадобятся два плагина: gulp-ttf2woff2 и gulp-ttf2woff. Устанавливаем их:

Подключаем эти плагины:

Дале описываем таски для преобразования шрифтов:

Обедняем эти таски, выполнив один за одним:

После этого экспортируем функцию:

И так, чтобы шрифты с расширением ttf конвертировать в woff2 и woff, необходимо ввести команду:

После этой команды все ttf шрифты c каталога src преобразуются в современные форматы и скопируются в папку /src/assets/fonts.

Теперь реализуем конвертацию с формата otf. Для этого мы сначала преобразуем формат otf в ttf, сохраним в папку src, ну а далее, как на примере выше конвертируем в нужные форматы. Для этого понадобится плагин fonter. Устанавливаем его:

Описываем таск для конвертации:

Вносим изменения в значение fontsConvert:

Таким образом все шрифты в формате otf и ttf преобразуются в нужные форматы. Далее создадим таск, который скопирует эти шрифты в папку dist:

Отредактируем таск по умолчанию:

Настроем отслеживание за файлами в папке со шрифтами:

Таким образом, при изменении файлов в каталоге src/assets/fonts (либо вручную, либо в результате конвертации), запускается таск font, который скопирует шрифты в папку dist/assets/fonts.

Gulp clean. Очистка папки dist

Создадим простой таск, который очищает папку dist. Запускать мы его будем каждый раз при запуске нашей сборки. Для этого подключим npm плагин del:

Создаем таск clean:

В дефолтном таске вызываем очистку перед всеми остальными задачами:

Результат

На этом пока все. Мы разобрали основы работы с Gulp 4, рассмотрели примеры использования, создали свою сборку для верстки сайта. В дальнейших статьях мы будем ее дополнять и модифицировать. Посмотреть и скачать исходники сборки можно с репозитория.

Источник