Как подключить 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

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

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

Источник

Всем привет, друзья! Это обновленное и переработанное руководство Gulp 4, в котором мы детально разберем работу с Gulp, ознакомимся с новыми методами построения задач (тасков), вы узнаете, какими способами можно установить, настроить Gulp и как с его помощью автоматизировать и ускорить процесс веб-разработки. По традиции, мы будем знакомиться с возможностями инструмента на реальном примере и создадим удобное рабочее окружение для HTML верстки.

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

Полезные материалы урока:

С выходом Gulp 4 инструмент претерпел значительные изменения, по сравнению с Gulp 3, по которому я делал урок в свое время. Код стал максимально простым и лаконичным, значительно уменьшилось количество зависимостей пакетов, увеличилась скорость установки модулей и скорость работы в целом. Также у нас есть урок, в котором я рассказывал о том, как можно максимально быстро и без боли перевести любой проект, написанный с использование Gulp 3 на Gulp 4. Сегодня-же мы научимся писать задачи с использованием только актуальных и рекомендуемых разработчиками Gulp методами и API. Данный урок будет актуальным до тех пор, пока в закрепленном комментарии к видео на YouTube не появится информация о том, что вышел новый урок по данному инструменту. Данное правило применимо и для других уроков на канале. Чекните актуальность, а заодно, можете поставить лайк и что-нибудь написать или спросить, буду рад ответить на ваш вопрос.

Установка Gulp и настройка

Для начал необходимо установить окружение. Если вы пользователь macOS или Windows, вы можете загрузить Node.js версии LTS с сайта Nodejs.org или воспользоваться актуальным способом установки окружения, который я предлагаю для работы с использованием WSL.

После установки окружения можно приступать к работе. Откроем терминал в папке проекта: создадим папку «html» на вашем компьютере и откроем в ней терминал.

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

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

Выполним инициализацию проекта командой npm init и укажем название нашего проекта myproject :

Если у вас нет желания заполнять остальные поля, можно оставить их пустыми, нажимая «Enter» или заполнить на свое усмотрение. По окончании заполнения полей, введите yes и нажмите «Enter».

Для начала установим Gulp локально в наш проект командой:

Теперь в файле package.json, в секции devDependencies появился gulp и информация о его текущей версии. После установки других пакетов таким-же образом, информация о них также будет отражена в «package.json».

Кроме того, в папке нашего проекта появилась папка «node_modules», которая теперь содержит все зависимости пакета «gulp».

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

В папке проекта таже можно заметить файл «package-lock.json». Это служебный файл, на который можно не обращать внимание. Его, конечно, можно удалить, однако после повторной установки модулей, он появится вновь.

Для файлов нашего проекта я предлагаю создать папку «app/», в которой будут храниться все исходные файлы.

Давайте создадим самый главный файл проекта. Это, конечно-же, «gulpfile.js».

Работа с gulpfile.js

Внимание! Все куски кода с примерами будут объединены в один полноценный пример «gulpfile.js» со всеми комментариями в конце данного урока.

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

Именно с помощью require() мы подключаем модули из папки «node_modules» и присваиваем их переменной или, как в нашем случае, константам.

Подключим Browsersync в проект:

Далее напишем функцию, которая определит логику работы «Browsersync». В отличие от Gulp 3, в Gulp 4 логика работы в комбайне не является таском. Это просто функция, которую можно экспортировать в таск или добавить в набор экспорта.

Обратите внимание, что название функции не должно совпадать с названием переменной или константы, в которую мы подключаем пакет. Поэтмоу, в данном случае, название функции browsersync() будет содержать только строчные буквы.

При использовании какого-либо модуля, рекомендую всегда читать его документацию на официальном сайте или на сайта npmjs.org. Как правило, разницы большой нет, где смотреть инструкцию, однако лучше отдавать предпочтение оф. сайту, так как информация на сайте npmjs.org может обновляться не сразу или иметь не полные инструкции.

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

Допишем далее в gulpfile.js:

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

После запуска мы увидим в браузере белую страницу с надписью «Cannot GET /». Это говорит о том, что в папке проекта «app/» нет индексного файла.

Если мы создадим в папке «app/» индексный файл «index.html», напишем в него что-нибудь и сохраним файл, то, после обновления страницы, мы сможем узреть в браузере результат нашего творчества.

Работа со скриптами

Создадим функцию scripts() до экспорта задач. Данная функция будет обрабатывать скрипты нашего проекта:

Для работы данной функции нам понадобятся модули «gulp-concat» и «gulp-uglify-es». Установим их в наш проект. Устанавливать несколько пакетов можно простым перечислением без каких-либо разделяющих символов одной командой:

И подключим данные модули к проекту в верхней части «gulpfile.js»:

Создадим в папке «app/» новую папку «js/» и в ней уже создадим новый файл «app.js». Для примера можно разместить следующий код в файле «app.js»:

Давайте разберемся, что происходит в функции scripts() нашего «gulpfile.js». Я буду указывать соответствующую строку кода из примера выше и объяснять, что мы делаем.

Строки 3 и 4: Перечисление нескольких файлов в качестве источника.

Далее экспортируем функцию scripts() в таск. В нижней части «gulpfile.js», где у нас размещен предыдущий экспорт, добавляем экспорт таска scripts :

Поначалу может показаться, что система экспорта функций в таски не совсем удобна, ведь раньше, в Gulp версии 3, мы сразу писали таски, которые уже были готовы к использованию без экспорта. Но здесь фишка в том, что именно с помощью exports можно комбинировать любым способом любые функции. Это намного круче, намного удобнее и работает все намного быстрее. По мере изучения данного урока вы в этом убедитесь.

Запустим gulp scripts и проверим в терминале, как работает наш таск:

Таск работает отлично. Если перейти в папку «app/js/», можно узреть вновь созданный минифицированный файл «app.min.js» со скриптами проекта. Открыв этот файл, мы увидим, что там находится скрипт библиотеки jQuery, а в конце строки наш пример кода из «app/js/app.js».

Добавим разметку-пример в файл «app/index.html» с подключенным скриптом, стилями и изображением:

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

Рекомендую держать файл «index.html» на виду, так как в дальнейшем мы к нему еще обратимся при работе со стилями и изображениями. Сейчас следует обратить внимание именно на строчку подключения скрипта:
.

Обратите внимание, что в путях до файлов скриптов, стилей и изображений мы не указываем папку «app/», так как эта папка является корнем для сервера и уже учтена в настройках Browsersync.

Для более глубокого понимания работы Globs рекомендую ознакомиться с соответствующим разделом документации Gulp.

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

Дефолтный таск exports.default позволяет запускать проект одной командой gulp в терминале.

Теперь можно запустить команду gulp в терминале. Если внести какие-либо изменения в файле «app/js/app.js», страница будет автоматически перезагружена.

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

Ориентируясь на предыдущий опыт, установим одной командой модули «gulp-sass», «sass», «gulp-less», «gulp-autoprefixer» и «gulp-clean-css»:

И подключим их в проект:

Создадим переменную preprocessor в самом начале «gulpfile.js»:

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

Строка 5: Создание префиксов для лучшей совместимости со старыми браузерами. Здесь мы используем установленный и подключенный ранее модуль «gulp-autoprefixer».

Параметр overrideBrowserslist задается для определения глубины версий от текущей. В нашем случае, префиксы будут раздаваться старым браузерам последних 10-ти версий. Параметр grid: true отвечает за создание префиксов CSS Grid для браузеров Internet Explorer.

Экспортируем функцию styles() в задачу. Для этого добавим перед дефолтным экспортом exports.styles :

После выполнения в терминале команды gulp styles будет создан файл стилей проекта «app/css/app.min.css». Если мы поменяем значение переменной preprocessor на less и перезапустим gulp в терминале, то в качестве источника выступит файл «app/less/main.less» и файл будет обработан уже препроцессором Less.

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

Все, что нам остается сделать, это добавить функцию styles() в дефолтный экспорт:

Внимательный читатель заметит, что мы обработали стили, обработали JavaScript, но абсолютно оставили без внимания HTML файлы. Давайте добавим наблюдение за HTML файлами проекта в функцию startwatch() :

Работа с изображениями

Для того, чтобы работать с изображениями, нам необходим соответствующий модуль. Рекомендую использовать «compress-images». Это один из самых популярных модулей для работы с изображениями. Давайте установим «compress-images», а также вспомогательные модули:

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

Назначение вспомогательного модуля «del» я объясню немного позже, а пока ознакомимся с новой функцией и разберемся, что здесь происходит. Добавим новую функцию images() после функции styles() :

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

Экспортируем для автономного использования в секции с экспортами в «gulpfile.js»:

Проверить работу таска довольно просто, введем команду в консоли:

Далее можно добавить мониторинг изображений в вотчер. В результате функция startwatch() будет иметь следующий вид:

Можно запустить проект командой gulp и проверить, как все работает. Ознакомьтесь с файлом «index.html», чтобы разобраться, как мы подключили в этот файл стили, изображения и скрипты.

Сборка проекта ( build )

Добавим новую функцию buildcopy() :

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

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

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

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

Для очистки папки «dist/» можно создать дополнительную функцию cleandist() по аналогии с cleanimg() и добавить ее в таск build для предварительной очистки целевой папки:

Результат

В результате у нас получился такой замечательный «gulpfile.js», который мы создали на реальном примере простого окружения для верстки:

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

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

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

Источник