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

Gulp – это ответвление от проекта Grunt. От своего родителя он взял лучшие практики. Код инструкций пишется на JavaScript. Работает быстрее, чем Grunt в несколько раз.

Зачем использовать Gulp

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

  • Создание веб-сервера для отладки
  • Автоматическая перезагрузка страниц при внесении изменений (LiveReload)
  • Слежение за изменениями в файлах проекта
  • Использование препроцессоров HTML, CSS, JS
  • Объединение файлов и их минификация
  • Автоматическое создание вендорных префиксов для браузеров (Autoprefixer)
  • Автоматизация управления файлами и директориями
  • Запуск и контроль внешних команд операционной системы
  • Запуск и контроль приложений
  • Оптимизация изображений (сжатие, изменение размеров и т.д.)
  • Выгрузка проекта на внешний сервер с помощью FTP, SFTP, Git и т.д.
  • Подключение и использование дополнительных плагинов (сегодня их уже 3570 штук; решение можно
  • найти практически для всех повседневных рутинных задач и не только)
  • Автоматизация ручного труда

Установка

Для работы Gulp требуется Node.js. Скачать его можно на официальном сайте. Советую ставить LTS версию программной платформы. После инсталляции Node.js можно переходить к установке Gulp. Для этого откройте консоль операционной системы и выполните следующую команду:

Мы используем параметр -g, который позволяет установить Gulp глобально в операционной системе, без привязки к конкретному проекту.

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

Окей, пришло время создать проект, в котором мы будем использовать Gulp. Перейдите в директорию проекта и выполните команду:

Это запустит скрипт, который задаст вам несколько вопросов о проекте. В результате будет сконфигурирован файл для npm package.json. Это манифест проекта. Он содержит список пакетов, которые используются в проекте и другую информацию. На этом этапе я внес следующие данные, адаптируйте под свой проект.

Если какой-то вопрос хотите пропустить, то просто нажимайте Enter. Будет использовано значение по умолчанию. Теперь можно установить Gulp для нашего проекта. Выполните команду:

Gulp будет установлен в директорию проекта, а параметр –save-dev добавит его в зависимости package.json. Это позволит другому разработчику, открывшему ваш проект, быстро развернуть его на своей машине (с помощью команды npm i).

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

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

Создаем две папки в корне проекта:

  • /src/ – исходный код проекта во время разработки, здесь вы будете редактировать файлы
  • /dist/ – файлы и папки проекта после сборки, готовый продукт

Каталог /dist/ будет заполняться автоматически при сборке проекта. Займемся пока что /src/. Создайте внутри следующие папки:

  • /css/ – для каскадных таблиц стилей
  • /js/ – для JavaScript-сценариев
  • /img/ – для изображений
  • /fonts/ – для шрифтов
  • /sass/ – для файлов препроцессора SASS (если используете SASS)
  • /libs/ – для сторонних библиотек

Если все готово, то пора перейти к созданию файла gulpfile.js в корне проекта, который поможет настроить Gulp. Именно здесь вы можете создать инструкции Gulp, которые помогут автоматизировать часть рутинных задач.

Инструкции Gulp

Любая инструкция создается в gulpfile.js с помощью функции gulp.task(). Первый параметр – это название инструкции. Затем идет массив из названий инструкций, которые нужно выполнить до запуска определяемой инструкции. Последний параметр – это функция, тело которой определяет то, что делает данная инструкция.

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

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

Начнем с компиляции SASS в CSS. Установим пакет gulp-sass:

Сначала необходимо подключить используемые пакеты в gulpfile.js. Сделаем это:

Теперь создадим инструкцию, которая будет выполнять компиляцию SASS в CSS:

В первой строке инструкции указываем исходные файлы для компиляции. В конкретном примере будут взяты все файлы с расширением .sass, находящиеся внутри папки /src/sass/ и ее подпапках. Можно выбирать и конкретные файлы. Вот примерный список того, как вы можете задавать пути к исходным файлам.

  • src/sass/main.sass – выбор файла main.sass
  • src/sass/*.sass – выбор всех файлов с расширением sass
  • src/sass/**/*.sass – выбор всех файлов с расширением sass во всех вложенных папках в папке sass
  • !src/sass/main.sass – исключение файла main.sass
  • [‘!src/sass/main.sass’, ‘src/sass/second.sass’] – исключение массива файлов main.sass и second.sass
  • src/sass/**/*.+(scss|sass) – выбрать все файлы scss и sass во всех вложенных папках в sass

Далее с помощью .pipe начинаем обрабатывать взятые файлы. Во второй строке компилируем SASS в CSS.
Затем определяем место назначения скомпилированных файлов. Это каталог /src/css/.

Теперь создаем в папке /src/sass/ файл main.sass и определим в нем немного стилей:

Сохраняем файл. Теперь мы можем проверить, как работает компиляция. В консоли выполняем команду:

Проверяем каталог /src/css/. В нем должен находится только что скомпилированный CSS файл. Видите? Отлично! Двигаемся дальше.

Автообновление страниц (LiveReload)

Перейдем к автоматизации обновления страниц при их изменении, т.е. настроим LiveReload. Это одна из самых популярных задач, стоящих перед frontend разработчиком. Нам понадобится пакет npm Browsersync для автоматического обновления браузера. Установим его:

Подключим browser-sync пакет в начале gulpfile.js, как мы это делали ранее с пакетами gulp и gulp-sass:

Создадим инструкцию для запуска Browsersync:

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

Добавим еще один pipe к инструкции sass, с помощью которого будет происходить обновление стилей при компиляции CSS файлов. Указываем параметр stream: true. Это позволит обновлять стили потоково, без полной перезагрузки страницы.

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

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

Внутри анонимной функции мы выполняем 3 раза gulp.watch с двумя параметрами. Первый параметр – файлы, за которыми нужно следить, второй – действия, которые нужно выполнить при изменении файлов, т.е. выполнить инструкцию sass или обновить страницу.

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

Минификация и объединение файлов

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

  • минифицировать (сжать) используемые библиотеки
  • уменьшить количество запросов к серверу, объединив библиотеки в единый файл

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

Создаем файл конфигурации .bowerrc в корне проекта для Bower, где укажем ему, куда сохранять библиотеки:

Установим, для примера, библиотеку jQuery и слайдер slick:

Теперь можем заняться конкатенацией и сжатием библиотек. Для этого будем использовать пакеты gulp-concat и gulp-uglifyjs касательно JavaScript-файлов. Установим их:

Касательно CSS – пакет gulp-cssnano. Устанавливаем:

Минифицированные файлы обычно имеют суффикс .min. Добавить его нам поможет пакет gulp-rename. Устанавливаем:

Начнем с подключения установленных плагинов в gulpfile.js:

JavaScript

Создадим инструкцию, которая позволит нам сжимать и объединять JavaScript-файлы:

Внутри анонимной функции инструкции min-js мы сначала указываем пути на JavaScript-файлы библиотек в виде массива. Затем с помощью concat объединяем библиотеки в единый файл libs.min.js. Далее сжимаем его с помощью uglifyJs. И, наконец, сохраняем результат в папку /src/js/.

Инструкцию можно проверить с помощью команды в консоли:

В папке /src/js/ появится файл libs.min.js, в котором объединены и сжаты используемые в проекте JavaScript-файлы библиотек.

CSS

Создадим в каталоге /src/css/ файл libs.sass. Будем в него импортировать CSS-файлы библиотек. Для примера с помощью Bower я скачал библиотеку Bootstrap:

Откроем файл libs.sass и импортируем в него CSS-файл Bootstrap:

Таким образом, мы соберем все CSS-файлы библиотек в одном месте, а именно в файле libs.sass с помощью импорта. Теперь создадим инструкцию для сжатия:

Перед сжатием мы компилируем CSS из SASS с помощью инструкции sass, которую мы указали в массиве после имени инструкции min-css.

В первой строке мы берем конкретный файл, libs.css. Далее сжимаем его с помощью cssNano. Затем с помощью rename добавляем суффикс .min. Результат сохраняем в папке /src/css/.

Проверяем инструкцию:

Если вы все сделали правильно, то в папке /src/css/ должно появиться два файла. libs.css и libs.min.css. Сравните их размеры.

Автоматическое добавление вендорных префиксов (Autoprefixer)

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

Для начала установим gulp-autoprefixer:

Подключим установленный пакет в gulpfile.js:

Окей, теперь мы можем использовать autoprefixer в инструкции sass. Сделаем это после вызова .pipe(sass()), т.к. вендорные префиксы нужно расставить после того, как SASS будет преобразован в CSS. Добавим новый pipe:

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

Проверяем, добавляя в main.sass новое свойство flex. Запускаем инструкцию sass:

В main.css должны появиться вендорные префиксы. Очень просто, все работает в автоматическом режиме. Замечательно!

Финальная сборка проекта

Последнее, чего хотелось бы коснуться в этом гайде для новичков по Gulp – это финальная сборка проекта. Для этого нам понадобится папка /dist/, которую мы создали в самом начале. Перед каждой сборкой ее необходимо очищать. Для этого будем использовать пакет NPM del. Установим его:

Подключим пакет del в gulpfile.js:

Создадим инструкцию clean для очистки каталога /dist/ перед сборкой:

Теперь можно заняться непосредственно сборкой проекта. Создадим инструкцию build:

Перед вызовом инструкции build мы очищаем папку /dist/ на тот случай, если сборка уже проводилась до этого. Затем сжимаем и объединяем JavaScript и CSS файлы с помощью инструкций min-js и min-css соответственно. Попутно компилируем SASS в CSS, т.к. перед выполнением инструкции min-css выполняется инструкция sass.

Внутри тела инструкции мы копируем подготовленные файлы проекта в каталог с готовым продуктом /dist/. Проверяем работу инструкции:

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

Заключение

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

Полное содержание package.json:

Полное содержание gulpfile.js:

Для дальнейшего изучения

Меньше рутины в разработке!

Сообщить об опечатке

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