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

Всем привет, друзья! Сегодня мы подробно рассмотрим, что такое Gulp и как с его помощью можно автоматизировать работу Front-end разработчика. В результате урока мы соберем серьезное и внушительное рабочее Front-end окружение для веб-разработки с использованием Gulp.

Основные ресурсы урока:

С примером урока вы можете ознакомиться на GitHub: agragregra/gulp-lesson

Установка Gulp

Внимание! Если вы пользователь последней версии Windows, рекомендую использовать WSL для веб-разработки. Скачивать инсталлятор с сайта Nodejs.org в этом случае не нужно. Воспользуйтесь этим руководством: Использование подсистемы Linux для веб-разработки в Windows.

Если у вас возникли проблемы при прохождении урока с использованием Gulp 4, рекомендую откатиться на 3 версию, пройти полностью урок и только после этого обновить package.json до 4 версии. Для лучшего понимания. Откатить версию можно в файле package.json. Вместо «gulp»: «^4.x.x», напишите версию «^3.9.1», удалите папку «node_modules» и установите пакеты заново «npm i«.

После того, как Node установлен, можно приступать к установке Gulp. Откройте терминал (правая кнопка мыши в папке с зажатым Shift > Откройте здесь оболочку Linux) и выполните следующую команду:

Создание проекта Gulp

Давайте создадим папку проекта для примера, с которой будем работать, пусть это будет, например, папка myproject.

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

Теперь откроем терминал в папке проекта. Для пользователей Windows достаточно зажать Shift и открыть контекстное меню. В нем появится пункт «Откройте здесь оболочку Linux». Оболочка Linux должна быть предварительно установлена, см урок: Использование подсистемы Linux для веб-разработки в Windows.

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

Следуя инструкциям, заполним метаинформацию о нашем проекте:

Назовем проект «MyProject»

Имя автора можно и указать 🙂

license оставляем по умолчанию и вводим yes:

В результате такой несложной первоначальной настройки нашего нового Gulp проекта в папке myproject нарисуется новый файл package.json.

Файл package.json является файлом манифеста нашего проекта, который описывает помимо той информации, что мы внесли в терминале, еще и информацию об используемых пакетах в нашем проекте.

Например, если мы установим в проект Gulp с ключом —save-dev, то пакет и используемая версия автоматически добавится в наш package.json. Такой учет позволит быстро разворачивать новый проект с использованием уже имеющегося package.json и устанавливать необходимые модули с зависимостями, которые прописаны в package.json в новых проектах.

Давайте установим в наш проект Gulp:

Кроме того, у нас появляется папка node_modules, которая теперь содержит установленный пакет gulp и необходимые зависимости. В данную папку автоматически будут сваливаться все модули и зависимости, которые мы будем устанавливать в проект. Папок с зависимостями может быть очень много, не смотря на то, что мы установили не так уж и много пакетов. Это связано с тем, что в дополнение к основным пакетам устанавливаются программы, необходимые для корректной работы основного пакета. Ни чего чистить и удалять из папки node_modules не нужно. Кроме того, у вас может появиться дополнительный файл package-lock.json. В этом нет ничего страшного, это служебный файл, на который можно просто не обращать внимания.

Структура каталогов в проектах

Работая с различными плагинами, программами и скриптами, будь то jQuery плагин, модуль для CMS, веб-проект или какое-то другое ПО, вы наверняка замечали, что у всех проектов есть схожая структура каталогов, например, большинство проектов имеет папку dist и app. Давайте создадим первоначальную структуру нашего учебного проекта. В результате мы должны создать следующую структуру в нашем проекте myproject (все файлы, которых не было, пока создаем пустыми):

myproject/
app/
css/fonts/img/js/sass/index.html

dist/node_modules/gulpfile.jspackage.json

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

Папка dist/ будет содержать уже готовый продукт, оптимизированный, сжатый, причесанный. Это папка продакшена.

gulpfile.js

Теперь давайте откроем в редакторе кода gulpfile.js и напишем в него:

Данной строчкой мы подключаем Gulp к нашему проекту, посредством функции require. Данная функция подключает пакеты из папки node_modules в наш проект, присваивая их переменной. В данном случае, мы создаем переменную gulp.

Далее мы уже можем работать с этой переменной и создавать таски (инструкции).

gulpfile.js:

Результат выполнения команды gulp mytask:

Если вы используете Gulp 4 и у вас появляется ошибка о невозможности завершения таска, можно добавить async перед function() и выполнять код асинхронно:

Это, конечно очень простой базовый пример создания таска. Как правило, таски несколько сложнее и включают некоторые дополнительные команды:

Это база Gulp, теперь можно создавать инструкции. Для начала давайте создадим обработчик, который будет компилировать Sass файлы в CSS (CSS препроцессинг).

Gulp Sass

Давайте установим пакет gulp-sass в наш проект с сохранением версии и названия в package.json.

Обратите внимание, что любые Gulp пакеты, для любых задач, легко гуглятся и имеют вполне исчерпывающие инструкции по подключению на своих хоумпейджах и в документации.

Далее подключим gulp-sass в файле gulpfile.js. Обратите внимание, что переменные для подключения пакетов можно перечислять через запятую:

gulpfile.js:

После этого, логичным будет выполнить в терминале наш новый таск sass:

В результате выполения данной команды в папке app/css появится файл main.css.

От таки чудеса, друзя. Как видим, все просто 🙂

Выборка файлов для gulp.src

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

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

Самые распространенные шаблоны выборки

Давайте внесем некоторые изменения в таск sass и сделаем его более универсальным:

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

Обратите внимание, что файлы sass, которые предназначены для импорта в другие файлы, как части одного общего, начинаются с нижнего подчеркивания _part-1.sass. Такие файлы не учавствуют в компиляции, как отдельные файлы, а добавляются через @import в основные файлы.

Наблюдение за изменениями в файлах (Gulp Watch)

Gulp поддерживает метод watch для проверки сохраняемых файлов и имеет следующий синтаксис:

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

Что мы видим: Gulp наблюдает за всеми sass файлами и при сохранении выполняет таск sass, который автоматически компилирует их в css файлы.

Также, мы можем создать отдельный таск для наблюдения за всеми необходимыми файлами

Для Gulp 4 код будет выглядеть так:

Если мы запустим в консоли gulp watch, то Gulp будет автоматически следить за всеми измененями в файлах sass при сохранении и компилировать их в css.

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

Автоматическое обновление страниц с использованием Bbrowser Sync

Мы уже умеем устанавливать дополнения для Gulp, поэтому давайте установим Browser Sync в наш проект:

И, конечно-же, подключим в файле gulpfile.js, как мы это делали ранее с пакетом gulp-sass.

Создаем таск для Browser Sync:

Отлично! Наш сервер для работы и автоматического релоада готов. Теперь давайте последим за изменениями в Sass. Если файл Sass обновляется, автоматически инжектим в HTML измененный CSS файл:

Обратите внимание, что мы выполняем таски [‘sass’, ‘browser-sync’] до запуска watch, так как их выполнение необходимо нам для корректного отображения изменений на момент запуска сервера.

Для Gulp 4 логичнее было бы написать так и выполнять всю конструкцию в дефолтном таске:

Расположим таск watch после всех других тасков и в результате получим такой gulpfile.js для Gulp 3:

Такой код получится для Gulp 4:

Для того, чтобы следить за изменениями в браузере, сделаем соответствующую разметку в файле index.html директории app с подключением файла стилей main.css:

Выполним в терминале команду «gulp». Результат завораживает:

Давайте разберемся, что у нас происходит в консоли (картина может разниться, в зависимости от версии ПО):

И эта задача нам по плечу. Создайте в папке app/js файл common.js. Это основной пользовательский JS файл в нашем проекте. Модифицируем код:

Код для Gulp 4 (здесь лучше добавить дополнительный таск для обработки HTML и JS):

Здесь мы используем функцию browserSync.reload, которую нам любезно предоставил пакет Browser Sync. Обратите внимание на выборку файлов для слежения.

В принципе, мы уже имеем довольно продвинутое рабочее окружение. Но двигаемся дальше, это не все, на что способен Gulp.

Оптимизация JavaScript

Давайте рассмотрим, как можно оптимизировать JS файлы проекта. Чаще всего, в оптимизации нуждаются библиотеки и сторонние jQuery и JavaScript плагины. Давайте создадим в папке app паку libs, которая будет содержать необходимые проекту библиотеки. Все библиотеки будем размещать в отдельных папках.
Для установки новых библиотек рекомендую использовать Bower.

Обратите внимание, что для работы Bower необходим установленный https://git-scm.com/downloads. Если в ОС Windows вы используте оболочку Ubuntu bash, то установку Git выполнять не нужно.

Теперь в папке проекта создадим файл .bowerrc, в который напишем:

Если вы пользователь ОС Windows, у вас не получится просто взять и создать файл, начинающийся с точки. В этом случае можно просто поставить точку в конце файла и нажать Enter: .bowerrc.

Данной настройкой мы указываем путь по умолчанию для установки плагинов с помощью Bower.

Установим jQuery и Magnific Popup, для примера:

Обратите внимание, что все (ну, или почти все) плагины имеют папку dist, об этом мы говорили ранее. В этой папке располагаются готовые файлы продакшена, которые мы и будем использовать в нашем проекте.

Давайте создадим таск scripts, который будет собирать все JS файлы библиотек в один и минифицировать файл. Для этого установим 2 пакета: gulp-concat и gulp-uglifyjs.

Подключим новые библиотеки в gulpfile.js:

Создаем задачу для сборки и сжатия всех библиотек (перед watch):

Давайте проверим, как работает наш новый таск scripts, выполнив в терминале:

Выполнение таска scripts можно запустить перед выполнением watch. Gulp 3:

На выходе, в папке app/css мы получаем дополнительно к main.css файл libs.css, который содержит стили всех библиотек. Файл main.css нет особого смысла минифицировать, так как он содержит кастомные (пользовательские) стили. А вот файл libs.css мы с удовольствием минифицируем.

Внимание! Если в файле libs.css не появляется кода библиотек, а вы по-прежнему видите в нем конструкции @import, создайте отдельный файл _libs.sass для библиотек, который начинался бы с нижнего подчеркивания. Затем импортируйте этот файл в главный, тем самым объеденив и библиотеки и пользовательские стили в один файл.

Для минификации CSS установим пакеты gulp-cssnano и gulp-rename:

И подключим их в нашем gulpfile.js:

И создадим соответствующий таск css-libs. Сразу добавим данный таск в watch для того, чтобы библиотеки собирались в процессе запуска проекта. Таск sass лучше вызвать до запуска css-libs, чтобы нам было что минифицировать:

Подготовка к продакшену

Результирующий код для Gulp 4 будет представлен в конце статьи.

Для продакшена (сборки в папку dist) мы создадим отдельный таск build в конце gulpfile.js. В данной инструкции мы осуществим сборку Sass, JS и выгрузку того, что у нас готово в папку dist.

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

Все прекрасно, но всегда есть одно «Но». Перед тем, как собирать проект нам желательно бы очистить папку dist, чтобы не оставалось лишних потрохов от предыдущих итераций с нашим проектом.

Установим и подключим пакет del:

Создаем таск очистки clean и добавляем его выполнение перед выполнение build:

Для Gulp 4 попробуйте составить таски самостоятельно, как мы это делали в предыдущих прмерах.

Оптимизация изображений

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

В папке app/img есть 3 изображения, которые нам необходимо перенести в папку продакшена, оптимизируя.

Для оптимизации изображений установим 2 пакета (gulp-imagemin, imagemin-pngquant) и подключим их:

Далее создадим таск img для сжатия изображений на продакшен и вызовем его после очистки:

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

Установи м подключим gulp-cache:

Модифицируем таск img:

Автоматическое создание префиксов CSS с помощью Gulp

Вендорные префиксы необходимы для обеспечения максимальной совместимости со всеми современными браузерами. Было бы логично сделать автоматическое добавление префиксов, чтобы написав в CSS или Sass:

Мы получили на выходе:

Установим пакет gulp-autoprefixer и подключим его в gulpfile.js:

И модифицируем наш таск sass:

Дефолтный таск Gulp

Внимание! Дефолтный таск для Gulp 4 отличается от приведенного в этой главе. Полный код для Gulp 4 можно будет посмотреть в конце статьи.

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

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

В результате, у нас должен получиться такой gulpfile.js. Gulp 3:

Результирующий код для Gulp 4:

С примером урока вы можете ознакомиться на GitHub: agragregra/gulp-lesson

Чтобы установить все пакеты и зависимости для скачанного примера, выполните команду npm i в папке проекта.

Премиум уроки от WebDesign Master

Создание сайта от А до Я. Комплексный курс

Создание современного интернет-магазина от А до Я

Источник

GulpJS — фантастически быстрый сборщик проектов

Gulp.js это потоковый сборщик проектов на JS. Он использует Stream и действительно является очень быстрым. Для примера у меня есть проект где около тысячи stylus файлов, GruntJS нужно примерно 2.5 секунды на сборку и 2 секунды на обработку autoprefixer’ом. Gulp все это делает за 0.5 секунды выигрывая у GruntJS минимум в 4 раза.

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

В этой статье будет больше практики, мы соберем среду разработки фронтенда используя Jade и Stylus, запустим локальный сервер и подключим Livereload. Проект я выложил на Github, экспериментируйте.

Установка Gulp

У вас должен быть установлен Node.JS и npm.
Создадим директорию проекта, создадим структуру каталогов и установим Gulp и необходимые плагины.

Струтура проекта:

Установка:

В корне проекта есть файл конфигурации gulpfile.js его и будем редактировать.

Иницилизируем плагины:

Задачи:

Теперь создадим первую задачу

В Gulp мы работаем с потоком, поэтому получаем данные из gulp.src и поточно обрабатываем их.

Для комфортной разработки создадим локальный сервер

Необходимые нам выше задачи предназначены для разработки и конечно хочется отслеживать изменения файлов и иметь на сервере Livereload
Для этого создадим задачу ‘watch’.

Теперь можно запустить наш проект и посмотреть, что получилось.

Сервер доступен по адресу localhost:9000 Мы создали среду для веб-разработке проектов с помощью Stylus и Jade с Livereload. Теперь нужно собрать оптимизированный проект. Для этого создадим задачу ‘build’

Запускаем и получаем готовый проект в папке build

Попробуйте GulpJS и начните уже использовать по-настоящему быстрые вещи в своих проектах.

Источник

Что такое 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, рассмотрели примеры использования, создали свою сборку для верстки сайта. В дальнейших статьях мы будем ее дополнять и модифицировать. Посмотреть и скачать исходники сборки можно с репозитория.

Источник