Использование Gulp. Часть 1 — Установка.

Чтобы ускорить процесс фронтенд-разработки, мы автоматизируем выполнение некоторых задач с помощью сборщика Gulp.
Для этого нам понадобится пакетный менеджер NPM. Но, чтобы установить NPM, сначала надо установить Node.js.

Шаг 1. Установка Node
Заходим на официальный сайт https://nodejs.org и скачиваем рекомендованную версию.

Инсталлятор запускать с правами администратора.
После установки появятся 2 значка: Node.js и командная консоль Node.js coomand prompt. Нам они не пригодятся, так как мы не используем Node.js, а для запуска консоли есть более удобные варианты:
1. Использовать Командную консоль TotalCommander (Команды — Открыть командную консоль).
2. Зажать Shift и, кликнув правой кнопкой, открыть контекстное меню. В нем появится пункт «Открыть окно команд».
Запуск коммандной строки лучше производить, находясь в директории нужного вам проекта, в консоли сразу отобразится путь к нужной директории, это избавит от необходимости вводить путь вручную.

Для проверки версий node и npm наберите в командной строке
node -v и нажмите Enter
затем npm -v

Версии NPM обновляются обычно чаще, чем версии node, чтобы установить последнюю версию:
npm install npm@latest -g

Комманды npm, которые нам пригодятся :
npm list — список всех установленных пакетов
npm -g ls —depth=0 — список глобально установленнных пакетов
npm outdated проверить, не устарели ли пакеты
npm update gulp — обновление версий плагинов
npm init — создать package.json
npm install package_name — установить пакет (package_name — название нужного пакета)
npm install package_name —save-dev — установить пакет и вносит запись о нем в package.json в секцию devDependencies
npm uninstall package_name — удаление пакета
npm install — установить все пакеты, перечисленные в package.json
Перед запуском в продакшн npm shrinkwrap — фиксируем версии пакетов,теперь npm install будет устанавливать именно их и вы будете уверены что все будет работать как надо

Сокращения
-v: —version
-g: —global
-S: —save
-D: —save-dev
-y: —yes
-n: —yes false

Шаг 2. Установка gulp
Сначала gulp надо установить глобально.

Запускаем командную консоль.
Иногда на некоторых ресурсах перед коммандой стоит значок доллара, например
$ npm install —global gulp-cli

Значок доллара не копировать, вставлять только саму комманду
npm install —global gulp-cli

Подсказка: чтобы вставлять скопированный текст в командную строку, открыть ком.строку, нажать ALT + SPACE -> Значения по умолчанию, поставить галочку Выделение мышью. Теперь можно выделить текст мышкой, скопировать, в ком. строке кликнуть правой кнопкой — текст вставится автоматически.

Шаг 3. Работа с gulp в конкретном проекте

3.1 Сначала создадим пакет зависимостей package.json
Файл package.json содержит информацию, которую мы внесем в терминале и список всех пакетов, которые мы используем в проекте.

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

package.json генерируется с помощью команды npm init, которая выведет в консоль несколько вопросов для создания файла.
В пункте name по умолчанию отображается название вашего каталога с проектом.

Подсказка:
Вы можете сгенерировать это файл быстрее и проще, используя опцию —yes (автоматический ответ “да” на все вопросы):
npm init —yes

Полезно знать:
Вы можете установить значения по умолчанию, которые будут использоваться при каждом запуске npm init, а значит будут экономить вам время. После установки они сохраняются в .npmrc файлах.
Например:
npm config set init.author.name «Valentina Vladova»
npm config set init.author.email «myemail@gmail.com»
npm config set init.author.url «http://simpalmarket.com/»
npm set init-license MIT
npm set init-version 0.0.0
Затем запустить npm init, все указанные значения подтянутся в соответстующие переменные.

Когда npm init спросит про гит-репозиторий, пишите кратко user/repo — npm достаточно умён, чтобы раскрыть строчку в https://github.com/user/repo. npm также сгенерирует поля repository, bugs и homepage в нужном формате.

Итак, заходим в корневую папку проекта, вызываем командную консоль и набираем
npm init —yes

В корне проекта появится файл package.json с примерно таким содержанием

3.2 Установим gulp локально
В папке проекта в консоли вводим:
npm install —save-dev gulp

или сокращенно
npm i gulp —save-dev

В списке будут Warn — игнорируем.

Для проверки версии используем команду
gulp —version

В root-каталоге проекта появилась папка node_modules. В нее автоматически будут загружаться все модули и зависимости, которые мы будем устанавливать в проект. Папок с зависимостями может быть очень много, не смотря на то, даже если самих пакетов установлено не так уж и много. Это связано с тем, что в дополнение к основным пакетам устанавливаются программы, необходимые для корректной работы основного пакета. Ничего чистить и удалять из папки node_modules не нужно.

В файле package.json добавится запись
«devDependencies»: <
«gulp»: «^3.9.1»
>

Теперь можно устанавливать различные плагины для gulp.
http://gulpjs.com/plugins/
В поле поиска вводите название интересующего плагина.

Плагины можно устанавливать как по одному, например:
npm install —save-dev gulp-plumber
так и списком через пробел, например:
npm install gulp-sass gulp-plumber gulp-autoprefixer gulp-minify-css —save-dev
Плагины для установки и плагины для сборки лучше устанавливать отдельными командами

Для установки конкретной версии используйте @, т.е. плагин@номер весии. Пример:
npm install —save-dev gulp-livereload@1.5.0

Gulp для ускорения разработки

Что такое Gulp, зачем он нужен, его возможности, как установить и как начать использовать в разработке сайтов.

Gulp — что это такое и зачем он нужен

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

Возможности Gulp:

1. Автоматическая перезагрузка страницы при сохранении кода
2. Использование препроцессоров для CSS (например, Sass), для JavaScript (например, CoffeeScript), для HTML (например, Pug)
3. Минификация CSS, JavaScript, HTML (уменьшение размера кода путём удаления ненужных символов и пробелов)
4. Соединение файлов в один (например, из пяти CSS файлов сделать один файл CSS)
5. Создание , удаление и переименование файлов и папок проекта
6. Автоматическое создание вендорных префиксов (-webkit, -moz, -o, -ms), чтобы старые версии браузеров поддерживали все css-свойства
7. Оптимизация изображений
8. И многое другое.

Как установить Gulp глобально в системе

Установка Gulp глобально необходима для того, чтобы была доступна команда gulp в окне команд / bash.

Для установки Gulp нам понадобится пакетный менеджер npm , который входит в состав Node.js . С помощью npm мы будем устанавливать пакеты в каталог node_modules . Если Node.js не установлен, то устанавливаем его. Далее можно начать установку Gulp.

Открыть командную строку и ввести следующий текст:

Коротко о том, что это значит:

• npm — это менеджер пакетов, с помощью которого будем устанавливать Gulp
• i (install) — означает установка
• gulp — это установка Gulp
• -g (global) — установить глобально, а не в какую-то конкретную папку

Таким образом Gulp установлен глобально . Приступим к установке Gulp в папку проекта.

Установка Gulp в папку проекта

Нам также необходимо установить Gulp локально в папке проекта, чтобы мы могли его подключать в gulpfile.js .

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

Создадим корневую папку для нашего проекта. Назовём, например, gulp-project . Зайдём в неё, зажмём клавишу shift и выберем в контекстном меню пункт Открыть PowerShell здесь или Открыть окно команд (и т.п.).

Выполним следующую команду для создания файла package.json :

Или чтобы быстро создать package.json используйте:

Этот файл будет содержать всю информацию о проекте (название, описание, автор и т.д.), а так же об используемых зависимостях в проекте.

Создание файла package.json с командой npm init:

Введём название проекта, описание и автора, а остальные пункты пока оставим по умолчанию, нажимая «Enter» . Ответив на все вопросы, будет создан файл package.json .

Теперь мы можем установить Gulp в наш проект, а именно в папку gulp-project , которую мы создавали для нашего проекта.

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

Есть несколько отличий от установки Gulp глобально.

Здесь нет -g , т.е. Gulp будет устанавливаться локально в ту папку, в которой была открыта консоль. И появилась запись (флаг) —save-dev (-D) , благодаря этому, пакет и его версия будет добавлен в package.json. Это нужно для последующей быстрой установки пакетов в других проектах путём копирования файла package.json .

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

Мы установили Gulp в нашу папку gulp-project , в которой появилась новая папка node_modules . В ней и находится Gulp, а так же будут храниться все зависимости нашего проекта.

Так же если зайти в package.json , то увидим изменения:

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

Структура может быть практически любой. У нас будет следующая:

• gulp-project/
  • app/
    • assets/
      • css/
      • fonts/
      • img/
      • js/
      • libs/
      • sass/
    • index.html
  • dist/
  • node_modules/
  • gulpfile.js
  • package.json

• app/ — рабочая папка проекта, в ней будут находиться все исходники — шрифты, изображения, css и js файлы;
• dist/ — папка продакшена, в ней будет находиться готовый оптимизированный проект;
• node_modules/ — папка с модулями и зависимостями;
• gulpfile.js — файл конфигурации, в котором будем описывать все задачи Gulp;
• package.json — файл, содержащий информацию о проекте (название, описание, автор, зависимости и т.д.)

Как создавать задачи (таски) Gulp

Создадим файл gulpfile.js и начнём его заполнение.

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

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

Теперь Gulp подключен к нашему проекту. Далее, мы будем подключать все необходимые пакеты (плагины) для Gulp.

Задача (функция) в Gulp имеет следующий вид.

Создадим простейшую задачу (функцию), которая будет выводить строку ‘Привет, Gulp!’.

output — имя функции (задачи), оно может быть любым.

Выполнение задачи

Чтобы запустить задачу, нужно выполнить команду gulp название_задачи . В нашем случае команда будет следующей.

Запуск задачи Gulp по умолчанию

Чтобы выполнять задачу output командой gulp , сделаем нашу функцию задачей по умолчанию, присвоив default .

Пока что у нас только одна задача, которая выводит на экран Привет, Gulp! .

И теперь чтобы запустить нашу задачу, достаточно просто написать gulp .

Это был самый простой пример работы Gulp. Для более сложных задач используются дополнительные методы.

Методы gulp

Мы уже видели в коде выше метод series — который позволяет выполнять перечисляемые задачи последовательно (следующая задача выполняется только после завершения предыдущей). Постепенно мы рассмотрим все методы Gulp.

• src — какие файлы использовать для обработки в потоке;
• dest — куда выгружать обработанные в потоке файлы (место назначения);
• watch — наблюдение за изменениями в файлах;
• series — вызов задач последовательно;
• parallel — вызов задач параллельно.

Как создавать задачи мы рассмотрели. Теперь рассмотрим, как выбирать необходимые файлы.

Gulp src / dest

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

В данном примере мы видим работу двух методов:

• src (source) — выбираем файлы для обработки;
• dest (destination) — место назначения.

В src мы использовали паттерн css/**.css для выбора всех css файлов внутри папки /assets/css/ (исключая файлы в подпапках, если таковые имеются).

Примеры наиболее используемых паттернов для выбора файлов:

• app/**/*.* — выбор всех файлов в папке app ;
• app/js/**/*.js — выбор всех js файлов в папке js ;
• app/**/*. — все css и js файлы в папке app ;
• app//**/*. — все js и css-файлы в папках folder1 и folder2 ;
• [‘app/**/*.css’, ‘app/**/*.js’] — получаем сначала все css, потом все js в папке app ;
• [‘app/**/*.*’, ‘!app/**/*.js’] — все файлы в папке app , кроме js-файлов. ( ! — знак исключения).

Gulp series / parallel

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

В series мы перечисляем список задач для последовательного выполнения.

Если нам не важно когда закончится та или иная задача, мы можем использовать метод parallel :

В данном примере, сначала выполнится задача output , затем последовательно будут выполняться otherFunc и otherFunc2 , и после их завершения начнёт своё выполнение задача otherFunc3 .

Gulp lastRun()

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

Установка, подключение и использование плагинов Gulp

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

Это наипростейший пример, но он хорошо демонстрирует последовательность действий.

• 1. Установка.
• 2. Подключение.
• 3. Создание задачи

Просмотр списка задач Gulp

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

Обновление плагинов (версий пакетов)

Чтобы проверить наличие новых версий плагинов (пакетов) в package.json , установим npm-check . Данный плагин может не только находить устаревшие зависимости, но так же неправильные и неиспользованные.

Использование — проверка актуальности версий пакетов.

Обновление в автоматическом режиме.

Или же можете самостоятельно обновить/установить/удалить нужный пакет следуя предложенным командам.

Gulp 4

Если у вас не работает Gulp, возможно вы обновили его с 3 версии до Gulp 4 . В связи с этим появились ошибки в gulpfile.js из-за изменений в синтаксисе выполнения задач gulp.

Простейший способ реанимировать ваш Gulp проект, это заменить все конструкции с квадратными скобками «[» «]» на gulp.parallel() .

Нужно заменить для Gulp 4.

Статьи про Gulp

1. Введение в Gulp (1 часть — текущая).
2. Использование SASS в Gulp (2 часть).
3. Автоматическое обновление страницы с помощью browser-sync для Gulp (3 часть).
4. Использование Babel в Gulp (4 часть).
5. Моментальная загрузка сайта на хостинг и синхронизация файлов — gulp-rsync (5 часть).

English	Russian
Gulp	Глоток
Dependencies	Зависимости
Task	Задача
Variable	Переменная
Watch	Наблюдать
Destination	Пункт назначения

Надеюсь, вам понравилась данная информация. Если вам интересна тема web-разработки, то можете следить за выходом новых статей в Telegram.