GulpJS — быстрый сборщик проектов


Содержание

Основы использования Gulp для сборки JavaScript-приложений

Gulp — это инструмент сборки веб-приложения, позволяющий автоматизировать повторяющиеся задачи, такие как сборка и минификация CSS- и JS-файлов, запуск тестов, перезагрузка браузера и т.д. Тем самым Gulp ускоряет и оптимизирует процесс веб-разработки. В статье мы рассмотрим основы использования этого инструмента.

Что такое Gulp

Gulp построен на Node.js, и файл сборки пишется на JavaScript. Сам по себе Gulp умеет не очень много, но имеет огромное количество плагинов, которые можно найти на странице со списком плагинов или просто поиском на npm. Например, есть плагины для запуска JSHint, компиляции CoffeeScript, запуска тестов и даже для обновления номера версии сборки.

Установка Gulp крайне проста. Сначала установите его глобально:

А потом для приложения:

Работа с Gulp

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

Теперь установим плагин gulp-uglify:

И запустим команду gulp minify. Можно убедиться, что в директории build создана минифицированная версия app.js.

Теперь давайте разберемся с тем, что мы сделали). Во-первых, в нашем файле gulpfile.js мы загружаем gulp и плагин gulp-uglify:

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

И наконец, мы описываем действия, которые должен совершать наш таск.

В простом случае функции gulp.task передается только два параметра: название таска и функция. Таск также может включать в себя выполнение других тасков. К примеру, мы можем определить таск build, который будет запускать выполнение двух других тасков: css и js:

Таски css и js будут выполняться асинхронно, поэтому нельзя гарантировать, что один из тасков выполнить раньше другого. Если требуется проверить, что таск завершился, перед запуском следующего, можно определить зависимость следующим образом:

Теперь Gulp будет запускать таск js и ждать его завершения перед запуском таска css.

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

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

  • js/app.js — файл app.js в директории js
  • js/*.js — все файлы с расширением .js в директории js
  • js/**/*.js — все файлы с расширением .js в директории js и всех дочерних директориях
  • !js/app.js — исключает определенный файл
  • *.+(js|css) — все файлы в корневой директории с расширениями .js или .css

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

Потоки

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

В приведенном выше примере, функция gulp.src() принимает строку, которая соответствует некоему файлу или группе файлов, и создает поток объектов, представляющих эти файлы. Дальше эти объекты передаются функции uglify(), которая возвращает новые объекты минифицированных файлов. И наконец, функция gulp.dest() сохраняет измененные файлы.

Рассмотрим теперь следующий код:

В этом таске, кроме gulp и gulp-uglify используются плагины gulp-concat и gulp-jshint, для его запуска необходимо установить эти плагины. Этот таск берет файлы по маске ‘js/*.js’ (файлы с расширением .js в директории js) и запускает JSHint. Дальше выводит результат, потом минимизирует файлы, объединяет их в один файл app.js и и только потом сохраняет его в директории build.

Заключение

В статье мы немного познакомились со сборщиком JavaScript-проектов Gulp. Это по-настоящему быстрый инструмент, построенный на Node.js, очень сильно упрощающий жизнь веб-разработчика. Для него существует огромное количество плагинов для различных задач, а файл сборки имеет краткий, удобочитаемый и простой синтаксис. Также в файле сборки можно использовать любой модуль Node.js и передавать параметры в задачи gulp.

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

Нашли опечатку? Orphus: Ctrl+Enter

© getinstance.info Все права защищены. 2014–2020

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

Gulp для самых маленьких — подробное руководство

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

Видео урок:

  • Урок по обновлению Gulp до 4 версии: Ознакомиться с уроком Gulp 4

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

Проект-пример из данного урока вы можете посмотреть на GitHub и скачать: https://github.com/agragregra/gulp-lesson

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

  • Создание веб-сервера и автоматическая перезагрузка страницы в браузере при сохранении кода, слежение за изменениями в файлах проекта;
  • Использование различных JavaScript, CSS и HTML препроцессоров (CoffeeScript, Less, Sass, Stylus, Jade и т.д.);
  • Минификация CSS и JS кода, а также, оптимизация и конкатенация отдельных файлов проекта в один;
  • Автоматическое создание вендорных префиксов (приставок к названию CSS свойства, которые добавляют производители браузеров для нестандартных свойств) для CSS.
  • Управление файлами и папками в рамках проекта — создание, удаление, переименование;
  • Запуск и контроль выполнения внешних команд операционной системы;
  • Работа с изображениями — сжатие, создание спрайтов, ресайз (png, jpg, svg и др.);
  • Деплой (отправка на внешний сервер) проекта по FTP, SFTP, Git и т.д.
  • Подключение и использование в проекте безгранично большого количества Node.js и Gulp утилит, программ и плагинов.
  • Создание различных карт проекта и автоматизация другого ручного труда.

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

Любой проект, использующий Gulp имеет в корне файл gulpfile.js, который содержит набор инструкций по управлению проектом. Сразу хочется сказать, что написание инструкций для Gulp не является программированием, хотя пишутся на языке JavaScript. Не стоит пугаться больших gulpfile.js, в основном все инструкции однотипные и имеют общие черты. К тому времени, как вы прочтете данное руководство, у вас не должно остаться вопросов по Gulp, так как система сборки элементарная. Но если у вас останутся вопросы — обязательно пишите в комментариях.

Установка Gulp

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

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

Для работы с Gulp у вас должен быть установлен Node.js. Установка Node.js для различных платформ довольно простая — скачиваете инсталлер Node для своей операционной системы и устанавливаете. Я рекомендую устанавливать последнюю версию Stable. Для пользователей Linux и последней версии Windows я подготовил отдельное руководство по установке: Использование подсистемы Linux для веб-разработки в Windows 10.

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

Для пользователей Mac и Linux и Ubuntu bash в Windows, глобальную установку с ключом -g необходимо выполнять с правами суперпользователя, sudo, например:
sudo npm i gulp -g.

Из данной команды мы видим, что запускается менеджер пакетов npm (Node Package Manager), который командой install устанавливает Gulp в систему. Ключ -g говорит о том, что пакет установится в систему глобально, то-есть в систему, а не в папку проекта. Без ключа -g пакет устанавливаются в ту папку, в которой выполняются текущие команды, поэтому будьте внимательны.

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

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

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

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

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

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

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

Оставим версию текущей — 1.0.0

Введем краткое описание проекта — My First Gulp Project:

Имя автора можно и указать :-)

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

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

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

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

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

Что мы видим из данной строки: npm устанавливает пакет gulp в текущую папку myproject (потому, что нет ключа -g, устанавливающий пакет глобально в систему) и сохраняет название пакета с версией в файл package.json:

Кроме того, у нас появляется папка 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

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

Здесь мы видим папку app/, в которой будут размещены все исходные материалы проекта — оригинальные CSS, Sass, js файлы библиотек, оригинальные изображения. В общем — это папка исходников нашего проекта.

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

gulpfile.js

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

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

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

mytask — это название команды, которую вы будете вызывать в нужном вам месте gulpfile.js. Кроме того, можно в командной строке выполнить таск напрямую, написав:

gulpfile.js:

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

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

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

  • gulp.src — выборка исходных файлов проекта для обработки плагином;
  • .pipe(plugin()) — вызов Gulp плагина для обработки файла;
  • .pipe(gulp.dest(‘folder’)) — вывод результирующего файла в папку назначения (dest — пункт назначения).


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

Gulp Sass

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

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

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

Давайте создадим в папке app/sass файл main.sass, зададим в нем фон body — черный и напишем для него обработчик в gulpfile.js

gulpfile.js:

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

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

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

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

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

Выборка файлов в примере выше довольно простая, мы брали файл напрямую: gulp.src(‘app/sass/main.sass’). Но файлы также можно выбирать по шаблону. Шаблон выборки файлов называется glob — https://en.wikipedia.org/wiki/Glob_(programming). Давайте познакомимся ближе со всеми возможностями выборки файлов для обработки.

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

  • *.sass — выбирает все файлы, имеющие определенное расширение (в данном случае, .sass) в корневой папке проекта.
  • **/*.js — выбирает все файлы с расширением .js во всех папках проекта.
  • !header.sass — исключает файл из общей выборки
  • *.+(scss|sass) — задает комплексный шаблон для нескольких типов файлов, разделенных вертикальной чертой. В данном примере в выборкупопадут любые sass и scss файлы в корне проекта.

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

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

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

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

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

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

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

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

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

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

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

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

Browser Sync — это отличное решение для LiveReload страниц при сохранении файлов. При чем релоад происходит не только в одном браузере, но и во всех браузерах сети, будь это мобильные устройства или другие компьютеры в одной Wi-Fi сети.

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

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

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

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

Все, что нам осталось сделать — это запустить таск browser-sync перед тем, как запустится gulp watch. Немного модифицируем таск watch, добавив выполнение browser-sync и sass до запуска watch:

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

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

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

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

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

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

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

После того, как мы нарадуемся результату, встает весьма ожидаемый вопрос — а как, собтвенно, обновлять страницу при сохранении HTML и JS?

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

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

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

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

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

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

Обратите внимание, что для работы Bower необходим установленный Git. Если в ОС 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:

Для Gulp 4 код будет выглядеть следующим образом — добавим в параллельное выполнение таска scripts (некоторую структуру уже задали ранее):

Далее можно подключить к проекту все необходимые CSS файлы библиотек. В нашем случае, только одна библиотека нуждается в подключении — это Magnific Popup. Сделаем это через @import в Sass фале sass/libs.sass:

Внимание! В новых версиях gulp-sass для импорта CSS файлов в Sass необходимо указывать расширение .css и импортировать CSS файлы в SASS файлы с нижним подчёркиванием в начале названия. Например, для того, чтобы импортировать файл library-name.css, необходимо создать вспомогатальный SASS файл, например, _libs.sass, импортировать в него нужный CSS — @import «app/libs/library-name.css» и добавить вспомогательный _libs.sass в главный main.sass без указания нижнего подчёркивания и расширения, например, так: @import «libs»

На выходе, в папке 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 можно будет посмотреть в конце статьи.

Итак, мы имеем 2 главных таска — gulp watch — для работы над проектом в режиме «онлайн» и gulp build — для сборки проекта на продакшен без лишних файлов, папок и со сжатыми картинками. Так как чаще всего нам нужен будет таск watch, можно повесить его на дефолтный таск, чтобы не писать в консоли постоянно gulp watch, а писать просто gulp.

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

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

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

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

Проект-пример из данного урока вы можете посмотреть на GitHub и скачать: https://github.com/agragregra/gulp-lesson

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

Помните — к любому плагину для Gulp есть хорошая документация по подключению и использованию на npmjs.com или на страничке GitHub.

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

Создание контентного сайта на Jekyll от А до Я

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

Я — фрилансер! — Руководство успешного фрилансера

Тема: Сборщик проектов, скриптов Gulp для MV

Опции темы
Поиск по теме
Отображение
  • Линейный вид
  • Комбинированный вид
  • Древовидный вид

Сборщик проектов, скриптов Gulp для MV

Когда плагин разрастается, то всё тяжелее ориентироваться в нем плюс много времени уходит на передвижение по коду. Конечно, можно расставить закладки, но в них опять же легко запутаться.
В этом случае нам может помочь Gulp (по-русски его зовут «галп или «гальп») — сборщик проектов, скриптов, а также помощник для быстрой минификации файлов, сжатия картинок, автоматизации процессов и много чего другого. С помощью него мы можем писать плагин в нескольких файлах, а затем «склеивать» их в один.

1) Легче и быстрее лазить по коду, если он разросся то нескольких сотен и тысяч

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

3) Можно легко и быстро минифицировать код, чтобы файл плагина весил меньше. В том числе можно сжимать и код стандартных скриптов мейкера.

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

4) Можно делать отдельные версии для разработки и «деплоя», т.е. размещения проекта. Например, при создании демки автоматически убирать плагины для теста, ускорения разработки типа «дк тулс»

5) Можно сжимать графический файлы одним нажатием

6) Настроив галп один раз, мы его затем можем использовать для других проектов

На форуме уже есть статья Амфи на счет него, но полтора года назад мне она показалась сложноватой для человека «с нуля» из-за путанницы кода «галпа» с кодом «кофескрипта». Поэтому решил написать урок для совсем новичков в этом деле

1) Nodejs — грубо говоря, программа для взаимодействия нашего компьютера с внешними библиотеками, устройствами ввода-вывода. С помощью него мы будем подключать нужные нам плагины как и сам gulp

2) Любой редактор кода. В данном случае я бы отдал предпочтение Visual Code от «майкрософт». В нем есть встроенная консоль, в отличии от того же саблайма.

2. Установка nodejs

1) Переходим на сайт https://nodejs.org/en/, качаем последнюю версию (Current. Latest features), устанавливаем.

1. Создание Gulp

Установка Gulp’а через Nodejs происходит также, как и установка остальных инструментов через nodejs

1) Открываем в виндоус «выполнить» (в вондоус 10 правой кнопкой по значку «пуска» и далее — «выполнить»

2) Вводим cmd. Нажимаем «enter». Появляется командная строка

3) Теперь нам надо установить Галп на компьютер. Стандартная команда nodejs для этого:

npm install «название пакета» -g

, где:
npm — команда для обращение к инструменту Node Package Manager («управление пакетами»),[/li]
install — команда для установки,[/li]
«название пакета» — название нужного нам пакета, в данном случае gulp. Как-то я уже писал про другой пакет Browser sync и, как видим, алгоритм установки одинаков[/li]
-g — команда для установки пакета глобально, то есть в систему компьютера, а не в определенную папку. Команды, которые начинаются с «-» еще называют «флаг»[/li]
[/ul]

Посетив сайт «галпа» https://gulpjs.com/, видим название пакета «gulp-cli» и в итоге у нас получается строчка

npm install gulp-cli -g

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

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

1) Создаем нужную нам папку, в которой мы будем работать. Для понимания основ пока абстрагируемся от мейкера, и просто создадим пустую папку, назвав ее например «gulp»

2) Переходим в эту папку через командную строку.
Так как по умолчанию путь в командной строке «C:\Users\*имя пользователя*», а наша папка создана скорее всего по-другому пути, то нам следует перейти в нужную нам папку для работы в ней через командную строку
Есть два способа для этого:

а) Переход в папку чисто через командную строку:

1) Сначала вводим «*название диска*:». Например, если папка у нас находится на диске D, то вводим «d:» (без кавычек). Получится что-то типа:

2) Смотрим, какие папки есть на данном диске через команду «dir».

Нам выведется информация типа:

3) Вводим «cd *название папки или пути*» чтобы перейти в нужную нам папку:

Снова вводим dir, а потом переходим в нужную папку. Повторяем шаги, пока мы не оказались в нужной папке.

4) Неудобно? Да. Но к счастью после ввода диска через «d:» мы можем сразу ввести общий путь к нашей папки, например:

теперь у нас строчка «D:\Gen\lesson\Programming\gulp>», а значит мы находимся в нужной папке и можем продолжить работать[/size]

б) Переход через виндоус:

[size=2]1) закрываем окно с командной строкой, переходим через проводник к нашей папке «gulp».

2) зажимаем клавишу «шифт» и не отпуская ее кликаем правой кнопкой по папке

3) В контексном меню выбираем «Открыть окно команд». Радуемся! Консоль открылась сразу с нужным нам путем:

1) Для того, чтобы nodejs видел нашу папку, следует ему ей показать. Как говорят умные люди: «инициализировать»:

npm — команда для обращение к инструменту Node Package Manager («управление пакетами»),
init- команда для инициализации,
-y — команда («флаг», как мы уже знаем) для пропуска предварительных вопросов. Если мы его уберем, то консолька спросит у нас название проекта, имя автора и т.д. Пока нам это не надо, поэтому на помощь приходит «-y»

Итого у нас выходит команда

D:\Yuryol\lesson\Programming\gulp>npm init -y

2) После инициализации в нашу папку добавляется файл «package.json». Это наш основной файл настройки. Открыв его, мы увидим объект, в котором около десятка элементов.

Здесь нас интересует строка «dependencies». В этом элементе, который сам также будет являться объектом, у нас будут указываться пакеты, которые используются в нашем проекте. Пока здесь пусто, но скоро там появится и «gulp», и многие другие пакеты

3) Помните про флаг «-y»? Если бы мы его не поставили, то например такие элементы как «name» и «author» мы заполняли бы через командную строку, и в файле «package» они бы были соответственно другие. Но некоторые поля,например поле «author» мы также можем заполнить и сейчас, главное не забывать кавычки.

4. Добавление Gulpа в наш проект

1) Как я уже говорил, все пакеты мы устанавливаем однотипно: npm install gulp -g

Однако сейчас нам надо установить gulp в папку, то есть локально, а не глобально, поэтому флаг «-g» нам не нужен.
Также для установки gulp локально, мы пишем «gulp», а не «gulp-cli». Вообще, обычно названия пакетов не отличаются при установке глобально и локально, но тут другой случай. В итоге у нас получается строчка

npm install gulp

Еще один момент: install можно и писать и более коротко, просто «i». Поэтому также мы можем вводить:

И третий момент. При локальной установке важны флаги «—save-dev» и «-save».

—save — указывает, что пакет войдет в финальный продукт. Пакет будет добавлен в поле «dependencies» в package.json.
—save-dev — указывает что пакет нам нужен для разработке. Пакет будет добавлен в поле «devDependencies» в package.json.

По умолчанию у нас флаг «—save», но «галп» нам нужен только для разработки. Поэтому мы должны написать

npm i gulp —save-dev

Как и в случае с «инсталл», есть сокращенная запись для —save-dev, а именно короткий флаг «-D». Итого наша строчка:

2) После установки галпа у нас появится папка папка node_modules и файл package-lock.json

Папка node_modules содержит кучу пакетов nodejs. Они нужны для быстрой установки пакетов в наш проект
Файл package-lock содержит зависимости этих пакетов друг от друга.

На них мы пока можем не обращать внимание, главное проверьте поле «devDependencies» в package.json. Оно у нас должно быть

, где «gulp» — название пакета, «^4.0.0» — версия пакета

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

Создаем два файла, например console.js и main.js, которые нам надо объединить в один.


В main.js пишем например:
let a = 5 + 6

В console.js пишем например:
console.log(a)

6. Написание файла для сборки

Наконец мы переходим к написанию коду и непосредственно сборки проекта:

1) Создаем файл js с названием «gulpfiles.js». Название должно быть таким и никак иначе!

2) В нем мы должны подключить галп, поэтому пишем строчку:

const gulp = require(‘gulp’);

Это своего рода экспорт. Мы создаем константу и экспортируем файлы с папки «gulp», который находится у нас в папке «node_modules»

3) Пишем скрипт, который будет брать два файла js и склеивать их в один.
К примеру, если у нас есть два файла console.js и main.js, то мы можем соединить их в один файл, например «plugin.js».

Для этого пишем функцию:

, где:
gulp.src() — метод, в котором мы указываем какие файлы мы должны склеить. Аргумент в них — [‘./console.js’, ‘./main.js’] — массив с путями и названиями этих файлов. «./» — корневая папка, затем следует путь для файла[/li]
.pipe(concat(‘plugin.js’)) — метод для склейки файлов в один. Аргумент ‘plugin.js’ — название файла, в который склеятся оба плагина[/li]
.pipe(gulp.dest(‘./’)) — метод, который указывает в какую папку нам надо сохранить наш получившийся файл. В данном случае сохраняем в корневую папку

4) Указываем название команды, которую будем вводить для вызовы данной склейки файлов:

Первый аргумент — название команды для запуска нашей функции. Второй аргумент: название нашей функции. В данном случае она у нас называется «script»

5) Итого наш код вышел таким:

6) Теперь мы можем запустить нашу склейку файлов через команду «gulp *название команды*». В данном случае у нас:

Мы вводим ее в консоль и вуаля! Получаем ошибку:

8. Установка gulp-concat

Если вы видите ошибку: [17:52:32] ReferenceError: concat is not defined
То значит у нас не установлен пакет, в данном случае «concat».

Дело в том, сто команда «concat » — это команда не галпа, а расширения для него «gulp-concat». Поэтому просто устанавливаем этот пакет:

1) Как уже знаем устанавливаем пакет в папку с добавлением в полк «резработка» в package.json:

npm install —D gulp-concat

Да, кстати. Чтоб постоянно не вводить однотипные команды в консоли, мы можем нажимаеть стрелочки «вверх» и «вниз». И тогда команды в консоль будут вписываться сами

2) Подключаем пакет в проект добавив в файл gulpfile.js строчку:

const concat = require(‘gulp-concat’);

3) Теперь наконец-то у нас всё работает!

И у нас создается файл plugin.js , в котором есть наш код^

Как известно, переменную let нельзя объявлять ПОСЛЕ вызова, поэтому меняем порядок склейки файлов, чтобы сначала был «main», и только затем «console». И вместо

return gulp.src([‘./main.js’, ‘./console.js’])

9. Минификация файлов

Для минификации кода у нас есть такой инструмент как gulp-uglify.

1) Делаем привычные вещи: устанавливаем его через

npm install -D gulp-uglify

2) Экспортируем пакет в скрипт:

const uglify = require(‘gulp-uglify’);

3) Добавляем строчку в нашу функцию, которая минимизирует файл.

Ее надо добавить после объединения файла но ПЕРЕД сохранением:

4) запускаем gulp plugin и видим ошибку:

5) Дело в том, что этот пакет не может работать с синткаксисом ES6. Есть два выхода: использовать пакет babel, которые превратит наш код в старенький добрый жаваскрипт без всяких там let:

var a = 5+6;
console.log(a);

Как это делать пока объяснять не будет, можно попробовать самому. Проблема тут в том, что не всегда нам надо переводить новый синтаксис в старый. К примеру, MV работает с новым синтаксисом и например я хочу чтоб и получившийся файл был с новым синтаксисом.
Поэтому мы будем использовать gulp-uglify-es

10. Минификация файлов с синтаксисом ES6

1) Устанавливаем
npm install -D gulp-uglify-es

2) Добавляем в функцию
const uglify = require(‘gulp-uglify-es’).default;

3) Запускаем gulp plugin и видим что на выходе у нас получился минифицированный файл plugin.js

4) Мы можем сделать минификацию еще жестче. Для этого передаем аргументом в методе минификации объект

5) Теперь код стал совсем короткий:

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

11. Автоматический запуск заданий

Согласитесь, неудобно постоянно запускать в командной строке gulp plugin . Поэтому мы будем использовать gulp-watch, чтобы склейки плагина происходила всегда, когда изменяется какой-либо файл с типом .js

1) Устанавливаем gulp-watch через npm install -D gulp-watch, а затем подключаем его в скрипт через const watch = require(‘gulp-watch’);

2) Пишем после всего скрипта отдельный «таск»

, где
gulp.task() — вызов таска
‘watch’ — первый аргумент, означающий название команды для запуска. Можем назвать ее как нам захочется
gulp.watch() — метод для слежением за файлами
‘./*.js’ — название файлов. Здесь у нас написан сначала путь до файлов «./», а затем ВСЕ файлы с разрешением .js — «*.js»
gulp.parallel(‘plugin’) — метод в котором арге=ументом передаем название таска, который мы хотим запустить. в нашем случае это plugin. Если у нас несколько заданий, ты можем их перечислять через запятую, напрмиер: gulp.parallel(‘plugin’, ‘minImg’)

3) Итого у нас получится следующий код:

const gulp = require(‘gulp’);
const concat = require(‘gulp-concat’);
const uglify = require(‘gulp-uglify-es’).default;
const watch = require(‘gulp-watch’);

function script() <
return gulp.src([‘./main.js’, ‘./console.js’])
.pipe(concat(‘plugin.js’))
.pipe(uglify(< toplevel: true >))
.pipe(gulp.dest(‘./’))
>

gulp.task(‘watch’, function() <
gulp.watch(‘./*.js’, gulp.parallel(‘plugin’));
>)

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

1) Применить знания на практике: настроить gulpfile для rpg maker mv, чтоб он склеивал файлы с разрешением .js, находящиеся в созданной папке «devJs» в корне папки с игрой и создавал один файл в \js\plugins

2) Сделать чтоб создавалось два файла: минифицированный и не минифицированный. Подсказка: поможет пакет ‘gulp-rename’

3) Сделать чтоб также создавался третий файл, в котором код ES6 переведен в старый формат (в этом нам поможет babel)

4) Создать задание для минификации всех картинок папки img мейкера (‘gulp-imagemin’)

5) gulp не удаляет файлы , а пишет поверх. Поэтому например если вдруг мы удалим картинку, то копия картинке в папке с минифицированными картинками останется. Создайте задания для очищения папки с минифицированными картинками перед тем как туда что-то записывать

Последний раз редактировалось Yuryol; 03.03.2020 в 22:09 .

Джентльменский набор Front-end разработчика

Ни для кого не секрет, что современный front-end разработчик обязан иметь в своем вооружении один из инструментов сборки проектов такие как Gulp или Grunt. До какого-то времени Grunt занимал монополию в этом вопросе, но отделившаяся от Grunt группа разработчиков решила создать свой легковесный и быстрый таск-менеджер Gulp.

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

Какие мы используем технологии

  • Программная платформа: Node.js
  • CSS пре-процессор: Stylus
  • Таск-менеджер: Gulp

Зачем фронтендеру таск-менеджер

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

CSS пре-процессоры — реально удобны и ускоряют написание стилей, но компилирование кода написанного на пре-процессоре в обычный CSS, не совсем тривиальная задача которая решается одной кнопкой. Тут то нам на помощь и приходит таск-менеджер. Преобразование кода происходит не то чтобы нажатием кнопки, все происходит в режиме онлайн без вашего участия (конечно если правильно все настроить).

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

Установка Node.js

Если вы знаете как установить node.js на свою систему и пользуетесь ей, можете смело переходить к следующему заголовку.

Хотелось бы сразу предупредить, что все описанные действия актуальны для Mac OS X, но в целом применимы и для других Unix систем. Разработка через таск-менеджер и командную строку в Windows несколько более затруднительная и тут она описана не будет. Однако, если вы все же пользуетесь Windows и не готовы от него отказываться, то могу предложить вариант использования виртуальной машины с установленной Ubuntu, я использую этот вариант на своей домашней системе, что в целом довольно удобно.

Итак первым делом нам предстоит скачать и установить пакет node.js в свою систему для работы с нодой через консоль. Переходим на официальный сайт node.js и скачиваем свежую stable версию для вашей системы. После установки в вашей командной строке должна быть доступна команда node . Чтобы проверить что ваша node работает, введем в командной строке команду

в ответ должна появиться версия установленной node.js. Если все хорошо, идем дальше.

Структура директорий проекта

В наших проектах мы будем использовать унифицированный вариант структуры:

Установка

В консоли с помощью команды cd перейдем в корневой каталог разработки, создадим каталог нашего проекта mkdir start и перейдем в него.

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

mkdir build resource src src/css src/css/images src/css/sprites src/css/partial src/css/vendor src/js src/template src/template/include src/img src/fonts

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

touch gulpfile.js stylus.template.mustache .gitignore src/.htaccess src/TODO src/css/styles.styl src/css/partial/styles.styl src/css/partial/mixins.styl src/js/main.js src/js/_main.js src/template/pages.html src/template/index.html src/template/include/header.html src/template/include/footer.html

Создадим package.json

все всплывающие вопросы можно прощелкать через Enter, node установит им значения по-умолчанию, либо заполнить предлагаемые поля.

.gitignore

Говорим гиту какие каталоги игнорировать и не заливать в репозиторий:


Каталог node_modules появится позже после установки плагинов и будет содержать в себе все node-плагины проекта.

src/.htaccess

Устанавливаем для сервера дополнительное gzip сжатие и кэширование:

src/css/styles.styl

Подключим пользовательские файлы стилей в основной файл стилей:

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

Эта страница содержит в себе todo лист разработки. Более подробно о работе с данным файлом вы можете почитать на странице плагина PlainTasks для Sublime Text.

На этом установка структуры завершена.

Установка плагинов через пакетный менеджер npm

Node.js по-умолчанию включает в себя пакетный менеджер npm, в репозиториях которого собрано множество плагинов, с которыми нам и предстоит работать.

Установка плагина Gulp

Для начала нужно установить Gulp глобально (с ключем -g ) на нашу систему

npm install gulp -g

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

Теперь нужно установить Gulp локально в каталог проекта

npm install gulp —save-dev

Ключ —save-dev говорит о том, что информация о плагине (имя в репозитории и его версия) будет добавлена в конфиг package.json и запомнит его для данного проекта. Поскольку мы не храним в гите тяжеловесную папку с плагинами node_modules , сохраненная в конфиге информация об установленных плагинах позволит всего одной командой npm i развернуть в проекте все нужные плагины.

Для каждой команды существуют сокращения, поэтому команду выше мы можем записать в более коротком формате

В дальнейшем мы так же будем пользоваться сокращенным форматом команд.

Плагин Stylus для Gulp

В наших проектах мы пользуемся пре-процессором Stylus который отлично работает и компилируется на ноде.

npm i gulp-stylus -D

Плагины обработки CSS

Автопрефиксер — автоматически подставляет префиксы -ms- -o- -moz- -webkit- в нужные свойства:

npm i gulp-autoprefixer -D

Минификация CSS — плагин минифицирует выходной CSS файл избавляя его от лишних пробелов и табуляций:

npm i gulp-minify-css -D

Плагины обработки изображений

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

npm i gulp.spritesmith -D

Добавим в ранее созданный файл stylus.template.mustache маску вычисления позиций в спрайтах:

Добавим специальные миксины в mixins.styl :

Подключим миксины и генерируемый файл с координатами в основной файл стилей src/css/styles.styl :

Обратите внимание что файлы спрайтов должны подключаться до пользовательских стилей @import ‘partial/styles’

Оптимизация изображений под веб — плагин автоматически вырежет всю лишнюю информацию из ваших изображений и ужмет их до оптимального размера, что позволит в некоторых случаях добиться сокращения объема изображений до 90%:

npm i gulp-imagemin -D

Плагины обработки JavaScript

Минификация JS — плагин максимально минифицирует ваш JS код сокращая время его загрузки:

npm i gulp-uglify -D

Отслеживание ошибок JS — плагин досканально проверит ваш JS код на выявление всех несоответствий и выведет их в консоль:

npm i jshint gulp-jshint -D

Плагины обработки HTML

Подключаемые файлы — плагин позволяет хранить статичные части сайта, такие как header , footer , aside и т.д., в отдельных файлах и подключать их в любой части другого файла. Больше нет надобности, в случае мелких изменений в шапке, менять десятки, а то и сотни html страниц шаблона:

npm i gulp-rigger -D

Плагин так же совместим с JS.

Подключим пользовательский JS в основной файл JS src/js/main.js констуркцией:

Подключим в index.html файлы header.html и footer.html

Прочие плагины

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

npm i gulp-connect -D

Предохраняем Gulp от вылета — иногда случается так, что Gulp может вылететь из режима наблюдения в случае возникновения критических ошибок (в основном из-за JS). Данный плагин, по возможности, старается оставить процессы Gulp работоспособными:

npm i gulp-plumber -D

Переименование файлов — самая обычная работа с именами файлов. Плагин позволяет полностью переименовывать файлы, изменять расширение, добавлять префиксы и постфиксы, например чтобы привести файл вида style.styl в style.min.css :

npm i gulp-rename -D

Клинер — иногда возникает потребность в полном очищении каталога build , тут нам на помощь приходит плагин:

Sourcemap — для того чтобы после минификации ваши файлы оставались читаемы через отладку браузером, нужно добавлять sourcemap в минифицируемые файлы:

npm i gulp-sourcemaps -D

Расширенные возможности watch — плагин делает watch умным, теперь он не перезаписывает все файлы в билд при изменении всего одного файла, перезаписывается конкретный измененный файл, что экономит время и ресурсы:

npm i gulp-watch -D

Проверим package.json

После всех установленных плагинов, проверим наш package.json . Он должен иметь примерно следующий вид:

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

В папке проекта также должен появиться каталог node_modules в котором хранятся все файлы плагинов ноды. Все нужные плагины установлены, можно переходить к настройки конфига Gulp.

Настройка gulpfile.js

gulpfile.js — это основной файл конфигурации нашего таск-менеджера, именно в нем мы будем хранить все настройки и команды.

Вся работа Gulp сводится к task (англ. задача). Задача — это отдельная самостоятельная функция с именем. Каждая задача может быть вызвана отдельно.

Режим совмстимости с современными стандартами

Во первых в начало файла подключим режим совместимости только по современным стандартам:

Подробнее про эту директиву можно почитать тут.

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

Плагины инициализируются следующей конструкцией:

var initPlugin = require(‘plugin-name’);

В соответствии с этой конструкцией инициализируем все наши плагины:

Константы путей

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

Обратите внимание, что мы можем использовать маски имен:

  • *.js — все файлы с расширением js
  • [^_]*.js — все файлы с расширением js, исключая те что начинаются с нижнего подчеркивания
  • *.* — любые файлы с любым расширением в пределах текущей дитректории
  • /**/*.html — все файлы с расширением .html в пределах текущей директории и всех дочерних директорий

Task (задачи)

Теперь, когда все константы прописаны, можно приступить к написанию тасков. Все задачи имеют следующую конструкцию:

Мини-сервер и LiveReload

Первым делом мы настроим работу локального сервера и LiveReload:

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

Билд HTML

Билд JS

Билд спрайтов

Все изображения для объединения в спрайты складываются в директорию src/css/sprites/ и после прогона через Gulp становятся единым спрайтовым изображением. В спрайты не стоит складывать логотипы и бэкграунды без четких размеров.

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

Теперь объект с классом .lorem примет размеры изображения и само изображение в качестве фона.

Билд статичных изображений


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

Билд динамичных изображений

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

Билдим CSS

Отдельный таск для внешних стилей:

Также добавим таск для билда общего CSS:

В случае если требуется обработать внешние стили отдельно от домашних и выгрузить их отдельными файлами нужно раскомментировать строчку ‘cssVendor:build’

Билд шрифтов

Билд .htaccess

Общий билд

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

Очистка билда

Иногда требуется полностью очистить каталог build . Здесь нам на помощь придет следующий таск:

Watch или отслеживание изменений в реальном времени

Одной из самых важных и полезных функций Gulp является функция watch , которая позволяет отслеживать в реальном времени все изменения с производимыми файлами и в зависимости от этого выполнять конкретные действия:

Действия по-умолчанию

Действия по-умолчанию — это то какие задачи будет выполнять таск-менеджер при вводе команды gulp в консоль:

В нашем случае по-умончанию мы сбилдим наш проект, включим режим watch и запустим сервер.

Команды для командной строки

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

  • gulp — основная команда, запускает таск default
  • gulp build — билдим всё
  • gulp watch — запуск watch
  • gulp clean — очистка каталога build
  • gulp connect — запуск сервер
  • gulp html:build — билд HTML
  • gulp jshint:build — проверяем JS на ошибки
  • gulp js:build — билд JS
  • gulp sprites:build — билд спрайта
  • gulp image:build — билд статичных изображений
  • gulp imagecontent:build — билд динамичных изображений
  • gulp cssOwn:build — билд пользовательского CSS
  • gulp cssVendor:build — билд внешних CSS
  • gulp css:build — общий билд CSS
  • gulp fonts:build — билд шрифтов
  • gulp htaccess:build — билд .htaccess

На данном этапе настройка gulpfile.js закончена.

Копируем стартовый пакет в проект

Для начала зайдем через консоль в папке где мы ведем разработку, например cd develop/example и скопируем все из директории стартового пакета в наш проект cp -a

Такой способ копирования наиболее удобен, т.к. точно скопирует все, в том числе и скрытые файлы .gitignore и пр.

Заключение

Используя данное руководство мы подготовили стартовый пакет для использования Gulp в своих проектах для Front-end разработки.

Скачать готовый пакет: start.zip

Так же данный пакет доступен на GitHub

Post Scriptum

Данная статья не является заключительной и будет обновляться в зависимости от изменений и улучшений.

Конфигурация сборщика проектов Gulp

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

Основы

У меня было несколько попыток создать удобную конфигурацию сборщика, в последнем проекте мне это более менее удалось. Чего хотелось добиться от Gulp:

  1. Компиляция sass/scss, автопрефиксы и другие полезности для css
  2. Создание спрайта + создание к нему css стилей
  3. Минификация кода js, css, склейка
  4. Оптимизация watch’еров, чтобы при задачи отрабатывали 1 раз после изменений, а не дублировалась отработка задач по цепочке.
  5. Работа с PHP файлами
  6. Автоперезагрузка окна браузера в случае изменений без использования сторонних расширений
  7. Обработка ошибок. Т.к. делаю на виртуальном удаленной машине, то иногда в процессе загрузки картинок, исходных файлов – создаются временные файлы. Watcher их видит и в итоге мы получаем ошибку сборщика, приходится запускать все сначала. Необходимо было исключить ситуацию с завершением работы сборщика после получения ошибки.

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

Gulp для начинающих

Дата публикации: 2015-09-22

От автора: Gulp – инструментарий, облегчающий жизнь веб-разработчика, с его помощью можно задавать различные задачи. Часто используется для таких front-end задач как: поднятие сервера, автоматическое обновление страницы браузера в любой момент сохранения файла, использование препроцессоров как Sass или LESS, оптимизация CSS, JavaScript и изображений.

Это далеко не полный список возможностей Gulp. Если постараться, то можно даже создать генератор статических сайтов (я делал!). Так что да, Gulp это очень мощный инструмент. Однако, если вы хотите в нем разобраться, придется потратить время на изучение Gulp.

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

Почему Gulp?

Приложения на подобие Gulp относятся к так называемым «таск раннерам», так как они используются для запуска задач по сайтостроению. Два саммых популярных менеджера задач на сегодня это Gulp и Grunt. Но кроме названных, конечно, существуют и другие. Broccoli больше используется для компиляции ресурсов, одна из наиболее распространенных задач в таск раннерах.

Существует уже масса статей по поводу различий между Grunt и Gulp, и почему одно приложение стоит использовать, а другое нет. Brunch по типу задач тоже очень похожа на описанные выше программы, также выполняет такие задачи связанные с сервером или проверкой файлов.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

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

Что необходимо настроить

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

Компиляция Sass в CSS

Обновление браузера при любом сохранении файлов

Оптимизация всех ресурсов (CSS, JS, шрифты и изображения)

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

Сборка фронтенда — часть 3. Сборка gulp

В предыдущих частях статьи про сборку фронтенда мы поговорили про основы сборки и написали простое тестовое приложение на backbone + require.js.

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

Внимание, это не статья по основам основ gulp! Предполагаю, что Вы знаете, что такое nodejs и npm. Если не знаете, то лучше предварительно погуглите, что это такое и как это все поставить. Установка nodejs, npm и gulp займет у Вас 5-10 минут. А теперь к самой статье.

Мое рабочее окружение

По некоторым причинам мне приходится работать со старой версией nodejs. Поэтому версии плагинов gulp из моего package.json могут отличаться от Ваших. Советую не лениться и не запускать npm install с моим package.json из исходников, а устанавливать все плагины руками, благо, что нужные инструкции в статье будут.

Все версии плагинов, указанные в исходниках, работают на таком окружении:

  • os — windows7
  • nodejs — 0.10.35
  • npm — 1.4.28
  • gulp — 3.9.1

package.json и gulpfile.js

Это первое, с чего мы начинаем сборку фронтенда — создадим package.json в корне проекта.

Стандартная заготовка, можно ничего не менять. После этого ставим gulp. Если он еще не установлен глобально, то делаем npm install -g gulp

Затем устанавливаем gulp как локальную зависимость для нашего проекта — npm install gulp —save-dev. Опция —save-dev обновит package.json, добавив в него секцию

Теперь создадим пока что пустой файл gulpfile.js, тоже в корне проекта, и приступим к задачам сборки. Начнем с базового — с очистки результатов предыдущей сборки.

gulp-clean — удаление файлов и папок

Как мы помним, собранные файлы будут складываться в папку build в корне проекта (на самом деле мы наследим и в src, но зачем и где — чуть позже). Поэтому перед каждым запуском сборки нужно очищать результаты предыдущей — то есть просто сносить папку build.

Ставим плагин gulp-clean — npm install gulp-clean —save-dev. А в gulpfile.js пишем такой код

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

Зачем нужен объект path? Дело в том, что задач у нас будет много, также будет много путей к файлам и папкам. И их удобнее хранить в одном месте, в конфиге, а не разбрасывать по отдельным gulp-таскам. Сейчас объект небольшой, да еще и с пустыми полями, но по мере написания каждой задачи мы будем добавлять в него новые пути и он очень быстро разрастется. Как Вы уже догадались, в build будут пути к стилям, скриптам и картинкам, уже собранным для продакшена, в src — для разработки, в watch — тоже для разработки, файлы для наблюдения за ними, чтобы запускать задачи сборки в режиме онлайн. Но обо всем по порядку.

Сама gulp-таска в конце собственно и очищает папку build. Попробуйте сейчас создать эту папку, кинуть туда пару файлов и запустить в консоли gulp clean. Убедитесь, что после отработки задачи папки исчезла — то, что нужно.

gulp-sass — собираем стили

Ставим плагин gulp-sass: npm install gulp-sass —save-dev. Теперь сама задача. Давайте договоримся, что пока будем собирать стили для режима девелопера. Как мы помним, в предыдущем уроке мы так и не подключили стили к проекту, хотя и написали sass-модули. Пора это исправить. Дополним раздел var вот так:

Добавим пути к нашему конфигу:

Все просто: указываем, что начальный файл main.scss, который уже подключает в себе все дополнительные sass-модули. А также скажем, что положить выходной файл css мы хотим в папку src/styles. Называться он будет так же, как и sass-файл, только с нужным расширением — main.css.

И сама gulp-таска sass

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

Так как main.css у нас собирается автоматически, то нет нужды держать его в проекте, нужно удалять его при запуске gulp clean. Поэтому обновим конфиг:

Теперь запустите снова gulp clean и убедитесь, что удаляется не только папка build, но и файл main.css.

gulp-sourcemaps — sourcemaps для стилей

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

Что это такое? Мы пишем стили для проекта в sass-файлах. Когда мы захотим отладить верстку, то откроем браузерный dev tools, поправим стили, как нужно и захотим их сохранить в проекте. Вот здесь-то нас и подстерегает неудобство. Стили собраны в один-единственный файл. Хорошо нам с тестовым приложением, где 3 строчки стилей лежат в двух файлах, а как быть со стилями, которые собираются из хотя бы полусотни sass-файлов? Для этого и нужны sourcemaps — эти файлы-«карты ресурсов» «запоминают», какие стили в каких исходных sass-файлах находятся. Что конечно же значительно облегчит работу с версткой.

Чтобы было совсем наглядно, вот два скриншота, как мы ищем, где лежат стили для тега h1. Вот здесь мы собрали стили не зная о sourcemaps: Заметьте, мы ничего не знаем о том, где стили для h1 искать в нашем проекте. А вот как выглядит dev tools, когда мы подключим sourcemaps Заметили разницу? Видно, что стили для h1 лежат в первой строке файла _page.scss. А ниже указаны для body — файл _common.scss — удобно. Надеюсь, если Вы до этого не знали про sourcemaps, то теперь точно захотите ими пользоваться :-)

К тому же создавать их с помощью gulp очень просто. Ставим плагин npm install gulp-sourcemaps —save-dev. Пара изменений в gulpfile.js

На заметку: sourcemaps с таким же успехом применяются и при склеивании/сжатии js-файлов, так что пользуйтесь этим инструментом на полную. А мы переходим к сборке модулей requirejs в один файл. Если Вы не знакомы с подходом requirejs, то можете просто пропустить следующий раздел.

gulp-requirejs — сборка require.js


Начиная с этого раздела мы наконец-то вспомним, что сборка фронтенда в первую очередь задумана для боевого окружения, поэтому займемся amd-модулями requirejs. Все модули нужно собрать в один файл да еще сжать его и выкинуть в папку build/js с названием build.js. Здесь долго пояснять не буду, сборку мы разобрали в предыдущей части, когда писали тестовое приложение.

Ставим плагин gulp-requirejs npm install gulp-requirejs —save-dev. Подключаем его:

Прописываем новые пути в path

И самое хитрое — задача gulp-requirejs и конфиг для нее

Подробно объяснить здесь сложно, нужно знать принципы подключения requirejs и внимательно следить за путями к файлам и папкам. Если Вам лень в этом разбираться, то можете просто использовать этот готовый конфиг и по мере надобности понемногу в нем ковыряться.

Почему requirejs:build? Потому что для подключения собранного файла нам нужно будет сначала подключить библиотеку require.js в index.html, и поэтому мы сейчас напишем таску requirejs:copy, которая копирует нужную нам либу в папку build — готовит все для продакшена. Но пока запустите gulp requirejs:build и убедитесь, что сгенерировался файл build/js/build.js.

gulp-contrib-copy — копирование файлов

Теперь нам нужно скопировать файл src/lib.require.js в папку build/js, чтобы все было готово для подключения javascript на странице. npm install gulp-contrib-copy —save-dev Обновляем gulpfile.js

Запустим gulp requirejs:copy_lib и увидим, что в папке build/js/ рядом с build.js появился require.js — значит, все получилось! Идем дальше.

gulp-uglify — сжатие js-файлов

В двух последних задачах requirejs:build и requirejs:copy_lib мы подготовили два файла, предназначенных для боевого окружения. Но хорошим тоном считается сжатие файлов для уменьшения трафика пользователей и ускорения загрузки. В этом нам поможет плагин gulp-uglify.

Ставим. npm install gulp-uglify —save-dev. Сам по себе плагин не используется, он действует совместно с другими задачами, в нашем случае это будет и сборка requirejs:build, и копирование библиотечки requirejs:copy_lib. Поправим код

Посмотрим, что мы изменили. Кроме стандартного подключения, мы добавили всего лишь одну строку .pipe(uglify()) к нашим задачам непосредственно перед формированием выходных файлов. Теперь запустите обе gulp-таски снова и проверьте, что в build/js/ лежат те же файлы, только уже минифицированные — и это пригодно для продакшена. Переходим к последней на сегодня задаче сборки javascript — посмотрим, как работает плагин gulp-concat

gulp-concat — склеивание файлов

Что и зачем мы собрались клеить? Несмотря на то, что весь js-код мы разбили на amd-модули и собрали с помощью gulp-requirejs, очень часто на проекте возникает необходимость подключить какие-то сторонние скрипты, которые не хочется мешать с основным кодом. Это как правило, скрипты вроде inspectlet и яндекс-метрики, которые в больших количествах любят притаскивать аналитики и маркетологи.

Сложим эти файлы в папке src/scripts, чтобы они не мозолили нам глаза, и будем склеивать их все в один, сколько бы их там ни было, и выкидывать в папку build/js/ под названием scripts.js, предварительно сжав. Ух, какое длинное предложение получилось!
Наши действия: создадим папку src/scripts и создадим в ней для примера 3 файла, google-analytics.js, inspectlet.js и shoppyboom.js. Их содержимое незатейливо:

Установим плагин npm install gulp-concat —save-dev. И теперь gulpfile.js

Все достаточно просто. Указываем исходную папку, из которой будут браться все js-файлы, склеиваться в один под названием scripts.js, сжиматься и выкидываться в папку build/js/ уже третьим и последним по счету js-файлом для продакшена. И конечно же, запускайте gulp scripts и проверяйте, что файл действительно есть с содержимым

Мы вплотную подошли к тому, чтобы запустить наше приложение в production-режиме. Но до этого осталось сделать еще одну важную задачу — оптимизацию и сжатие изображений.

gulp-imagemin и imagemin-pngquant — оптимизация и сжатие изображений

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

Установка npm install gulp-imagemin —save-dev и npm install imagemin-pngquant —save-dev. Но здесь хочу обратить Ваше внимание. Именно с этими плагинами у меня прошло не все так гладко. С моей старой версией ноды 0.10.35 согласились работать плагины только с версиями 2.1.0 и 4.1.2 соответственно.

Пробуйте сначала ставить их, как обычно, последние версии по умолчанию. Если Вы столкнетесь проблемой сборки, в консоли будут сыпаться gulp ошибки при сборке или даже при установке. И тогда придется с гуглом наперевес искать подходящие под Вашу ноду версии оных плагинов. Ставить их придется с указанием конкретной версии, вот так npm install gulp-imagemin@2.1.0 —save-dev. Второй плагин аналогично. При этом в package.json имеет смысл убрать ^ из версии плагинов, то есть

Иначе когда Вы захотите обновить версии всех плагинов и запустите npm install, то рискуете обновиться и поломать сборку картинок. А затем долго и нудно возвращать старые версии. Впрочем, будем надеяться, что с Вашей адекватной версии ноды все прекрасно установится и по умолчанию. Редактируем gulpfile.js

Если с плагинами все хорошо и все сделали правильно, то запуск gulp img соберет нам все картинки (всю одну) и выкинет в build/img/ в сжатом виде. Проверяйте. А мы меж тем переходим к самой интересной на мой взгляд теме — препроцессинга html и окончательному формированию production-окружению.

gulp-preprocess — препроцессинг html

На самом деле, плагин умеет препроцессить не только html, но и js, что тоже бывает очень полезно. Но в нашем случае мы рассмотрим только html. Давайте поставим плагин, дабы не забыть про него, и затем разберемся, а что же такое препроцессинг и зачем он нужен.
npm install gulp-preprocess —save-dev

Представим, что у нас настроены задачи для генерации двух вариантов css-файлов: сжатых (для production) и обычных с sourcemaps (для development). А еще мы в режиме разработки не хотим подключать упомянутые ранее js-файлы скриптов, но хотим их на production. А если мы разрабатываем SPA и общаемся с сервером через api, то адреса серверов могут быть различными. Например, на боевом сайте мы обращаемся к серверу по запросам вида webdevkin.ru/api/v1/, но параллельно работаем над новой версией api и тестируем ее на test.webdevkin.ru/api/v2/.

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

Создадим папку html в src и перенесем в нее файл index.html. Это будет заготовка html, в которой мы чуть поправим содержимое body.

Ничего сложного нет, для режима разработки development мы подключаем require.js из папки lib, а для production — из js. Напомню, что src и build у нас — это корневые папки проектов. И файлы js в них располагаются в разных местах. Плюс для production подключим дополнительно js/scripts.js, которые не нужны нам в разработке.

Надеюсь, ситуация и полезность такого подхода немного проясняется. Осталось сделать так, чтобы эта html-заготовка превратилась в валидный html-файл. В этом нам поможет плагин gulp-preprocess.
npm install gulp-preprocess —save-dev
Добавляем задачу в gulpfile.js

Что мы сделали? Добавили пути в конфиг, указали корневые папки обоих проектов, для src еще указали, где хранится исходный html-шаблон. Не забыли включить генерируемый src/index.html в задачу очистки. build/index.html специально не включаем, папка build и так удаляется целиком. И написали 2 задачи препроцессинга: html:dev и html:prod.

Эти 2 задачи отличаются друг от друга только установкой окружения NODE_ENV и выходными путями, куда складывается преобразованная html. Запустите по очереди gulp html:dev и gulp html:prod и увидите, что в папках src и build соответственно появились index.html с разным, нужным нам содержимым.

Итак, js-скрипты подключаются так, как нам нужно. Но не будем забывать про стили, ибо собранный файл main.css нужно подключать из разных папок: src/styles и build/css. Заменим строку подключения стилей в srс/html/index.html на

Пути к стилям мы указали правильно, но у нас есть только одна задача sass, которая собирает несжатый main.css в src/styles да еще и генерирует sourcemaps. Это отлично для разработки и никуда не годится для боевого сайта. Давайте это исправим. Сначала добавим путь к стилям в build

А затем вместо задачи sass создадим две: sass:dev и sass:prod.

Видим, что для сборки development ничего не поменялось, кроме названия. А вот dev:prod существенно отличается: мы не генерируем в ней sourcemaps, зато сжимаем выходной файл опцией . Как обычно, проверяйте, что все работает, gulp sass:dev и gulp sass:prod.

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

gulp develop и gulp production — запускаем сборку одной командой

Мы написали уже с десяток задач под разные окружения, но не собираемся же каждый раз вбивать все их руками. Не для этого же придуманы инструменты сборки. Нет, нам понадобятся всего две задачи, gulp develop и gulp production, которые сами разберутся, какие задачи нам нужно выполнить для нужного окружения. Привожу сразу код и все встанет на свои места.

Все! По запуску одной команды мы сгенерируем все нужные файлы для разработки или деплоя на продакшен. В режиме development нам достаточно только препроцессить html и собрать стили. В production делаем все — и препроцессинг, и стили, собираем модули requirejs в один файл, еще и копируем библиотечку require, а также оптимизируем изображения и склеиваем и копируем файлы scripts.

gulp-sync — запускаем задачи синхронно

Это небольшое отступление от темы. Мы только что написали задачи develop и production, которые запускают множество мелких задач. Природа gulp-a такова, что в таких случаях все задачи запускаются асинхронно. И это здорово, положительно сказывается на скорости работы, если бы не одно но.

Есть задачи, которые должны выполняться только последовательно. В нашем случае, в первую очередь должна отработать очистка предыдущих результатов, и только потом запускаться все остальные таски. gulp умеет делать это нативными средствами, но не очень удобочитаемыми, поэтому воспользуемся сторонним плагином gulp-sync.
npm install gulp-sync —save-dev
И поправим код gulpfile-a

Немного поправили задачи develop и production. И теперь мы уверены, что clean не очистит нам уже возможно сгенерированные другими задачами файлы.

gulp-watch — собираем в режиме онлайн

Написанные задачи отлично подходят для запуска сборки в режиме production. Но для разработки все же чего-то не хватает, а именно. Когда мы поменяем пару строк в sass-файлах или в index.html, нам придется запускать gulp sass:dev, gulp html:dev или gulp develop. Каждый раз врукопашную это делать совсем не интересно. Для этой рутинной работы существует замечательный плагин gulp-watch. Он следит за изменяемыми нами файлами и автоматически запускает нужные задачи сборки. Посмотрим, как это работает.

npm install gulp-watch —save-dev
Правим код

Казалось бы, сложная задача, которая сэкономит нам уйму времени, но так легко и быстро настраивается. Всего лишь указали, за какими файлами мы хотим следить и какие задачи запускать при их изменении. Обратите внимание, мы добавили задачу watch в develop. Теперь gulp develop не только соберет стили и html для разработки, но и запустить задачу их автоматической пересборки — отлично!

Для проверки запускаем gulp develop и пробуем редактировать, например, sass-файлы. В терминале сразу увидите, как gulp реагирует на Ваши действия и запускает задачу sass. То же самое и с html. Параллельно проверяте содержимое src/styles/main.css и src/index.html и убеждайтесь, что их содержимое меняется.

browser-sync — запуск локального веб-сервера

И напоследок рассмотрим очень крутую штуку, легко позволяющую поднять локально веб-сервер. Я упоминал, что для проверки работы Вам нужно было настроить apache или nginx, или запустить сервер средствами IDE, или заливать файлы на хостинг. С помощью этого плагина наш проект становится совершенно самодостаточным. Всего лишь одна команда позволит запустить проект в нужном режиме, development или production. То есть из двух разных папок, src или build. Давайте поставим плагин и проверим на примере.
npm install browser-sync —save-dev

Мы создали конфиги для веб-сервера, указав разные корневые папки и порты, а также написали собственно задачи для запуска webserver:dev и webserver:prod. webserver:dev мы еще добавили в задачу develop. Проверим, что из этого получилось.

Запустите теперь gulp develop и немного подождите. У Вас откроется браузер, где в новой вкладке по адресу http://localhost:9001 откроется наш проект, запущенный из папки src. Откройте консоль и убедитесь, что это действительно режим разработки: стили и скрипты не сжаты, 3 файла scripts не загружены, для стилей есть sourcemaps. При этом в фоне работает watch, и если Вы поменяете стили, то переключившись в браузер и обновив страницу, Вы сразу увидите сделанные обновления. Просто отлично!

Получается, теперь все что нам нужно, чтобы начать работать — это запустить gulp develop. Остальное все сделается за нас: очистятся результаты предыдущей сборки, соберутся стили и html, запустится наблюдатель watch и веб-сервер. Да еще и откроется браузер с запущенным проектом.

В режим production я не стал включать webserver:prod — мы собираем для продакшена не чтобы запустить браузер, а чтобы собрать файлы и залить их на боевой сайт. Но убедиться, что все собрано правильно и корректно работает, смысл имеет. Сделайте сначала gulp production, а затем gulp webserver:prod. Проект из папки build запустится с адресом http://localhost:9001.

Открыв dev tools, Вы легко проверите, что подключились именно продакшеновские файлы, сжатые стили и скрипты, никаких sourcemaps. Также заметите 3 отдельных js-файла из папки scripts, которые сыпят в консоль сообщения ‘init что-то там’.

Дополнение: browserSync.reload

Грамотный человек в комментариях (Dima) напоминает про одну замечательную вещь: browserSync.reload. Иными словами, liveReload, живая перезагрузка. Настроив ее, нам больше не придется обновлять страницу в браузере руками, после правки кода она перезагрузится сама. И сделать это очень просто.

Допустим, мы хотим обновлять страницу при изменении html, стилей, javascript-кода и шаблонов в папке tpl. Конечно, только в режиме develop. Для этого в таски html:dev и sass:dev нужно дописать одну строчку — .pipe(browserSync.reload())

Для js-кода и шаблонов делаем чуть по-другому. Добавим пути к отслеживаемым файлам в конфиг path.watch и одну строку в watch-таску

Перезапускайте gulp develop и пробуйте редактировать код, страница обновляется, кодить стало намного приятнее.

browserSync tunnel

Хочется упомянуть еще об одной небольшой детали насчет browserSync. Откройте терминал и увидите примерно такую картину Обратите внимание на строку
Tunnel: http://pjwhpjlsom.localtunnel.me
Она означает, что прямо сейчас Ваш проект доступен по этой ссылке извне. Можно отправить ее коллеге-программисту или дизайнеру. Конечно, это работает только до тех пор, пока у Вас запущен веб-сервер. При следующем запуске адрес поменяется: удобно и безопасно.

Выводы, исходники проекта и нужные ссылки

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

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

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

Исходники проекта доступны по этой ссылке. Желаю удачной сборки и отличных проектов! Вопросы, пожелания и критику оставляйте в комментариях.

Bootstrap 4 — Сборка проекта с помощью Gulp

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

Проект, рассматриваемый в рамках этой статьи расположен на Github по адресу: https://github.com/itchief/gulp-project-bootstrap-4

Инструкция по установке Gulp окружения

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

  • «Node.js» (загрузить установщик «Node.js» для своей операционной системы можно c этой страницы; для проекта требуется версия программы не ниже 10 );
  • «Gulp» (установить Gulp можно посредством выполнения в консоли следующей команды: npm install -g gulp-cli ).

Последняя версия этого проекта (v.2.2.2) основана на Gulp 4 версии .

Если вы используете первую версию проекта, то дополнительно необходимо ещё установить пакетный менеджер Bower.

Ключ -g указывает npm , что пакет необходимо загрузить не в текущую, а в общую папку.

Выполнение инсталляции программы Bower осуществляется аналогично Gulp (актуально только для версии проекта 1.0.0):

После установки основных программ необходимо загрузить с Github архив проекта. Для этого можно воспользоваться этой ссылкой. Последняя версия проекта имеет номер 2.2.2.

Далее следует распаковать архив и перенести файлы из каталога «gulp-project-bootstrap-4» в корневую директорию проекта.

Если нужна не текущая, а какая-то определённая версия (например, 1.0.0), то её можно загрузить со страницы Releases.

Следующий этап – это установка npm пакетов и их зависимостей. Для этого в консоли (должны находиться в корневой директории проекта) необходимо выполнить команду:

Данная команда установит все пакеты, которые нужны как для работы самого окружения, так и для фронтенда. Выполняет npm эти действия в соответствии с инструкциями, написанными в файле «package.json».

При использовании первой версии проекта (1.0.0), в которой используется менеджер пакетов Bower, необходимо выполнить ещё команду:

Данная программа установит фронтенд пакеты, указанные в файле «bower.json».

Как использовать Gulp окружение?

Открыть командную строку (путь должен указывать на корневую папку проекта) и ввести gulp (обычный режим):


После ввода этой команды запустится задача по умолчанию, т.е. «default». Эта задача в свою очередь запустит серию других задач: «build», «webserver» и «watch».

Задача «build» выполнит сборку проекта для продакшена (т.е. она запустит «clean:build», «html:build», «css:build», «js:build», «fonts:build» и «image:build»). Эти задачи поместят в папку «assets/build» результирующие файлы проекта.

Задача «webserver» предназначена для запуска локального веб-сервера с «живой перезагрузкой» страниц в браузере. С помощью него можно очень просто посмотреть проект и выполнить его тестирование.

Задача «watch» используется для отслеживания изменения исходных файлов в папке «assets/src» и выполнение если это призошло различных задач. Другими словами, она позволяет автоматически запускать необходимые задачи и поддерживать результирующие файлы (содержимое папки «assets/build») в актуальном состоянии.

Кроме этого можно выполнять выборочную (самостоятельную) сборку той или иной части проекта.

Например, для сборки только CSS части сайта достаточно ввести команду:

Список других задач:

Описание Gulp окружения

В этом разделе разберём:

  • основные инструменты и файловую структуру Gulp окружения;
  • как осуществляется подключение исходников Bootstrap к проекту и их настройка;
  • как самостоятельно (с нуля) выполнить инициализацию Gulp проекта и установку зависимостей (без использования готового package.json)
  • как с нуля выполнить инициализацию Bower и установку фронтенд пакетов (без использования готового «bower.json»)*;
  • содержимое файла сборщика проекта Gulp (gulpfile.js)

* Менеджер пакетов Bower не используется в проекте, начиная с версии 2.0.0.

Список инструментов

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

  • Node.js (среды, в которой будет выполняться окружение);
  • npm (пакетного менеджера, входящего в Node.js; будет использоваться для загрузки Gulp, плагинов и фронтенд пакетов);
  • jQuery, Popover, Bootstrap (пакеты, которые будут использоваться для сборки css и js частей сайта);
  • Gulp и его плагины (будут использоваться для сборки проекта и выполнения других веб задач).

В первых версиях проекта дополнительно ещё использовался пакетный менеджер Bower. Он применялся за загрузки библиотек jQuery, Popover и Bootstrap. В версиях проекта, начиная с 2.0.0, загрузка данных библиотек выполняется посредством npm.

Файловая структура Gulp проекта

Файловую структуру проекта можно организовать по-разному. Это может зависеть как от предпочтений конкретного разработчика, так и от проекта, для которого она создаётся.

В данной статье будем придерживаться следующей структуры:

В корне проекта расположена папка «assets» и файлы «gulpfile.js», «package.json». Файл «gulpfile.js» будет содержать задачи для сборщика проекта Gulp.

В первой версии проекта также использовались файлы «.bowerrc» и «bower.json». Файл «bower.json» — это конфигурационный файл менеджера Bower, на основании которого определялись необходимые для загрузки фронтенд пакеты. В данном проекте он использовался для загрузки Bootstrap, jQuery и Popper.

В папке «assets» находятся две папки: «src» (для исходных файлов) и «build» (для готовых файлов; в эту папку их будет помещать сборщик Gulp). В папке «src» расположены каталоги «fonts» (для шрифтов), «img» (для исходных изображений), «js» (для js-файлов), «style» (для стилей) и «template» (для HTML фрагментов) и файл «index.html».

В первой версии проекта в папке «src» ещё находилась директория «bower_components». Она предназначалась для компонентов, загрузка которых выполнялась с помощью Bower. В текущей версии её нет.

В каталоге «js» распологаются два файла: «main.js» и «my.js». Файл «my.js» используется для написания своих скриптов, а «main.js» – для определения списка файлов, содержимое которых необходимо будет включить в итоговый js-файл. Под итоговым понимается файл, который должен получиться на выходе (в каталоге «build»).

Директория «style» отведена под стили. В данной директории находятся три файла: «main.scss» (содержит список файлов, содержимое которых необходимо включить в итоговый файл стилей), «my.scss» (используется для написания своих стилей) и «variables.scss» (содержит SCSS переменные, с помощью которых будем изменять стили Bootstrap 4, а также использовать его для создания своих переменных).

Файл «index.html» — это главная страница создаваемого проекта. Кроме «index.html» в данную директорию можно поместить и другие html страницы.

Директория «template» предназначена для помещения в неё фрагментов HTML страниц. Например, в данной директории можно создать файлы «head.html» и «footer.html», и импортировать их содержимое (используя синтаксис //= путь_к_файлу ) сразу в несколько страниц. Это позволит более просто создавать и редактировать html страницы, т.к. отдельные части страниц уже будут находиться в отдельных файлах.

Подключение исходников Bootstrap 4 к проекту и их настройка

Существуют разные способы подключения фреймворка Bootstrap 4 к проекту, а также варианты работы с ним.

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

Исходные коды CSS стилей Bootstrap 4 написаны на языке SCSS и представлены посредством большого количества небольших файлов.

Список SCSS файлов (расположены в каталоге «node_modules/bootstrap/scss/»): «functions.scss», «variables.scss», «mixins.scss», «variables.scss», «print.scss», «reboot.scss», «type.scss», «images.scss», «code.scss», «grid.scss», «tables.scss», «forms.scss», «buttons.scss», «transitions.scss», «dropdown.scss» и др.

Каждой такой файл выполняет либо определённую служебную задачу, либо отвечает за стилизацию какой-то определённой функции фреймворка или компонента. Файлы SCSS имеют краткие и понятные имена. Используя только их можно достаточно точно понять назначение каждого из них.

Настройка или изменение дефолтных стилей Bootstrap 4 осуществляется посредством переопределения значений переменных SCSS. Все SCSS переменные для удобства собраны в одном месте (в файле «variables.scss»). Но, переопределять их значения желательно, конечно же, не в этом файле, а в своём (например, имеющим такое же имя «variables.scss», но находящемся в «assets/style/variables.scss»).

Например, изменение цвета тем success и danger, осуществляется посредством изменения значений переменных $green и $red :

Обратите внимание, что после копирования переменных Bootstrap 4 в свой файл CSS («assets/style/variables.scss»), у них необходимо убрать метку !default .

Метка !default предназначена для установления SCSS переменной значения по умолчанию. Если же у SCSS переменной уже есть значение, то новое значение, если оно указано с ключом !default , установлено не будет.

Указать какие исходные SCSS файлы Bootstrap 4 должны участвовать при компиляции в CSS, а какие нет, выполняется посредством SCSS файла «assets/style/main.scss». Другими словами именно содержимое этого файла и будем определять тот набор стилей, который после компиляции будет подключен к веб-странице.

Кроме этого, к этому файлу также подключёны файлы «assets/style/variables.scss» (для переопределения переменных Bootstrap) и «assets/style/my.scss» (для создания своих стилей).

Содержимое файла «main.scss» (пример):

Кроме этого, для работы некоторых компонентов Bootstrap 4 нужен ещё JavaScript код.

Список js-файлов Bootstrap 4 (находятся в каталоге «node_modules/bootstrap/js/dist/»): «util.js», «alert.js», «button.js», «carousel.js», «collapse.js», «dropdown.js», «modal.js», «tooltip.js», «popover.js», «scrollspy.js», «tab.js» и «toast.js».

Определение какие js-файлы фреймворка Bootstrap 4 необходимо включить в итоговый js-файл проекта, а какие нет, выполняется посредством «main.js».

Импортирование нужных файлов в результирующий build/main.js осуществляется посредством следующей конструкции:

Выполняет это действие будет Gulp плагин «gulp-rigger». Как его установить и подключить будет описано ниже.

В данный файл можно также импортировать jQuery, Popper (необходим для работы компонентов Dropdown, Tooltip и Popover) и при необходимости свои js-файлы.

Содержимое файла «main.js» (пример):

Как с нуля выполнить инициализацию Gulp проекта и установку зависимостей?

Начинается разработка проекта обычно с создания файла «package.json» (манифеста).

Файл «package.json» будет содержать общую информацию о проекте (название, версию, описание, имя автора и др.), а также данные о пакетах, от которых этот проект зависит.

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

После ввода команды необходимо ответить на следующие вопросы:

  • имя проекта (name) – «bootstrap-4»;
  • номер версии (version) – «2.0.0»;
  • описание (description) – «Start project with use Bootstrap 4»;
  • автор (author) – «itchief.ru»;
  • git репозиторий (git repository) — «»;
  • точка входа (entry point), тестовая команда (test command), лицензия (license), ключевые слова (keywords) – значения по умолчанию.

На вопрос «Is this ok?» ответим «yes» или нажмём Enter .

В результате в корневой папке проекта появится файл «package.json».

Теперь установим пакеты, которые будем использовать в проекте с помощью следующей команды:

Ключ «—save-dev» или «—save-prod» определяет в какую секцию файла «package.json» попадёт информация о нём.

Список пакетов, которые будут использоваться в проекте:

После установки всех зависимостей, файл package.json будет иметь следующее содержимое:

Как с нуля выполнить инициализацию Bower и установку фронтенд пакетов?

Определим папку, в которую Bower будет загружать пакеты. Для этого создадим файл .bowerrc и введём в него следующее:

Сохраним файл .bowerrc . Теперь все компоненты будут загружаться в каталог bower_components , находящийся в assets/src/ .

Выполним инициализацию Bower (создадим файл-манифест bower.json ). Создание файла bower.json можно осуществить с помощью команды (в корневой папке проекта):

После этого необходимо ответить на следующие вопросы:

  • имя проекта (name) – bootstrap-4;
  • описание (description) – Start project on Bootstrap 4 — itchief.ru;
  • автор (author) – itchief.ru;
  • установить установленные компоненты как зависимости (set currently installed components as dependencies) – Y (Да);
  • хотите вы отметить этот пакет как приватный, это предотвратит его случайную публикацию в реестре Bower (would you like to mark this package as private which prevents it from being accidentally published to the registry) – Y (Да);
  • на остальные вопросы оставим ответы, предлагаемые программой по умолчанию;

В результате этих действий будет создан файл bower.json .

Загрузим Bootstrap 4 и пакеты от которых он зависит (Popper и jQuery) в наш проект с помощью Bower.

Для этого в консоли необходимо ввести следующую команду:

Ключ -save необходим для того, чтобы информацию о пакете записать в секцию dependencies файла bower.json .

В результате bower.json будет иметь следующее содержимое:

Если вы не хотите инициализировать Bower (bower.json) с помощью команды bower init и устанавливать пакеты вручную, то можете просто создать файл bower.json (например, с помощью файлового менеджера) и вставить в него вышепредставленное текстовое содержимое. Для установки зависимостей в проект достаточно будет ввести следующую команду:

Описание файла сборщика проекта Gulp (gulpfile.js)

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

Файл «gulpfile.js» представляет собой список задач.

Основные задачи которые будут выполнять этот файл:

  • сбор нескольких файлов стилей в один, компиляция полученного SCSS в CSS, добавление автопрефиксов, минимизация CSS и создание source map;
  • импорт всех необходимых js-файлов в один, минимизация этого файла и создание source map;
  • сбор html файла, перенос шрифтов, обработка (сжатие) картинок и автоматическое обновление страниц посредством Browser Sync.

Кроме этого чтобы эти задачи не запускать при изменении исходных файлов вручную, создадим ещё одну задачу «watch». Она будет отслеживать изменения файлов, и запускать определённые задачи автоматически.

Код файла «gulpfile.js» (при использовании Gulp 4):

Код файла «gulpfile.js» содержит комментарии. С помощью них поясняется что выполняет тот или иной фрагмент инструкций.

Создание задачи в Gulp выполняется очень просто:

Задачи в gulp построены очень просто. Их каркас действий в большинстве случаев можно представить так:

  • получить данные из исходных файлов;
  • обработать исходные данные посредством gulp плагинов;
  • сохранить полученный результат (файлы) в каталог «build».

Скринкаст по Gulp

Gulp — замечательная система сборки и задач, но при всём обилии информации в интернете о ней — это, как правило, либо самые основы, либо «готовые решения», чтобы адаптировать которые нужно понимание, как что работает.

В этом скринкасте я постараюсь восполнить этот «недостающий фрагмент». Не просто «вот такой код работает», а «почему и как он работает», и как его получить. Это сделает использование готовых решений легче и приятнее. И позволит создавать свои.

Для работы с Gulp необходимо знание Node.JS.

Хотя бы выпуски 1-9 (основы), 13 (события), 23-25 (потоки), а желательно – и остальные выпуски первой части скринкаста по Node.JS.

В скринкасте используется новый Gulp версии 4.

Текущей версией является Gulp 3, и большинство руководств в интернете посвящены именно ему.

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

В репозитории Gulp есть ветка 4.0, в которой есть и сам код и документация и даже рецепты, уже адаптированные под Gulp 4. Так что на новой версии Gulp вы будете точно не один.

Дмитрий Говоров

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

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

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

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

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