Автоматизация работы с Gulp


Содержание

Автоматизация рутинной работы с помощью GULP

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

Для работы понадобится, node.js, ее можно скачать с оф. сайта для своей платформы.

1. Скачиваем шаблон с GitHub, в папку своего проекта
2. Переходим в папку с проектом и устанавливаем, командой

После того как все зависимости буду установлены, можно чуть чуть настроить для удобства свою IDE или редактор, я работаю с PHP Storm покажу на примере его.
Для того что бы быстро запускать галп, без команд, проделаем следующее:

1. Edit confifurations
2. Любое понятное имя
3. Путь к конфигу проекта
4. Таск из выпадающего списка — default

Теперь нажав на зеленый треугольник, мы можем запускать проект.

Сам шаблон имеет 2 папки:
Build — папка в которой находится проект готовый к продакшену
Dev — папка с исходниками

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

CSS на выходе разделены по логике код разработчика и библиотеки, и формируется все в 2 вариантах в сжатом и не сжатом.
JS аналогично CSS
Все кроме html — assets, чтобы скомпоновать файлы проекта в одном месте, когда те будут переносится в CMS/CMF

Введение в Gulp.js

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

  • генерирование HTML из шаблонов и файлов содержимого;
  • сжатие изображений;
  • компиляция Sass в CSS код;
  • удаление значений console и debugger из скриптов;
  • объединение и минификация файлов CSS и JavaScript;
  • развертывание файлов на серверах.

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

Звучит сложно!

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

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

Сборщики проектов: варианты

Первым популярным решением подобного рода был Grunt – сборщик проектов, созданный на основе Node.js. Grunt был невероятно популярным. Но низкая скорость работы и сложность настройки были его слабыми местами.

Затем появился Gulp , обладающий следующими преимуществами:

  • Возможность просмотра файлов.
  • Плагины для Gulp просты и предназначены для выполнения одной задачи.
  • Код конфигурации на JavaScript, который легче для понимания.
  • Gulp быстрее из-за того, что использует потоки Node.js для передачи данных через серию плагинов.

Версии Gulp

Gulp.js 3.9.1 был единственной версией много лет. И хотя был доступен Gulp 4, его нужно было устанавливать с помощью npm install gulp@next . Причина этого заключалась в том, что плагины оставались совместимыми. Но Gulp 4 использовал новый синтаксис конфигурации.

10 декабря 2020 года Gulp.js 4.0 был объявлен единственной версией и появился в менеджере пакетов npm. Любой, кто станет использовать npm install gulp , получит версию 4. Эта версия будет использоваться и в данном руководстве.

Шаг 1: установите Node.js

Node.js можно загрузить для Windows, macOS и Linux с nodejs.org/download/ . Доступны различные варианты платформы для установки из бинарных файлов, модульных сборщиков и Docker-образов.

Примечание: Node.js и Gulp работают в Windows, но некоторые плагины могут работать некорректно, если они зависят от собственных бинарных файлов Linux. Одним из вариантов решения проблемы в Windows 10 является подсистема Windows для Linux .

После установки запустите командную строку и введите следующую команду. Она позволит узнать номер версии:

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

Примечание: модули Node.js можно устанавливать глобально, чтобы они были доступны во всей ОС. Но большинство пользователей не будут иметь права на запись в глобальные библиотеки, если у команд npm не будет префикса sudo . Существует несколько вариантов, как исправить разрешения npm . Но можно изменить каталог по умолчанию. Например, в Ubuntu/Debian:

Затем добавьте следующую строку в конце

Шаг 2: установите Gulp глобально

Установите интерфейс командной строки Gulp глобально, чтобы сборщик можно было запустить из любой папки проекта:

Убедитесь, что Gulp установлен, проверив его версию:

Шаг 3: Настройте проект

Примечание: пропустите этот шаг, если у вас уже есть файл конфигурации package.json .

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

Затем нажмите « Return », чтобы принять значения по умолчанию. Файл package.json , в котором хранятся параметры конфигурации npm , будет создан автоматически.

Примечание: Node.js устанавливает модули в папку node_modules . Нужно добавить их в свой файл .gitignore , чтобы убедиться, что они не попадут в репозиторий. При развертывании проекта в другой системе можно будет запустить npm install , чтобы их восстановить.

Предполагается, что ваш проект содержит папки, перечисленные ниже.

Папка src: предварительно обработанные исходники

Содержит следующие подкаталоги:

  • html ‒ исходные файлы и шаблоны HTML;
  • images ‒ оригинальные несжатые изображения;
  • js – предварительно обработанные файлы скриптов;
  • css – предварительно обработанные файлы Sass ( .scss )

Папка build: скомпилированные/обработанные файлы

Когда понадобится, Gulp создаст файлы и подпапки:

  • html ‒ скомпилированные статические файлы HTML;
  • images ‒ сжатые изображения;
  • js ‒ единственный объединенный и минифицированный файл JavaScript;
  • css – единственный скомпилированный и минифицированный файл CSS.

Примечание: Если вы работаете в Unix-системе, то можете воссоздать структуру исходных папок с помощью следующей команды:

Шаг 4: Установите Gulp локально

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

Эта команда устанавливает Gulp как зависимость. После чего раздел « devDependencies » в package.json обновляется соответствующим образом. В рамках этого руководства предполагается, что Gulp и все плагины являются зависимостями.

Альтернативные варианты развертывания


Зависимости разработки не устанавливаются, если в операционной системе для переменной среды NODE_ENV задано значение production . Обычно это делается на сервере с помощью команды macOS/Linux:

В этом руководстве предполагается, что ресурсы будут скомпилированы в папку build , переданы в репозиторий Git или загружены непосредственно на сервер.

Чтобы использовать ресурсы на работающем сервере, изменить способ их создания. Например, файлы HTML, CSS и JavaScript сжимаются при использовании, но не в средах разработки. В этом случае удалите —save-dev при установке Gulp и его плагинов. Например:

Эта команда устанавливает Gulp как зависимость приложения в разделе « dependencies » файла package.json . Сборщик будет установлен при вводе npm install и может быть запущен везде, где развернут проект.

Шаг 4: Создайте файл конфигурации Gulp

Создайте новый файл конфигурации gulpfile.js в корне папки проекта. Добавьте в него базовый код:

Код ссылается на модуль Gulp, устанавливает для переменной devBuild значение true при запуске в режиме разработки и определяет расположение исходных файлов и папок сборки.

gulpfile.js ничего не сделает до того, пока вы не выполните следующий шаг.

Шаг 5: Создайте таск для Gulp

Сам по себе Gulp ничего не делает. Необходимо:

  1. Установить плагины Gulp.
  2. Написать инструкции (таск), которые они должны выполнить.

Чтобы найти нужные плагины, используйте библиотеку Gulp на gulpjs.com/plugins/ , на npmjs.com или используя поисковую систему Google.

Большинство заданий (тасков) будут использовать:

  • src (folder) — для создания потока из файлов в исходной папке;
  • dest (folder) — для вывода потока в виде файлов в целевую папку сборки.

Любое количество методов плагина может быть вызвано с помощью .pipe (plugin) между .src и .dest.

Задания для изображений

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

Теперь можно ссылаться на оба модуля в верхней части gulpfile.js :

Затем определите функцию обработки изображений в конце gulpfile.js :

Этот код делает следующее:

  1. Создает новую функцию таска с именем
  2. Определяет папку out , в которой будут находиться файлы сборки.
  3. Читает поток файлов из папки src/images/ . **/* .
  4. Передает все файлы в модуль gulp-newer .
  5. Передает оставшиеся новые или измененные файлы через gulp-imagemin , который устанавливает необязательный аргумент optimisLevel .
  6. Сохраняет сжатые изображения в папку Gulp dest/images/ .
  7. Экспортирует таск images , который вызывает функцию images .

Сохраните gulpfile.js и поместите несколько изображений в папку проекта src/images/ . Затем запустите задание из командной строки:

Все изображения будут сжаты, и вы увидите следующее:

Попробуйте снова запустить gulp images . Файлы не обрабатываются, поскольку ни одно из изображений не было изменено.

Задание для HTML

Создадим таск, который копирует файлы из исходной папки HTML. Мы можем сжать HTML-код, чтобы удалить ненужные пробелы и атрибуты, используя плагин gulp-htmlclean.

Также будет установлен плагин gulp-noop . Он не выполняет никакой операции:

Эти модули загружаются в начале gulpfile.js :

Теперь можно экспортировать функцию для обработки html в конец gulpfile.js :

  1. Мы передаем HTML только через gulp-htmlclean , если NODE_ENV установлен на production . Поэтому HTML остается несжатым во время разработки. Что будет полезно для отладки.
  2. Экспортируемый таск html использует series() для объединения заданий, которые выполняются друг за другом. В этом случае функция images() запускается до функции html(). В результате файлы HTML могут ссылаться на изображения.

Сохраните gulpfile.js и запустите gulp html из командной строки. Будут выполняться оба таска – html и images .

Задание для JavaScript

Обработаем файлы JavaScript, построив сборщик пакетов. Он делает следующее:

  1. Гарантирует, что зависимости будут загружены с помощью плагина gulp-deporder . Анализирует комментарии в верхней части каждого скрипта, чтобы обеспечить правильное упорядочение – например, // requires: defaults.js lib.js .
  2. Объединяет все файлы скриптов в один файл js , используя gulp-concat .
  3. Удаляет значения console и debugging с помощью gulp-strip-debug при работе в режиме разработки.
  4. Минифицирует код с помощью ES6-совместимого gulp-terser .
  5. Добавляет карту источника в режиме разработки с помощью gulp-sourcemaps .

Установите модули плагинов:

Затем загрузите их в начало gulpfile.js :

Примечание: для большей эффективности модули gulp-strip-debug и gulp-sourcemaps загружаются только в режиме разработки.

Экспортируйте новую функцию задания:

Функция sourcemap.init() вызывается до преобразования кода, а sourcemaps.write() — после завершения.

Добавьте файлы JavaScript в папку src/js/ . Затем запустите gulp js .

Задание для CSS

Создадим задание (таск), которое будет компилировать файлы Sass ( .scss ) в один файл .css , используя gulp-sass . Это плагин Gulp для node-sass , который связан с LibSass C/C++ . Предполагается, что ваш основной файл Sass scss/main.scss отвечает за загрузку всех файлов.

Инструкция также будет использовать PostCSS через плагин gulp-postcss . PostCSS требуется собственный набор плагинов:

  • postcss-assets – предназначен для управления ресурсами. Он позволяет использовать такие свойства, как background: resolve (‘image.png’); разрешить пути к файлам или к background: inline (‘image.png’); встроить изображения с закодированными данными.
  • autoprefixer – предназначен для автоматического добавления вендорных префиксов в свойства CSS.
  • css-mqpacker – для упаковки нескольких ссылок на один и тот же медиа запрос CSS в одно правило.
  • cssnano – для минификации кода CSS.

Source Map будет добавлена ​​в файл CSS при повторном запуске в режиме разработки с помощью gulp-sourcemaps .

Установите все модули:

Загрузите их в начало gulpfile.js :

Теперь можно экспортировать новый таск в конец gulpfile.js . Обратите внимание, что задание images установлено ​​как зависимость, потому что плагин postcss-assets может ссылаться на изображения в процессе сборки:

При этом .on(‘error’, sass.logError) гарантирует, что Sass выводит синтаксические ошибки на консоль, не останавливая работу Gulp.

Сохраните файл, добавьте файлы Sass .scss и запустите таск из командной строки:


Шаг 6: Автоматизируйте выполнение заданий

Чтобы запустить все задания в одной команде, экспортируйте таск build в gulpfile.js :

Метод gulp.parallel() выполняет все задания одновременно. Его можно комбинировать с gulp.series() для создания сложных цепочек зависимостей. В этом примере exports.html, exports.css и exports.js запускаются параллельно. Но каждый из них может иметь последовательности зависимостей, включая таск images.

Введите в командной строке gulp build , чтобы выполнить все таски.

Кроме этого Gulp предоставляет метод .watch() , который может запускать соответствующий таск при каждом изменении файла. Он передает набор файлов или папок для мониторинга, любые и функцию таска для запуска (необязательно в методах gulp.series() ли gulp.parallel() ).

Экспортируем новый таск watch в конец gulpfile.js :

Gulp нужно знать, когда будет завершена функция таска. Этого можно добиться, используя JavaScript Promise, транслятор событий, дочерний процесс или функцию обратного вызова. В данном примере мы используем функцию обратного вызова done() , чтобы указать, что все задания watch() были настроены.

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

Сохраните gulpfile.js и введите в командной строке gulp . Ваши изображения, HTML, CSS и JavaScript будут обработаны. Затем Gulp продолжит проверку обновлений и будет повторно выполнять задания по мере необходимости. Нажмите Ctrl/Cmd + C , чтобы прервать мониторинг и вернуться в командную строку.

Шаг 7: Пожинаем плоды!

Другие плагины, которые могут быть полезны:

  • gulp-load-plugins : загружает все модули плагинов Gulp автоматически;
  • gulp-preprocess : простой препроцессор HTML и JavaScript;
  • gulp-less : плагин препроцессора Less CSS ;
  • gulp-stylus : плагин препроцессора Stylus CSS ;
  • gulp-size : отображает размеры файлов;
  • gulp-nodemon : использует nodemon для автоматического перезапуска приложений Node.js при их изменении.

Таски Gulp могут запускать любой JavaScript- код или модули Node.js. Они не обязательно должны быть плагинами. Например:

  • browser-sync : автоматически перезагружает ресурсы, когда происходят изменения;
  • del : удаляет файлы и папки (может очищать папку build в начале каждого запуска).
  • множество плагинов ;
  • конфигурация с использованием pipe легко читаема и понятна;
  • js можно адаптировать для использования в других проектах;
  • упрощает развертывание;
  • домашняя страница Gulp ;
  • плагины Gulp ;
  • домашняя страница npm .

После применения описанных выше процессов к простому сайту его общий вес уменьшился более чем на 50%.

Gulp – это отличный вариант для автоматического запуска заданий и упрощения процесса разработки.

Gulp — автоматизация процесса разработки

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

Если вы не пользуетесь этой программой, то самое время начать это делать.

Потому что она может:

  • Автоматически перезагружать браузер при любых изменениях в файлах проекта (более не надо затирать клавиши Ctrl/Cmd+R)
  • Сжимать и склеивать скрипты и стили
  • Проверять скрипты и стили на ошибки
  • Использовать различные препроцессоры — SASS/LESS/Stylus, Jade и так далее.
  • Оптимизировать изображения

Конечно, возможностей больше. Здесь лишь перечислены основные из них.

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

Установка

Устанавливается Gulp при помощи NPM (Node Package Manager).

Подразумевается под тем, что вы уже установили Node.JS на свой компьютер. Или, по-крайней мере, знаете, как это сделать.

Илон Маск рекомендует:  Ваше время на странице

Если ещё не установили, то обязательно пройдите по ссылке. Скачайте установщик для вашей операционной системы и установите его.

Устанавливаем Gulp:

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

Перейдём в директорию с проектом и создадим пустой файл для конфигурации.

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

Конфигурация

Приступаем к настройке файла конфигурации gulpfile.js , который мы создали в корневом каталоге проекта.

После сохранения файла, в консоли, находясь в папке проекта, запустите команду gulp .

Тестовый проект с уже созданными файлами для Stylus, Jade и CoffeeScript можно скачать по адресу:

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

Поделиться

Комментарии Правила дискуссии

  1. Участники дискуссии уважительно относятся друг к другу и к автору блога.
  2. Мат недопустим. Учитесь вести диалог культурно.
  3. Реклама и спам запрещены.

Если вы не соблюдаете эти три простых правила, то ваши комментарии удаляются без предупреждения.

Во всем остальном вам предоставляется полная свобода слова и выражения собственного мнения.

Gulp с нуля — руководство для начинающих веб-разработчиков

Приветствую вас дорогой посетитель! Данную статью я хочу посвятить очень интересной и важной теме — фронтенд-разработка при помощи пакета Gulp. Скорее всего многие из вас уже слышали о нем, даже если не слышали, то скорее всего видели его файлы проекта. Сегодня большинство расширений (плагины jQuery, различные фреймворки и т.д.) ведут именно при помощи подобных пакетов. На подобии Gulp есть и другие пакеты, например, GruntJs — это «брат-близнец» Gulp и работает по той же аналогии. Например, на GruntJs создана сборка Twitter Bootstrap. Я сам начинал изучение именно с Grunt.

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

Что такое Gulp, чем он хорош и нужен ли он простому верстальщику?


Так что же такое Gulp?

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

Gulp позволяет решать такие задачи, как:

  • использование различных JS, CSS, HTML препроцессоров для ускорения верстки (CoffeeScript, SASS, LESS, Stylus, Pug (Jade) и др.);
  • объединение файлов в один — js, css, html;
  • минимизация кода файлов — js, css, html;
  • создание локального веб-сервера и перезагрузка страницы браузера при сохранении файла проекта (live reaload);
  • автоматическая простановка вендорных префиксов в CSS-файле для поддержки стилей устаревшими браузерами;
  • работа с изображениями сайта — объединение в спрайты (в том числе и SVG-спрайты), оптимизация (уменьшение веса);
  • копирование файлов проекта из одной папки в другую, создавая при это рез. копию;
  • создание иконочных шрифтов;
  • и многое другое…

Одним словом, круг задач, решаемых с помощью галп достаточно широк и грех всем этим не воспользоваться. Когда я впервые столкнулся с GruntJs мне казалось, что подобные сборки нужны только для крупных и поддерживаемых проектов. А я верстаю небольших макеты и мне это не нужно. Ох как же я ошибался. На самом деле данный инструмент нужен любому веб-разработчику, он здорово экономит время. Представьте, я раньше делал спрайты изображений вручную — это же натуральная рутина. А в Gulp, установив нужный плагин мне достаточно добавить нужное изображение в определенную папку и скрипт сделает все за меня, выдав уже готовый объединенный файл изображений.

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

Установка Gulp

Установку Gulp я буду показывать на примере ОС Windows 10 x64 последней сборки, так как я работаю именно в данной системе.

Первым делом нам необходимо установить node.js. Данный пакет превращает клиентский язык javaScript в серверный. Для тех, кто не знает язык javaScript интерпретирует браузер пользователя. Кстати, Gulp создан на языке javaScript и если вы знакомы с данным языком, то освоить его вам будет намного легче.

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

После установки node.js можно проверить правильно ли все установилось. Открываем консольное окно (командная строка) — в ОС Windows это комбинация клавиш Win+R -> cmd -> Enter . Вводим команду:

Если все правильно установили в ответ вы увидите версию установленного пакета.

Все, можно приступать к установке Gulp.

Пишем команду для установки Gulp:

Давайте разберем, что значит данная запись:

  • npm — говорит о том, что мы запускаем пакет менеджер, который установит Gulp;
  • i — это сокращенная запись install, т.е. установить;
  • gulp — имя устанавливаемого пакета;
  • -g — данный флаг говорит о том, что мы устанавливаем Gulp глобально в систему. Без данного ключа gulp установится в ту папку, из которой запускается команда. Так что имейте это ввиду.

Установка не занимает много времени, примерно 1-2 мин. После завершения работы установщика галп можно проверить корректность установки, также, как и node.js:

Если все правильно, то выдаст версию установленного галп.

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

Двигаемся дальше. Теперь создайте папку проекта в удобном месте вашего компьютера. Назовем ее, например, gproject.

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

Перейдем в папку проекта и запустим консоль команд для данного каталога. Наиболее быстрый вариант сделать это зажать клавишу «Shift» и удерживая ее щелкнуть правой кнопкой мыши на пустой области окна каталога. Откроется контекстное меню, в котором выбираем «Открываем окно PowerShell здесь«. Данный пункт может называться и по другому — «Открыть окно команд«.

Запускаем инициализацию проекта командой:

Все команды в дальнейшем пишутся именно в консоли, повторяться далее я не буду.

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

  • package-name: вводим название проекта маленькими буквами
  • version: оставляем по умолчанию — 1.0.0
  • description: вводим описание проекта, например, My first gulp project.
  • entry point: (index.js), test command:, git repository:, keywords: — данные шаги оставляем по умолчанию, жмем Enter и переходим к следующему шагу
  • author: впишите имя автора, я ввел Zaur Magomedov
  • license: оставляем по умолчанию
  • Is this ok? — вводим «yes» и жмем Enter поле чего в папке нашего проекта появится файл package.json.

Файл package.json содержит в себе информацию о проекте + информацию об установленных пакетах (плагинов). Это своего рода файл манифеста. Теперь давайте установим Gulp локально в папку нашего проекта. Для этого пишем следующую команду:

флаг —save-dev как раз говорит установщику установить gulp локально в папку нашего проекта.

Внимание! Локально установится та версия галпа, что и глобальная.

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

И так, после установки gulp в папке проекта должна появиться папка node_modules, она содержит в себе необходимые зависимости. Также все новые установленные зависимости, прописываемые в package.json будут складываться именно в данную папку. Так что ничего не трогайте в ней и не удаляйте. Не пугайтесь если увидите в ней много файлов и папок.

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

Мы видим всю ту информацию, которую вводили при инициализации проекта + ниже в блоке «devDependencies» указаны установленные зависимости и их версии. В данном случае это gulp версии 3.9.1. Как я и говорил установилась локально именно та версия, что стоит глобально.

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

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

Теперь давайте разберем предназначение каждой папки.

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

src — здесь будут храниться исходники файлов проекта. Вообще, в дочерних папках может быть очень много файлов, зависит от размера проекта. Каждые типы файлов потом объединяются в общий файл и копируются в папку продакшена. В корне лежит файл index.html. Вообще для HTML можно создать отдельный каталог, но я здесь не стал усложнять и создал всего лишь главный файл.

image — неоптимизированные изображения и иконки проекта.

js — файлы javaScript.

sass — файлы препроцессоров SASS или SCSS.

node_modules — с этой папкой мы уже знакомы — все модули и зависимости gulp.

gulpfile.js — это главный файл пакета Gulp. Для чего он предназначен поговорим чуть ниже.

Gulpfile.js

Это важный файл без которого Gulp проект работать не может. Здесь записываются все задачи для выполнения — это так называемые таски (task), что в переводе с английского означает — задача. В основном весь gulpfile состоит из сплошных тасков. Таски создаются для подключаемых дополнительных плагинов. Без таска плагин работать не будет. Давайте обо всем по порядку.

Создайте в корне своего проекта файл gulpfile.js и вставьте в него следующий код:

Сразу, не отходя от кассы, разберем что это за код и за что отвечает каждая строчка.

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

А это простейший таск для вывода сообщения в окне консоли. myFirstTask — это название нашего таска, оно может быть любым.

Данной строкой мы запускаем все прописанные здесь таски. Этот таск по умолчанию, который запускает одновременно все перечисленные в нем таски. В данном случае указан только один созданный нами — [«myFirstTask»] . Их может быть несколько, указываются в кавычках и через запятую. Например, если бы у нас было 2 таска, то мы бы указали так — [«myFirstTask», «mySecondTask»] . И одной командой мы бы запустили сразу 2 данных таска.

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

В данном случае мы запустили таск по умолчанию, но можно запустить отдельно каждый таск. Например, для нашего таска будет следующая команда — gulp myFirstTask , результат будет тот же самый.

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


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

Давайте создадим небольшой проект для верстки, установив некоторые плагины, которые упростят нам работу в разы. Откроем наш gulpfile.js и cразу под строкой var gulp = require(«gulp»); запишем подключение плагинов:

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

Здесь gulp-jshint — это название плагина. Чтобы установить несколько плагинов разом необходимо их просто прописать через пробел:

После установки плагинов, как говорилось выше, все их названия и версии записываются автоматически в файл package.json. Теперь мой файл выглядит так:

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

Теперь давайте разберем из чего состоит отдельный таск:

  • taskname — название таска — название может произвольным;
  • source-files — директория до файлов исходников, необходимо указать полный путь и расширения файлов, например, путь до всех фалов с расширением .js будет таким — templatename/js/*.js;
  • .pipe() — метод, который позволяет работать с установленным плагином
  • plugin-name — название плагина;
  • dest(«filder-path») — путь до папки продакшена, т.е. куда выгрузить после отработки плагина

Теперь, например, посмотрите наглядно на таск для работы с файлами javaScript:

Если заметили в gulpfile.js мы в конце создали таск под названием watch. Как он работает, ведь плагина для него мы не устанавливали? Все верно, это встроенная функция gulp. Данный таск позволяет следить за файлами, в которых были сделаны изменения. Как только в определенных файлах находятся изменения запускается указанный таск.

Ниже запускаем все таски по умолчанию.

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

Как видим, все наши задачи запустились, картинки сжались на 3.5%.

Хотелось бы отметить, что когда вы вносите изменения в gulpfile.js необходимо перезапускать команду gulp , предварительно остановив его, для того, чтобы изменения вступили в силу. Для остановки просто два раза подряд вводим комбинацию клавиш Ctrl + С , когда увидим мигающий курсор, снова вводим — gulp .

Разворачивание готовой сборки одной командой

Вы создали сборку, теперь хотите реально создать на ней проект. Достаточно скопировать папку сборки и запустить установку. Вообще при установке должны устанавливаться все последние версии зависимостей, включая сам gulp (при обновлении глобальной версии). Для этого нам необходимо подредактировать файл package.json. В блоке devDependencies, где перечислены установленные расширения вместо версии необходимо указать ключевое слово — latest . Вот как теперь выглядит мой файл:

Теперь для быстрого разворачивания проекта необходимо сделать следующее — копируем все файлы проекта Gulp за исключением папки node_modules в другую папку вашего проекта. Открываем локально консоль и вводим команду npm i после чего запуститься установка gulp и всех зависимостей. Все, можно начинать работу.

Дополнительные полезные плагины для Gulp

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

Plumber — дает возможность продолжить работу gulp при ошибке в коде. На самом деле, если вы в коде (html, js, sass, css) сделаете ошибку gulp выдаст ее в консоли и прекратит свою работу. Вам необходимо будет исправить ошибку и вновь запустить gulp.

Sourcemaps — создает карту подключений файлов css и js. Обычно в подобных проектах файлы стилей и скриптов делят на несколько частей для удобства. Так вот, чтобы потом ориентироваться в каком файле и в какой строке находится та или иная запись как раз и нужна карта подключений.

Tinypng — сжатие изображений. Работает по той же аналогии, что и imagemin, но сжимает значительно лучше.

SvgSprite — сборка svg-спрайта иконок. В последнее время я перешел с иконочных шрифтов на svg иконки. Чтобы уменьшить количество http запросов к серверу нужно собирать иконки в спрайты.

Rigger — объединяет html-файлы в один. Необходимо, когда вы разбиваете html-файлы на отдельные неизменяемые блоки, например, шапка сайта, футер и т.д.

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

Spritesmith — создание спрайтов картинок. Еще один плагин для сборки спрайтов, только в данном случае из иконок Png. Также использую его частенько, т.к. не всегда иконки в макете бывают в формате svg.

Rimraf — очистка папки dist. Бывает, что приходится очищать время от времени папку продакшена dist, т.к. в нем могут скопиться неиспользуемые файлы. Например, вы переименовали файл стилей в другое название, таким образом у вас в dist будут две копии — старая и новая.

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

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

Жду ваши комментарии ниже. Подписывайтесь на мой канал в телеграм. До встречи в следующих статьях!

Остались вопросы? Посмотрите видео.

Заур Магомедов

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

Илон Маск рекомендует:  Что такое код modifymenu

Зачем нужен Gulp?

CSS и JS:
К примеру, у вас имеется большое количество (Х штук) css или js файлов, которое вы подключаете на своих страницах посредством тэгов

  • и .
    При загрузке страницы, браузер клиента будет отправлять X запросов к вашему серверу, а ваш сервер должен будет ответить на X запросов.
    Это:
    1. Тормозит загрузку страницы — будете ждать ответа от сервера
    2. Загружает ваш сервер

    С помощью сборщиков фронтэнда вы можете «склеить» все файлы в один — main.css и main.js, которые будут отдаваться 2 запросами с сервера. Также, вы сможете минифицировать CSS и JS. Под минификацией подразумевается уменьшение размеров файла на диске. Естественно, более легкий файлы будет быстрее прогружаться + минимальное количество запросов к серверу.

    IMG:
    К примеру, у вас имеется Х изображений размером 700 Кбайт. Клиенту надо будет загрузить 700 * X Кбайт. Если вы пропустите свои изображения через Gulp, то вы получите изображения с меньшим размером на диске и такого же качества, т.е. клиенту придется прогрузить примерно (500-600) * X Кбайт.

    Первое знакомство с Gulp. Устанавливаем и пишем задачу.

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

    Чтобы использовать Gulp будет достаточно уметь пользоваться npm.

    1. Gulp — зачем он мне?

    Для начала очень кратко что же такое этот Gulp и в решении каких задач он вам поможет:
    Gulp — это инструмент автоматизации frontend разработки. Он поможет вам автоматизировать рутинные задачи и ускорит вашу работу.

    Основные задачи, которые вам поможет решить Gulp:
    — Минимизация и конкатенация Javascript и CSS файлов;
    — Минимизация HTML;
    — Использование CSS препроцессоров Sass, Less, Stylus и других;
    — Оптимизация изображений;
    — Автоматическая простановка вендорных префиксов;
    — Использование шаблонизаторов (Jade);
    — Удаление неиспользуемого CSS (UnCSS);
    — Валидация кода и тестирование;

    Звучит воодушевляюще, так давайте скорее устанавливать это чудо.

    2.Установка Gulp глобально

    На вашем компьютере должен быть установлен Node.js. Скачать его можно по ссылке.
    После установки Node.js запустите командную консоль. Сначала gulp надо установить глобально.
    Для этого в консоль вводим команду:

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

    Теперь давайте уже создадим проект, к которому будем применять Gulp или настроим Gulp для уже имеющегося у вас проекта.

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

    Далее просто следуйте инструкциям в консоли и вы заполните метаинформацию о проекте: название, версию, описание, имя автора и остальные данные, которые можно оставить значениями по-умолчанию, просто нажимая Yes.
    В результате этой первоначальной настройки нашего нового Gulp проекта в папке myproject появится новый файл package.json.

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

    Давайте сразу создадим первоначальную структуру нашего проекта по всем правилам хорошего тона веб-разработки.
    В проекте будет две папки src и public. В папке src/ будут размещены все исходные материалы проекта: оригинальные CSS, Sass, js файлы библиотек, оригинальные изображения. То есть это папка исходников нашего проекта.

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

    4. Установка Gulp локально


    Теперь нужно установить Gulp локально в папку с нашим проектом.
    Для этого введем в консоли команду:

    Добавив флаг save-dev (или сокращенно можно писать -D), мы автоматически записали информацию о Gulp и его версии в файл package.json. Если вы теперь откроете файл package.json, то увидите, что там появились такие строчки:

    То есть в область «devDependencies» мы записали имя пакета и его версию. Стрелочка вверх обозначает, что этот пакет можно обновлять.

    Кратко, чтобы была понятна основная суть:
    в файле package.json есть две области «dependencies» и «devDependencies».
    Пакеты, сохраненные в “devDependencies”, нужны в процессе разработки-тестирования, но не в продакшене (когда публикуете свой проект, эти пакеты туда не войдут, они не нужны вашему проекту для нормального функционирования). А пакеты, сохраненные в “dependencies”, необходимы для работы проекта в продакшене (например, всем известный jQuery).

    Если пакет устанавливается с флагом — save,

    то он автоматически добавится в раздел dependencies файла package.json.
    Если пакет устанавливается с флагом save-dev,

    то он автоматически добавится в раздел devDependencies файла package.json.

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

    5. Установка плагинов для Gulp

    Многие активно используют препроцессор Sass, поэтому давайте установим для начала плагин, который будет компилировать Sass в CSS и что главное делать это “на лету”.

    Для этого нам понадобится плагин gulp-sass. Для установки gulp-sass запускаем в консоли команду:

    Отлично, плагин установлен!

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

    Затем подключим наш плагин:

    require указывает, что надо проверить папку node_modules и найти там папку gulp.
    Если такая имеется, то ее содержимое записывается в переменную gulp.

    А так выглядит простой шаблон задачи в Gulp:

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

    Если у задачи имя default — это значит, что она будет выполняться по умолчанию.

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

    Перепишем задачу применительно к нашему плагину gulp-sass и нашей файловой структуре:

    /sass/**/*.scss означает выбрать все файлы с расширением .scss из всех подпапок папки /sass
    .on(‘error’, sass.logError) означает что, если есть ошибки, вывести их в консоль.

    Готово! Теперь, запустив в командной строке gulp sass, мы увидим, что в папке /css появились скомпилированные файлы css.

    6. Компиляция “на лету”

    Давайте усовершенствуем нашу задачу, чтобы отслеживать изменения, вносимые в файлы sass сразу, “на лету”.
    Запишем в наш gulpfile.js такие строчки:

    Метод watch будет смотреть произошли ли какие-либо изменения в файлах .scss и если да, то перезапустит задачу sass.

    Запустим в командной строке gulp watch. Он запустится, но потом зависнет и будет ждать отслеживаемых изменений в файле.
    Внесем в sass изменения и посмотрим страницу. Видим свои изменения. Метод watch отследил изменения и перекомпилировал sass.
    Чтобы остановить watch используйте сочетание клавиш Ctrl + C.

    Теперь внося какие-либо изменения в файлы .scss эти изменения сразу отобразятся в соответствующих файлах .css. Все просто)

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

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

    Поздравляю, это уже маленькая победа)

    Автоматизация с помощью Gulp

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

    На первом занятии мы рассмотрим темы, которые помогут вам эффективнее использовать Gulp в своих проектах:
    * минимизация html кода и css-классов;
    * спрайты и их генерация;
    * оптимизация изображений;
    * работа с адаптивной графикой;
    * автоматизация работы с сервером.

    На втором занятии мы изучим темы:
    * что из себя представляет технология;
    * JavaScript без необходимости становиться программистом;
    * базовая работа с препроцессорами, шаблонами;
    * оптимизация проекта и его содержимого;
    * сборка проекта.

    gulp Начало работы с глотком

    замечания

    Gulp — это система сборки JavaScript, работающая на узле.js, как Grunt. Он позволяет автоматизировать общие задачи в процессе разработки. Gulp использует потоки -concept и code-over-configuration для более простого и интуитивно понятного процесса сборки. Концепция сквозной конфигурации позволяет создавать более читаемые и простые задачи, в то время как задачи grunt сильно перенастраиваются.

    Версии

    Версия Дата выхода
    3,4 2014-01-17
    3,7 2014-06-01
    3,8 2014-06-10
    3,9 2015-06-02
    3.9.1 2020-02-09
    4.0.0 2020-06-21

    Файл Concat js в подпапке с помощью gulp

    gulp CLI docs

    Флаги

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

    • -v или —version отображает глобальные и локальные версии глотки
    • —require потребуется модуль перед запуском gulpfile. Это полезно для транспилеров, но также имеет другие приложения. Вы можете использовать несколько флагов —require
    • —gulpfile будет вручную задан путь к gulpfile. Полезно, если у вас есть несколько gulpfiles. Это также установит CWD в каталог gulpfile
    • —cwd будет вручную установить CWD. Поиск gulpfile, а также относительности всех требует отсюда
    • -T или —tasks отобразит дерево зависимостей задачи для загруженного gulpfile
    • —tasks-simple отобразит список задач для загруженного gulpfile
    • —color заставит плагины gulp и gulp отображать цвета, даже если цветовая поддержка не обнаружена
    • —no-color заставит плагины глотков и глотков не отображать цвета даже при обнаружении поддержки цвета
    • —silent отключит все протоколы —silent

    CLI добавляет process.env.INIT_CWD, который является оригинальным cwd, с которого он был запущен.

    Специальные флаги задач

    Обратитесь к этой статье StackOverflow о том, как добавить определенные пользователем флаги

    Задачи

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

    Составители

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

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

    1. Установите Node.js и NPM:

    Для Gulp требуются Node.js и NPM, менеджер пакетов Node. Большинство инсталляторов включают NPM с Node.js. Обратитесь к документации по установке или подтвердите, что она уже установлена, выполнив следующую команду в вашем терминале,

    2. Установите глоток во всем мире:


    Если вы ранее устанавливали версию глотки во всем мире, запустите npm rm —global gulp чтобы убедиться, что ваша старая версия не сталкивается с gulp-cli .

    3. Инициализируйте каталог проекта:

    4. Установите gulp в свой проект devDependencies:

    5. Создайте gulpfile.js в корне вашего проекта:

    6. Запустите глоток:

    Запуск по умолчанию будет выполняться и ничего не делать.

    Для запуска отдельных задач используйте gulp .

    Зависимость задачи

    Вы можете запускать задачи последовательно, передавая второй параметр gulp.task() .

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

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

    Gulp – подробное руководство

    Данная статья подходит только для GULP версии 3.
    В самом низу есть пример моего файла gulpfile.js для 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

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

    Обратите внимание, что при установке Node.js необходимо отметить галочками установку npm и добавление программы в Path:

    После того, как Node установлен, можно приступать к установке Gulp. Откройте терминал (Командная строка в Windows) и выполните следующую команду:

    Для пользователей Mac и Linux, возможно, придется выполнять команды с правами суперпользователя, sudo.

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

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

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

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

    Теперь откроем терминал в папке проекта. Для пользователей Windows достаточно зажать Shift и открыть контекстное меню. В нем появится пункт “Открыть окно команд”:

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

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

    1. Назовем проект “MyProject”
    2. Оставим версию текущей – 1.0.0
    3. Введем краткое описание проекта – My First Gulp Project:
    4. entry point, test command, git repository, keywords оставим по-умолчанию.
    5. Имя автора можно и указать :-)
    6. 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 не нужно.

    Общепринятая структура каталогов в проектах

    Работая с различными плагинами, программами и скриптами, будь то 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.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 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:

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

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

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

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

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

    И эта задача нам по плечу:

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

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

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

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

    Обратите внимание, что для работы Bower необходим установленный Git.

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

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

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


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

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

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

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

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

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

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

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

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

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

    Обратите внимание, что при импорте в Sass простых CSS файлов библиотек, расширение файла .css не указывается.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    Обновленная версия моего gulpfile.js для нормальной работы с GULP v4

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

    Комментарии (5) к “Gulp – подробное руководство”

    Алексей

    Здравствуйте. Подскажите пожалуйста, в чем может быть причина такой проблемы: после выполнения команды gulp build перестала появляться папка dist, хотя до недавнего времени все работало. Другие дисты, минификация и все остальное происходит, видно в командной строке. Спасибо.

    Denis Creative

    Родион

    Спасибо за подробный гайд, решил вместо коалы для препроцессинга sass попробывать gulp. Тем более что Browser Sync уже использовал до этого. Шел подробно по вашему и гайду и все работало, пока не дошел до пункта где идет объединение преобразования в sass и watch:

    И у меня вышла такая ошибка:

    Спросив у Гугла, понял что у меня версия Gulp 4.0.2 , а там синтаксис уже другой, вот такой:

    После этого всё заработало. Может кому-то поможет.

    Denis Creative

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

    Denis Creative

    Задача sass не сработает.


    Нужно для watch написать задачу так:

    Чтобы вместе работали watch и browser-sync создаем задачу default :

    Что такое Gulp — Разобрали на практике и делимся с вами

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

    Однотипные задачи неизбежны при сборке проектов. На их решение может уйти ни один час работы и выполнение последовательных операций. Одним словом — рутина.

    Если вы часто сталкиваетесь с компиляцией Sass/Less в CCS, минификацией, конкатенацией файлов css/js, обработкой изображений и далее по списку, то наверняка слышали о Gulp. Или использовали аналогичные инструменты, вроде Grunt.

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

    Какие задачи решает Gulp:

    • Работа с Javascript, HTML и CSS-файлами — минимизация и конкатенация отдельных фаилов в один ;
    • Использование CSS препроцессоров Sass, Less, Stylus, Jade и тд;
    • Работа с изображениями — оптимизация и сжатие;
    • Автоматическая простановка вендорных префиксов для CSS;
    • Удаление неиспользуемого CSS (UnCSS);
    • Валидация кода и его тестирование.

    Без должной подготовки непросто использовать Gulp на постоянной основе. Для начала стоит детально рассмотреть, на каких принципах построен gulp.

    Для работы с Gulp нужно установить Node.js. Скачать его можно по ссылке: https://nodejs.org/en/download/. Этот движок занимается процессом чтения и записи данных — потоков. Потоки предлагают удобный интерфейс для асинхронной работы с данными. Node.js вызывает соответствующие колбэки при появлении новой порции данных, возникновении ошибки, окончании потока и тд. Таким образом достигается эффективность ввода и вывода при минимальных затратах со стороны программиста.

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

    У вас уже должен быть установлен Node.js. Откройте командную строку и введите команду:

    Установка Gulp глобально

    npm install – это команда, которую использует Node Package Manager для установки Gulp на компьютер.

    Флаг -g указывает, что Gulp надо установить на компьютер глобально для использования в любом месте системы.

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

    Команда npm init создает файл package.json, который содержит информацию о проекте (описание проекта и зависимости).

    Чтобы добавить gulp в новый проект для разработки, пишем:

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

    Для выполнения каждой задачи в gulp есть свой плагин. Установить основные плагины для разработки вы можете по ссылке: http://gulpjs.com/plugins/

    Основные понятия Gulp

    gulpfile.js

    Файл gulpfile.js находится в корне папки проекта. Он содержит все инструкции — какие модули используются, какие задачи выполняются. В начале файла подключается сам Gulp и его модули, которые будут использованы:

    Task

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

    Task вызывается из консоли как

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

    Он служит для выборки файлов, над которыми будет выполняться task:

    Для обработки всех jpg из папки src/img

    Для обработки всех jpg из папки src/img, включая подпапки

    Для обработки всех jpg и png из папки src/img включая подпапки

    Можно задавать несколько условий выборки файлов в виде массива.

    Можно задавать исключения, используя “!”. Обработка всех файлов js из папки src/js кроме файла src/js/js.js

    Вызов плагина для обработки — .pipe()

    Этот метод обрабатывает файл с помощью указанного плагина.

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

    Вывод результата — gulp.dest

    path_to_files — это папка, в которую надо сохранить результат обработки. Например:

    Описание Task

    Watch

    Позволяет отслеживать изменения файлов и запускать соответствующие таски gulp.watch( path_to_files, [‘task_name’] ); path_to_files — файлы, за которыми следим [‘task_name’] — массив с названиями тасков, которые надо запускать при изменении файлов.

    Start

    Выполняет запуск задачи

    Основные задачи и плагины

    CSS и препроцессоры

    • С помощью плагина gulp-sass — мы можем компилировать SCSS в CSS.
    • gulp-less — компилирует LESS в CSS.
    • gulp-autoprefixer — добавляет префиксы браузеров для нестандартных CSS свойств.
    • Плагин gulp-cssnano — минифицирует все.

    При работе с JS

    Используем плагин gulp-uglify.

    Сжатие изображений

    • для png — imagemin-pngquant
    • для jpg — imagemin-jpegoptim, imagemin-mozjpeg

    Включение кода другого файла gulp-rigger

    Работает любом файле — js, css, scss. Он удобен для сборки в один файл, если нужно учитывать порядок включения файлов.

    В дальнейшем заменяется на код файла.

    gulp-cache

    Обеспечивает кэширование результатов обработки файлов.

    Обработка ошибок

    Если в процессе обработки файла возникает ошибка, то весь таск прерывается. Дальнейшие файлы не обрабатываются.

    Если таск был запущен через watch и запустился после изменения файла, то при ошибке в нем будет прервано и дальнейшее наблюдение за файлами. Чтобы такого не происходило надо отлавливать ошибки. Это делает плагин gulp-util. Его надо подключить в начале gulpfile.js.

    Добавить к каждому плагину, у которого возможна ошибка:

    Ошибка будет выведена в консоль, но наблюдение и обработка файлов продолжится.

    Надеемся, что вам удалось применить Gulp в своей работе. На данный момент он является более эффективным инструментом при сборке проектов и web-приложений.

    Илон Маск рекомендует:  Настройка ide vb
  • Понравилась статья? Поделиться с друзьями:
    Кодинг, CSS и SQL