Gulp для ускорения разработки
Что такое Gulp, зачем он нужен, его возможности, как установить и как начать использовать в разработке сайтов.
Возможности Gulp:
Как установить Gulp глобально в системе
Установка Gulp глобально необходима для того, чтобы была доступна команда gulp в окне команд / bash.
Открыть командную строку и ввести следующий текст:
Коротко о том, что это значит:
Установка Gulp в папку проекта
При создании папок будущего проекта важно помнить следующее: все папки проекта должны быть написаны латинскими буквами, никаких русских символов не должно быть, это необходимо для корректной работы.
Выполним следующую команду для создания файла package.json :
Или чтобы быстро создать package.json используйте:
Этот файл будет содержать всю информацию о проекте (название, описание, автор и т.д.), а так же об используемых зависимостях в проекте.
Создание файла package.json с командой npm init:
Для установки Gulp в нашу папку воспользуемся командой:
Есть несколько отличий от установки Gulp глобально.
После установки gulp мы увидим примерно следующее:
Создание структуры Gulp проекта
Структура может быть практически любой. У нас будет следующая:
Как создавать задачи (таски) Gulp
Создадим файл gulpfile.js и начнём его заполнение.
В фигурных скобках мы укажем, все необходимые функции (методы), которые мы будем использовать.
Теперь Gulp подключен к нашему проекту. Далее, мы будем подключать все необходимые пакеты (плагины) для Gulp.
Задача (функция) в Gulp имеет следующий вид.
Создадим простейшую задачу (функцию), которая будет выводить строку ‘Привет, Gulp!’.
Выполнение задачи
Запуск задачи Gulp по умолчанию
Это был самый простой пример работы Gulp. Для более сложных задач используются дополнительные методы.
Методы gulp
Как создавать задачи мы рассмотрели. Теперь рассмотрим, как выбирать необходимые файлы.
Gulp src / dest
Сначала рассмотрим пример, затем уже разберём какие паттерны (выборки) для выбора файлов можно использовать.
В данном примере мы видим работу двух методов:
В src мы использовали паттерн css/**.css для выбора всех css файлов внутри папки /assets/css/ (исключая файлы в подпапках, если таковые имеются).
Примеры наиболее используемых паттернов для выбора файлов:
Gulp series / parallel
В нашем примере была указана одна функция, но задач в gulp может быть очень много. Чтобы выполнять все перечисленные функции одной командой gulp необходимо сделать следующее.
В series мы перечисляем список задач для последовательного выполнения.
Если нам не важно когда закончится та или иная задача, мы можем использовать метод parallel :
Gulp lastRun()
Используется для ускорения времени выполнения, за счёт пропуска файлов, которые не изменились с момента последнего успешного завершения задачи.
Установка, подключение и использование плагинов Gulp
Это наипростейший пример, но он хорошо демонстрирует последовательность действий.
Просмотр списка задач Gulp
Чтобы просмотреть задачи, которые вы можете выполнить, используйте следующую команду.
Обновление плагинов (версий пакетов)
Обновление в автоматическом режиме.
Или же можете самостоятельно обновить/установить/удалить нужный пакет следуя предложенным командам.
Gulp 4
Нужно заменить для Gulp 4.
Статьи про Gulp
| English | Russian |
|---|---|
| Gulp | Глоток |
| Dependencies | Зависимости |
| Task | Задача |
| Variable | Переменная |
| Watch | Наблюдать |
| Destination | Пункт назначения |
Надеюсь, вам понравилась данная информация. Если вам интересна тема web-разработки, то можете следить за выходом новых статей в Telegram.
JavaScript-разработчики уделяют программированию очень мало времени. Большая часть работы включает в себя выполнение рутинных заданий:
Это очень монотонный, отупляющий процесс. Разве не лучше было бы потратить свое время на более интересную работу? Для этого вам понадобится сборщик проектов.
Звучит сложно!
Это сложнее, чем выполнять каждую операцию вручную. Но в будущем вы сэкономите время и сократите количество допускаемых ошибок. При использовании сборщика реализуйте правильный подход:
Сборщики проектов: варианты
Первым популярным решением подобного рода был Grunt – сборщик проектов, созданный на основе Node.js. Grunt был невероятно популярным. Но низкая скорость работы и сложность настройки были его слабыми местами.
Версии Gulp
Шаг 1: установите Node.js
После установки запустите командную строку и введите следующую команду. Она позволит узнать номер версии:
Вскоре вы станете активно использовать npm – менеджер пакетов Node.js, который необходим для установки модулей. Узнайте номер его версии:
Затем добавьте следующую строку в конце
Шаг 2: установите Gulp глобально
Установите интерфейс командной строки Gulp глобально, чтобы сборщик можно было запустить из любой папки проекта:
Убедитесь, что Gulp установлен, проверив его версию:
Шаг 3: Настройте проект
Предполагается, что ваш проект содержит папки, перечисленные ниже.
Папка src: предварительно обработанные исходники
Содержит следующие подкаталоги:
Папка build: скомпилированные/обработанные файлы
Когда понадобится, Gulp создаст файлы и подпапки:
Примечание: Если вы работаете в Unix-системе, то можете воссоздать структуру исходных папок с помощью следующей команды:
Шаг 4: Установите Gulp локально
Теперь можно установить Gulp в папку проекта:
Эта команда устанавливает Gulp как зависимость. После чего раздел « devDependencies » в package.json обновляется соответствующим образом. В рамках этого руководства предполагается, что Gulp и все плагины являются зависимостями.
Альтернативные варианты развертывания
Чтобы использовать ресурсы на работающем сервере, изменить способ их создания. Например, файлы HTML, CSS и JavaScript сжимаются при использовании, но не в средах разработки. В этом случае удалите —save-dev при установке Gulp и его плагинов. Например:
Шаг 4: Создайте файл конфигурации Gulp
Создайте новый файл конфигурации gulpfile.js в корне папки проекта. Добавьте в него базовый код:
Код ссылается на модуль Gulp, устанавливает для переменной devBuild значение true при запуске в режиме разработки и определяет расположение исходных файлов и папок сборки.
gulpfile.js ничего не сделает до того, пока вы не выполните следующий шаг.
Шаг 5: Создайте таск для Gulp
Сам по себе Gulp ничего не делает. Необходимо:
Большинство заданий (тасков) будут использовать:
Задания для изображений
Теперь можно ссылаться на оба модуля в верхней части gulpfile.js :
Затем определите функцию обработки изображений в конце gulpfile.js :
Этот код делает следующее:
Все изображения будут сжаты, и вы увидите следующее:
Задание для HTML
Создадим таск, который копирует файлы из исходной папки HTML. Мы можем сжать HTML-код, чтобы удалить ненужные пробелы и атрибуты, используя плагин gulp-htmlclean.
Эти модули загружаются в начале gulpfile.js :
Теперь можно экспортировать функцию для обработки html в конец gulpfile.js :
Задание для JavaScript
Обработаем файлы JavaScript, построив сборщик пакетов. Он делает следующее:
Установите модули плагинов:
Затем загрузите их в начало gulpfile.js :
Примечание: для большей эффективности модули gulp-strip-debug и gulp-sourcemaps загружаются только в режиме разработки.
Экспортируйте новую функцию задания:
Функция sourcemap.init() вызывается до преобразования кода, а sourcemaps.write() — после завершения.
Задание для CSS
Установите все модули:
Загрузите их в начало gulpfile.js :
Шаг 6: Автоматизируйте выполнение заданий
Чтобы запустить все задания в одной команде, экспортируйте таск build в gulpfile.js :
Метод gulp.parallel() выполняет все задания одновременно. Его можно комбинировать с gulp.series() для создания сложных цепочек зависимостей. В этом примере exports.html, exports.css и exports.js запускаются параллельно. Но каждый из них может иметь последовательности зависимостей, включая таск images.
Экспортируем новый таск watch в конец gulpfile.js :
Вместо того чтобы запустить gulp watch немедленно, добавим таск по умолчанию. Его можно выполнить, запустив gulp без дополнительных аргументов:
Шаг 7: Пожинаем плоды!
Другие плагины, которые могут быть полезны:
Таски Gulp могут запускать любой JavaScript- код или модули Node.js. Они не обязательно должны быть плагинами. Например:
После применения описанных выше процессов к простому сайту его общий вес уменьшился более чем на 50%.
Что такое Gulp.js? Gulp – это отличный вариант для автоматического запуска заданий и упрощения процесса разработки.
Дайте знать, что вы думаете по данной теме в комментариях. За комментарии, лайки, отклики, дизлайки, подписки низкий вам поклон!
Дайте знать, что вы думаете по данной теме материала в комментариях. Мы очень благодарим вас за ваши комментарии, подписки, лайки, отклики, дизлайки!
Установка и использование Gulp
Установка Gulp
Установка Gulp довольно простая. Для начала установите пакет Gulp глобально:
Затем установите его в свой проект:
Использование Gulp
Давайте создадим задачу Gulp для минимизации одного из наших файлов JavaScript. Создайте файл с именем gulpfile.js. В нём будут определяться ваши задачи, которые запускаются с помощью команды gulp.
Добавьте следующие команды в ваш файл gulpfile.js:
Что на самом деле здесь происходит?
Мы делаем несколько вещей в нашем файле gulpfile.js. Вначале мы загружаем модули gulp и gulp-uglify:
Затем определяем задачу с именем minify, которая при запуске вызывает функцию, заданную в качестве второго аргумента:
В конце, и это самое сложное, мы определяем, что наша задача должна делать:
Если вы не знакомы с потоками, а большинство фронтенд-разработчиков с ними не знакомы, то код выше ничего вам не скажет.
Потоки
Потоки позволяют пройти некоторым данным через ряд, как правило, небольших функций, которые модифицируют данные, а затем передают их следующей функции.
Вот что происходит в виде схемы:
Когда есть только одна задача, функция ничего не делает. Тем не менее, рассмотрим следующий код:
Чтобы запустить это самостоятельно, установите gulp, gulp-jshint, gulp-uglify и gulp-concat.
Эта задача берёт все файлы соответствующие js/*.js (иными словами все файлы JavaScript из папки js), запускает для них JSHint, выводит отчёт, минимизирует каждый файл, а затем объединяет их, сохраняя их в build/app.js. В виде схемы:
Если вы знакомы с Grunt, то заметите, что это довольно сильно отличается от того, как работает Grunt. Grunt не использует потоки. Вместо этого он берёт файлы, запускает одну задачу для каждого файла и сохраняет в новые файлы, повторяя весь процесс для каждой задачи. В результате множества обращений к файловой системе, Grunt работает медленнее, чем Gulp.
Для лучшего понимания потоков прочтите Stream Handbook.
gulp.src()
Функция gulp.src() берёт один или несколько файлов или массив и возвращает поток, который может быть передан в плагины.
Gulp использует node-glob для получения указанных файлов. Проще всего объяснить на примерах:
Другие функции также доступны, но в Gulp они обычно не применяются. Посмотрите документацию Minimatch ради подробностей.
Определение задач
Запуск gulp greet выведет «Здравствуй, мир» в консоли.
Задача также может быть списком других задач. Предположим, мы хотим определить задачу build, которая выполняет три других задачи: css, js и imgs. Мы можем сделать это, указав вместо функции массив с задачами:
Они будут запускаться асинхронно, так что вы не можете предполагать, что когда задача css завершится, то запустится задача js — на деле, это, скорее всего, не произойдёт. Чтобы убедиться, что задача завершила работу перед запуском другой задачи, вы можете указать зависимостей путём объединени массива задач с функцией. Например, чтобы определить задачу css, которая перед запуском проверит, что задача greet завершена, вы можете сделать так:
Теперь, когда вы запустите задачу css, Gulp выполнит задачу greet, подождёт, пока она окончится, а затем вызовет указанную функцию.
Задача по умолчанию
Вы можете определить задачу default, которая выполняется, когда вы просто запускаете gulp. Вы можете сделать это, определив задачу с именем default.
Плагины
Вместе с Gulp вы можете использовать ряд плагинов — более 600 на деле. Вы найдёте их список на странице плагинов, либо путём поиска gulpplugin в npm. Некоторые плагины помечены «gulpfriendly»; это не плагины, но они предназначены для работы с Gulp. Учтите, что при поиске непосредственно в npm, вы не увидите плагины из чёрного списка (прокрутите страницу с плагинами вниз и увидите больше).
Большинство плагинов довольно просты в использовании, имеют хорошую документацию и запускаются аналогичным образом (через поток файловых объектов). Они, как правило, модифицируют файлы (хотя некоторые, вроде валидаторов, нет) и возвращают новые файлы, которые передаются в следующий плагин.
Давайте расширим уже упомянутую задачу js:
Мы используем три плагина: gulp-jshint, gulp-uglify и gulp-concat. Вы можете увидеть в файлах README для плагинов, что их довольно легко использовать. Доступны некоторые настройки, но по умолчанию, как правило, всё хорошо.
Два других плагина понятнее: функция uglify() минимизирует код, а функция concat(‘app.js’) объединяет все файлы в один с именем app.js.
gulp-load-plugin
Модуль, который я нахожу весьма полезным называется gulp-load-plugins, он автоматически загружает любые плагины Gulp из файла package.json и присоединяет их к объекту. Основное применение следующее:
Вы можете записать всё в одну строку ( var plugins = require(‘gulp-load-plugins’)(); ), но я не большой поклонник однострочного вызова require.
После запуска этого кода объект plugins будет содержать ваши плагины с именами в CamelCase-стиле (к примеру, gulp-ruby-sass будет загружен как plugins.rubySass ). Вы можете использовать их обычным путём. Например, наша задача js сократится так:
К этому прилагается файл package.json, который содержит нечто похожее:
Данный пример на самом деле не намного короче. Однако для объёмных и сложных Gulp-файлов, это сократит блок с загрузкой файлов до одной или двух строк.
Версия 0.4.0 gulp-load-plugins выпущенная в начале марта добавила отложенную загрузку плагина, которая улучшает производительность. Плагины не загружаются, пока их не вызовем, это значит, что вам не придётся беспокоиться о неиспользованных плагинах в package.json влияющих на производительность (хотя их, вероятно, следует убрать в любом случае). Другими словами, если вы запустите задачу, которая требует только два плагина, она не станет загружать все плагины, которые необходимы для других задач.
Отслеживание файлов
Gulp имеет возможность следить за изменением файлов и выполнять задачу или задачи при обнаружении изменений. Эта функция удивительно полезна (для меня, наверное, одна из самых полезных в Gulp). Вы можете сохранить Less-файл, а Gulp превратит его в CSS и обновит браузер без каких-либо действий с вашей стороны.
Предположим, что у нас есть задача build, она превращает наши файлы шаблонов в HTML и мы хотим определить задачу watch, которая отслеживает изменение шаблонов и запускает задачу для преобразования их в HTML. Мы можем использовать функцию watch следующим образом:
Теперь при изменении файла шаблона будет запущена задача build, которая создаст HTML.
Вы также можете указать для watch функцию обратного вызова вместо массива задач. В этом случае функция получает объект event содержащий информацию о событии, которое вызвало функцию:
В дополнение к событию change вы можете прослушивать ряд других событий:
Объект watcher также содержит некоторые методы, которые можно вызывать:
Как установить gulp глобально
Что такое 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, рассмотрели примеры использования, создали свою сборку для верстки сайта. В дальнейших статьях мы будем ее дополнять и модифицировать. Посмотреть и скачать исходники сборки можно с репозитория.
