gulp group css media queries что делает
Адаптивная верстка с помощью SCSS и Gulp
Доброго времени суток, коллеги!
создает достаточно крупные файлы. Конечно, можно написать миксин вроде 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 разрешения, выглядеть все будет читабельно и лаконично, хоть и не привычно по началу.
Вывод
Данным миксином я добился желаемого результата, все варианты экранов в одну строку. Конечно код сыроват, и возмножно что-то подобное уже написанно кем-то куда лучше чем это сделал я, но я не нашел, может плохо искал. В любом случае буду рад услышать ваше мнение по данному методу. Может кто-то знает что-то по-лучше, или знает как приукрасить данный метод, пишите. Возможно я написал полную ересь, и вы никогда не будете исользовать данный метод потому что… В таком случае прошу обосновать почему, для меня важно понять насколько может быть полезен/бесполезен данный метод.
Всем спасибо за внимание, и заранее за комментарии!
SASS. Gulp
Еще один момент — для того, чтобы сайт работал, SASS нужно будет в итоге компилировать (переделать) в CSS. Но для этого есть специальные программы, которые делают это автоматически. Просто помните, что SASS не заменяет CSS.
Сейчас этого достаточно, что нужно сказать про SASS. Перейдем к программе, которая и SASS компилирует в CSS, и делает многое другое автоматически.
Зачем нужен Gulp
До этого вы верстали всё в одном файле index.html. Благодаря Gulp можно разбить верстку на несколько файлов и даже папок. В одном файле будет шапка сайта, в другом каталог и т.д. Это нужно чтобы:
Также, благодаря Gulp браузер обновляется автоматически, автоматически группируются медиа-запросы, автоматически SASS компилируется в CSS, и некоторые другие вещи делаются автоматически.
Установка Gulp
Просто делайте всё, как описано ниже.
Скачайте и установите Node.js.
Откройте консоль (командную строку) Windows. Для этого нажмите Win+R, в открывшемся окне введите cmd и нажмите OK. Появится черное окно — это и есть консоль.
В консоли напишите:
После того, как установка завершится, Gulp установится глобально, то есть на весь компьютер. В будущем, когда Вы будете верстать проект за проектом, этот шаг по установке Gulp глобально можно будет не делать. Вы только что установили Gulp на компьютер и больше это делать не нужно.
Теперь Gulp нужно будет установить прямо в Ваш проект. А вот этот шаг нужно будет делать для каждого нового проекта.
Если у Вас на компьютере несколько локальных дисков, то определитесь на каком из них будут Ваши верстки. На этом диске создайте папку для проекта, например, project. Возможно, Вы сперва захотите создать папку Jobs, в которой будут все Ваши верстки. Это хорошо, тогда папку project создавайте в папке Jobs.
Вернитесь в консоль Windows. Здесь сейчас Вам нужно указать путь до Вашей папки project. Если Ваши верстки будут на корневом локальном диске (на котором находится Windows), то в консоли Вам нужно через команду cd прописать путь до папки project. Например, так:
Если Ваши верстки будут на каком-то другом локальном диске (а это лучше, чем на корневом), то в консоли Вам нужно прописать название Вашего диска, на котором будет находиться верстка, поставить двоеточие, например,
В командной строке измениться путь, и будет примерно таким D:\>.
Теперь пропишите только путь до папки project через команду cd, например,
Сейчас в консоли должен отображаться путь к вашей папке.
Теперь можно установить Gulp и другие инструменты в Вашу папку project. В папке project создайте файл package.json, откройте его через Sublime Text и вставьте следующий код:
Сохраните файл (CTRL+S).
Снова вернитесь в консоль и пропишите:
Теперь в папке проекта создайте файл gulpfile.js. Вставьте в него следующий код и сохраните:
Файл gulpfile.js в этом уроке разбираться не будет. Скажу только, что именно в этом файле для Gulp создаются задачи — указывается, что и в каком порядке должен делать Gulp.
Всё готово для работы с Gulp!
В папке project создайте папку src. В ней Вы будете верстать проект. Но результирующий конечный код будет автоматически собираться в папке build. Папку build создавать не надо, она создастся автоматически.
В папке src у Вас будет файл index.html, но Вы не сможете открыть его в браузере, либо он откроется не полностью. Браузер не знает SASS и Gulp. Браузер знает только HTML, CSS и Javascript. Этот index.html прогонится через Gulp, и в папке build создастся другой index.html, который уже можно открыть в браузере.
Когда Вы будете работать через Gulp, браузер будет автоматически открывать сайт. Но Вы должны знать, что браузер открывает index.html из папки build.
В будущем заказчику Вы в первую очередь должны передавать файлы именно из папки build. А передавать или не передавать заказчику весь проект с папкой src, Вы решаете самостоятельно или по договоренности с заказчиком. Как правило заказчику не нужна папка src.
Сейчас всё увидите наглядно.
В папке src создайте файл index.html и вставьте в него код:
Теперь здесь же в папке src создайте папку assets, а в ней 3 файла: _1.scss, _2.scss, style.scss.
В файл style.scss код:
Запустите gulp в консоли Windows (в консоли, конечно, нужно чтобы путь был к папке project). Gulp запускается простой командой:
Через несколько секунд Вы должны увидеть в консоли примерно то же, что на картинке (только у меня другой путь до папки):
После запуска gulp у Вас либо сразу откроется браузер, либо сперва появится окошко для выбора браузера. В браузере Вы должны увидеть зеленый фон и число 11 по центру. То есть gulp собрал все стили и открыл сайт в браузере.
Как мы используем Sass и Gulp в нашей разработке плагинов и тем для WordPress
Прошло довольно много времени с тех пор, как мы полностью отказались от «ванильного» CSS в пользу CSS-препроцессора (более 4 лет) – если говорить конкретнее, то в пользу Sass (с синтаксисом SCSS). Есть немало причин, почему мы это сделали, и основными являются улучшение опыта разработки и упрощенная интеграция с плагинами.
Проще говоря, Sass был (и остается) более мощным языком, чем «ванильный» CSS, особенно если вы заинтересованы в поддержке старых версий браузеров (к примеру, IE). Потребности в переменных, условных выражениях, миксинах, вложенности правил, а также цветовых функциях и всех полезных свойствах, которые предлагает препроцессор, гораздо более очевидны в контексте темизации WordPress, когда вы хотите предложить несколько цветовых схем своей темы или сделать так, чтобы популярные WordPress плагины соответствовали дизайну и разметке вашей темы.
Правда, это статья написана не для того, чтобы подтолкнуть вас к использованию CSS-препроцессоров. Я покажу вам, как мы используем Sass и Gulp в нашей разработке тем и плагинов для WordPress, и как приспособить тот же самый поток операций к вашей теме.
Наши специфичные требования
Когда мы только начали исследовать возможности интеграции Sass к нашим темам, у нас существовало несколько жестких требований, которые обычно неприменимы к другим проектам (к примеру, автономным приложениям или сайтам). Это связано с тем, что наши клиенты варьируются от простых владельцев сайтов, которые имеют очень узкие знания в области CSS или не имеют их вовсе, до разработчиков сайтов с различным набором навыков (далеко не каждый из них является фронтэнд-разработчиком). Вышеизложенное означает, что:
С учетом вышесказанного мы задали следующую структуру файлов в отношении таблиц стилей:
Все скомпилированные файлы находятся рядом с их источниками, и всегда можно прибегнуть к любому из них, проигнорировав другой. Также обратите внимание, что мы разместили все фрагменты (partial) Sass в директории /css/inc, чтобы к ним можно было обратиться при необходимости.
Главный файл style.scss просто импортирует все фрагменты и не содержит в себе фактических стилей. К примеру:
Компиляция Sass с помощью Gulp
Gulp обычно не нуждается в представлении, но для полноты картины скажем, что этот инструмент применяется для автоматизации задач любого рода в процессе разработки. Он способен решить практически любую задачу с помощью своей мощной архитектуры; от компиляции и минимизации JS и CSS до фактического развертывания и более сложных задач. Он основан на JavaScript и работает на Node.js.
Мы в CSSIgniter широко используем Gulp. У нас есть более десятка разных задач Gulp в нашем внутреннем инструментарии для разных рабочих процессов. Один из них – компиляция Sass – мы сейчас и рассмотрим.
Основы работы
Чтобы запустить Gulp, нужно установить Node.js. После этого нам нужно будет инициализировать проект с помощью npm. Сначала создайте директорию, в которой будет находиться ваш проект со структурой, упомянутой нами в предыдущем разделе, после чего уже инициализируйте проект:
Для нас сразу же создастся файл package.json, который используется для отслеживания различной информации о проекте, включая его зависимости.
Нам нужно будет установить следующие зависимости для нашего инструментария Sass:
Сделав это, давайте также глобально установим Gulp в нашу систему, чтобы мы могли запускать его как команду:
Примечание: если вы не хотите загрязнять вашу систему глобальными зависимостями (и не должны), вы можете запустить Gulp в качестве npm-скрипта в package.json. В «scripts» добавьте “gulp”: “gulp”. Теперь выполнение npm run gulp taskname будет аналогичным запуску gulp taskname.
После этого нам нужно создать файл gulpfile.js. Он будет основным файлом для нашего инструментария, поскольку Gulp ожидает его и считывает его из текущей рабочей директории всякий раз, когда мы выполняем gulp в командной строке.
Внутри gulpfile.js определим наши зависимости:
И нашу задачу компиляции Sass:
Это приближено к тому, что мы используем для наших тем. Теперь выполнение gulp compile:sass (или npm run gulp compile:sass) в командной строке в корне нашего проекта приведет к Sass компиляции. Давайте рассмотрим ключевые особенности:
Это ключевой компонент нашей задачи. Здесь Sass фактически компилируется в CSS. Мы добавляем отступы и выводим стили в расширенном виде, чтобы отвечать нашим требованиям к удобочитаемости.
Autoprefixer – великолепный инструмент. Как следует из названия, он автоматически добавляет префиксы браузера/поставщика к нашему коду только для указанных нами версий браузеров (в этом конкретном примере мы задали 2 последние версии всех браузеров). Это позволяет нам свободно писать CSS без добавления префиксов (к примеру, в flexbox), обеспечивая поддержку для старых браузеров.
Еще одно преимущество заключается в том, что, когда мы решаем отказаться от поддержки какого-либо конкретного браузера (либо выходят новые версии браузеров), все, что нам нужно сделать, это просто удалить браузер из нашего gulpfile, перекомпилировать CSS, и все соответствующие префиксы будут удалены!
Еще один классный инструмент – gulp-group-css-media-queries. Чтобы понять, зачем он нужен, давайте посмотрим, как мы обычно пишем CSS медиа-запросы в Sass:
Вложенные медиа-запросы для соответствующих им элементов очень удобны, это позволяет нам инкапсулировать каждый стиль в каждом селекторе. Проблема данного подхода заключается в том, что он компилируется в следующее:
У этого подхода есть несколько проблем. Он создает новый блок медиа-запроса для каждого объявления, значительно увеличивая размер файла и влияя на удобочитаемость.
С помощью group-css-media-queries мы обходим эту проблему. Плагин просто проходит по нашему коду и группирует все соответствующие медиа-запросы в самом конце таблице стилей, в итоге вывод будет выглядеть так:
Эффективно и гораздо чище!
Наша финальная строка передает результаты в browserSync, который мы рассмотрим сразу же после того, как создадим новую задачу – она будет отслеживать наши Sass на наличие любых изменений, после чего сразу же скомпилирует файлы и передаст их в браузер.
Эта задача на самом деле делает немного больше: сначала она инициализирует серверный экзмемпляр browserSync. BrowserSync – еще один замечательный инструмент с широкой сферой применения.
В этом конкретном сценарии мы используем его как прокси для нашего локального сервера WordPress разработки (который в этом случае располагается по адресу http://localhost/wordpress-installation – замените на ваш собственный локальный URL разработки). Таким образом, мы можем автоматически передавать все изменения файла в browserSync, который будет обрабатывать перезагрузку страницы, или, в случае с CSS, будет напрямую подключать новые стили без перезагрузки. Это огромный прирост производительности.
Затем мы просто отслеживаем все Sass файлы на наличие изменений с помощью внутреннего API Gulp (gulp.watch), вызывая задачу compile:sass (которая затем передает изменения в browserSync, а то уже в свою очередь внедряет стили).
И, наконец, добавляем дефолтную задачу gulp:
Теперь, когда мы запускаем gulp, будет срабатывать задача watch:sass, поскольку мы указали ее в качестве дефолтной.
Бонус: линтинг стилей с помощью sass-lint
Ни один процесс разработки не будет полным без линтера. Линтинг кода имеет массу преимуществ, он предотвращает ошибки и помогает поддерживать сокращенную и однородную кодовую базу. Добавление линтинга к рабочему процессу, описанному выше, так же просто, как создание новой задачи. Давайте сначала установим требуемую зависимость:
И добавим задачу линтинга в наш gulpfile.js:
Обратите внимание, что мы также создали новую задачу lint:sass, выполняемую в разных участках нашего рабочего процесса. Теперь всякий раз, когда мы компилируем файлы Sass или отслеживаем изменения, линтер будет автоматически запускаться.
Примечание: вы можете использовать шаблонный конфигурационный файл sass-lint для создания собственных правил линтинга.
И полный файл gulpfile.js:
Готово! Используете ли вы препроцессор CSS в своих WordPress-проектах? Что по поводу Gulp? Поделитесь своими мыслями в комментариях.
Gulp group css media queries что делает
Что такое gulp и зачем он нужен
Gulp — это инструмент, который помогает разработчикам автоматизировать рутинные задачи. Чаще всего gulp используется в frontend разработке для таких задач:
Если вы внедрите в свою практику эту систему, вы значительно увеличите скорость вашей работы. Так же 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 проекта, которую можно поменять под свой вкус и потребности.
Рассмотрим предназначение каждой папки и файла:
Это основная файловая структура сборки, но она будет меняться в ходе работы.
Давайте сразу добавим файл .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 (подробнее почитать можно тут). Для начала определим структуру каталога и файлов для штмл файлов:
Рассмотрим подробнее файловую структуру:
Нижний прочерк в названии файлов и папок говорит о том, что они подключаются в основной файл.
Далее зададим настройки путей для 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 задаем массив путей для файлов стилей:
Сразу откроем наш основной шаблон _default.html и в раздел head добавим файл стилей, который будет называется app.min.css:
Далее добавляем нужные плагины для работы со стилями:
Подключаем все эти плагины:
Далее создаем 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:
Так же скорректируем таск по умолчанию:
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 задаем массивы с путями:
После этого устанавливаем нужные плагины:
Рассмотрим каждый плагин:
Описываем таск для работы со скриптами. Для начала создаем объект для конфигурации webpack:
Здесь определяем в каком режиме работаем, включаем source maps в dev режиме и задаем исходящий файл app.js.
Далее подключаем babel в прод режиме:
И наконец, создаем сам таск:
Здесь все подобно, как и с таском со стилями. Включаем отображение ошибок, запускаем webpack, сжимаем файл в прод режиме, добавляем суффикс min и перегружаем браузер.
Добавим файлы для отслеживания в функцию watch:
Далее изменяем таск по умолчанию:
Создаем файл app.js. Подключаем в шаблоне _default.html файл app.min.js перед закрывающимся тегом body:
На этом настройка gulp задачи для работы со скриптами закончена.
Gulp imagemin. Сжатие изображений
Далее мы реализуем возможность для работы с изображениями с помощью плагина imagemin. Этот плагин предназначен для сжатия и оптимизации изображений различных форматов.
Зададим настройки для путей к изображениям. В раздел src добавим:
Создаем массивы настроек в gulpfile.js:
Получаем такой массив:
Здесь мы исключаем папку svgIcons, которая предназначена для генерации svg спрайтов. К этому мы вернемся чуть позже. Устанавливаем необходимые плагины:
Рассмотрим каждый плагин:
Создаем таск для сжатия изображений:
Gulp webp. Конвертация изображений в webp формат
Далее создадим таск, который конвертирует все изображение в webp формат. Это делается с целью оптимизации скорости загрузки сайта. Для этого установим плагин gulp-webp:
Подключим этот плагин:
Создаем таск для конвертации изображений в webp:
В этом таске в качестве входных файлов мы берем изображения в папке dist/img, преобразовываем в webp формат и сохраняем в эту же папку.
Теперь мы совместим два таска: сначала выполняем сжатие изображений, потом конвертацию и перезагружаем браузер после выполнения этих двух задач:
Далее изменяем таск по умолчанию:
Также установим отслеживание за изображениями в исходной папке:
Gulp fonts. Работа со шрифтами
Следующая возможность, которую хотелось бы реализовать в нашей сборке — это работа со шрифтами. На сегодняшний день самыми популярными форматами шрифтов являются woff2 и woff. Именно их и нужно подключать в CSS стилях. Для начала определим пути для работы со шрифтами в файле projectСonfig.json. Раздел 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, рассмотрели примеры использования, создали свою сборку для верстки сайта. В дальнейших статьях мы будем ее дополнять и модифицировать. Посмотреть и скачать исходники сборки можно с репозитория.