Gulp. Урок 5. Gulp watch


Содержание материала:

Все о WEB программировании

WEB программирование от А до Я

Заказать сайт:

Социальные сети:

Партнеры:

Настройка GULP для верстальщика

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

Что такое Gulp?

Gulp – это менеджер задач для автоматического выполнения их. Gulp написан на языке программирования JavaScript. Для запуска задач используется командная строка. Для конфигурации используется файл gulpfile.js. Распространяется через менеджер пакетов npm.

Установка Gulp для проекта.

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

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

От вас потребуется:

  • Указать название проекта
  • Версию проекта
  • Описание проекта
  • Точку входа
  • Команду
  • Git репазиторий
  • Ключевые слова
  • Имя автора
  • Лицензия

Все можно оставить по умолчанию (если вы не хотите выкладывать проект в общий доступ)

Затем подтверждаем введенную информацию.

Отлично. NPM инициализировали. Теперь в корне появился файл packages.json – файл конфигурации менеджера пакетов.

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

Теперь установим gulp для проекта:

Все gulp для проекта установлен.

Давайте проверим. Создадим файл gulpfile.js и создадим в нем одну задачу test, которая будет выводить в консоль «Я работаю».

Первое мы подключаем gulp, и второе мы вызываем функцию task у gulp, которая принимает два параметра:

  • Название задачи
  • Анонимная функция в которой описывается наша задача

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

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

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

Для установки в консоли выполняем следующую команду:

Теперь давайте создадим задачу, которая будет запускать browser-sync и отслеживать изменения файлов.

Задача называется serve. И browser-sync будет обновлять страницу браузера автоматически, если изменились файлы с расширением css (которые расположены в папке src/css) и с расширением html (которые расположены в папке src).

Для запуска данной задачи выполняем команду

Для верстки я использую sass. Поэтому для компиляции из sass в css я использую пакет gulp-sass.

Установка и настройка gulp-sass

Для установки gulp-sass в консоли выполняем команду:

Теперь создадим задачу sass, которая будет компилировать sass в css. И изменим задачу serve, чтобы наш browser-sync отслеживал вместо css файлы sass.

Теперь при запуске задачи serve, будет запускаться задача sass.

Отлично. Дальше установим и подключим пакет gulp-autoprefixer, который будет добавлять к css стилям префиксы (для старых браузеров).

Установка и настройка gulp-autoprefixer

Для установки gulp-autoprefixer выполним команду:

И добавим в задачу sass добавление префикса.

Теперь при запуске задачи sass у на с будет:

  1. Компилирование sass в css
  2. Добавление префиксов
  3. Сохранение файла в src/css

Следующий пакет объединяет все css файлы в один.

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

Для установки contactCss используем следующую команду:

И добавим выполнение данного пакета в задачу sass. (Будем все файлы css объединять в style.css)

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

Установка и настройка gulp-rename

Для установки gulp-rename выполним следующую команду:

Пока данный пакет не будем добавлять ни в какие задачи.

Установка и настройка пакета для минимизации CSS файлов – clean-css

Для установки clean-css выполним следующую команду:

Теперь давайте создадим задачу mincss, которая будет добавлять к имени файла суффикс «.min», минимизировать css файл и сохранять в app/css

Отлично, давайте установим gulp пакет, который будет минимизировать js файлы.

Установка и настройка пакета gulp для минимизации js файлов —gulp-uglify

Для установки gulp-uglify выполним следующую команду:

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

Мы создали основные задачи. Но две последние должны выполняться при выкладывании проекта в продакшен. И выполняться должны вместе. Давайте создадим задачу, которая будет выполнять задачу mincss, а потом minjs

Создание задачи в gulp

Создадим задачу min, которая будет запускать задачи mincss и minjs

Все. Давайте еще зададим задачу по умолчанию.

Задание задачи по умолчанию gulp

Вывод.

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

Введение в 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 :

Топ-пост этого месяца:  Перископ — самая быстрорастущая и перспективная социальная платформа Periscope

Теперь можно экспортировать функцию для обработки 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 – это отличный вариант для автоматического запуска заданий и упрощения процесса разработки.

Слежение за файлами

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

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

Для начала, вот моя текущая структура папок:

Установка необходимых пакетов

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

Добавление задачи watch и автоматизация системы

Gulp предлагает объект с именем watch , который похож на объекты src и dest . Мы можем использовать объект watch и попросить Gulp следить за данной задачей. Это означает, что Gulp будет следить за файлом на случай его модификации.

Добавьте следующий код в ваш gulpfile.js чтобы начать слежение за файлом main.css:

Окончательно gulpfile.js должен выглядеть следующим образом:

Теперь перейдите к командной строке и запустите gulp mincss снова. Если всё произошло ожидаемо, то вы должны увидеть сообщение «seen», как на картинке ниже:

Объект watch по-прежнему будет следить за какими-либо изменениями сделанными в файле main.css и отображать «seen» каждый раз, пока вы не нажмёте Ctrl + C для его остановки. Круто!

Функция watch принимает два аргумента: файл(ы) для слежения и вызов для действия. Второй аргумент может быть замыканием (анонимной функцией) или объектом JavaScript.

Обратите внимание, что за раз мы можем добавить несколько задач в файл gulpfile.js. У нас может быть задача script для управления JavaScript-файлами, задача connectPHP для запуска сервера PHP и т. д. Это может усложнить управление отслеживанием. Допустим, у нас есть три файла для слежения, мы должны написать:

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

Лучший способ справиться с грязной частью — это создание объекта paths , вроде следующего:

Это выглядит хорошо и даёт нам возможность узнать, когда изменился CSS или JavaScript.

Другой мощной штукой для уведомлений является второй аргумент. Поскольку мы можем использовать замыкание в качестве аргумента, представьте как мы передаём целую задачу. Так что у нас есть что-то вроде такого:

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

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

При запуске gulp mincss будут отслеживаться файлы CSS и CoffeeScript. Но при изменении CoffeeScript-файла он не будет отслеживаться, только файл CSS. В том смысле, что отслеживание произойдёт только когда вы измените свой CSS-файл. То же самое происходит, когда вы решите отслеживать задачу scripts. Хотя это может быть иногда полезно с точки зрения экономии ресурсов.

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

Теперь всё что вам нужно сделать это запустить gulp watcher и все ваши файлы будут отслеживаться одновременно. Любой файл, который вы измените будет компилирован.

Существует ещё один способ как сделать всё проще. Вместо запуска gulp watcher вы можете просто запустить gulp и он сделает всю работу. Но прямо сейчас в нашем случае если вы введёте gulp вы получите такую ошибку:

Gulp просит нас создать ещё одну задачу с именем default, которая необходима для работы.

#01 — Работаем с CSS: concat, minify, rename, notify, watch, dest.

Блаженство тела состоит в здоровье, блаженство ума — в знании. Фалес

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

Это первый урок нашего курса о gulp.js. На нем мы научимся подключать и настраивать сборщик. Познакомимся также с важными плагинами gulp, без установки которых работа программы будет бессмысленна. Важную роль играет в gulp.js concat — плагин, который объединяет файлы. А встроенная функция gulp.watch позволяет отслеживать изменения во всех файлах и запускать
процессы, которые должны при них происходить.

Будет рассмотрена работа с плагинами: minify, rename, notify. Разберемся с функцией gulp. dest.


Приятного всем просмотра! Учитесь с удовольствием!

Оставь комментарий!

14 thoughts on “ #01 — Работаем с CSS: concat, minify, rename, notify, watch, dest. ”

Спасибо за урок, Дим!
Как всегда коротко и лаконично.

Будет ли обзор лучших пакетов для Галпа?

Обязательно. 4 уже посмотрели, ждите еще

А что за плагин на Sublime Text который добавляет стрелочки рядом со вкладками?
Все не могу его найти

очень просто — это sublime text 3

Классная тема =)
Хорошие видео, интересные темы =)
Вы все прекрасны, спасибо вам за вашу работу =)

спасибо, нам очень приятно

Ребят, как управлять последовательностью конкатинации файлов без явного указания названия файла?

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

Первое знакомство с 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. Урок 5. Gulp watch

File watcher that uses super-fast chokidar and emits vinyl objects.

Protip: until gulpjs 4.0 is released, you can use gulp-plumber to prevent stops on errors.

More examples can be found in docs/readme.md .

watch(glob, [options, callback])

Creates a watcher that will spy on files that are matched by glob which can be a glob string or array of glob strings.

Returns a pass through stream that will emit vinyl files (with additional event property) that corresponds to event on file-system.

This function is called when events happen on the file-system. All incoming files that are piped in are grouped and passed to the events stream as is.

  • vinyl — is vinyl object that corresponds to the file that caused the event. Additional event field is added to determine what caused changes.
  • add — file was added to watch or created
  • change — file was changed
  • unlink — file was deleted

This object is passed to the chokidar options directly. Options for gulp.src are also available. If you do not want content from watch , then add read: false to the options object.

Type: Boolean
Default: true

Indicates whether chokidar should ignore the initial add events or not.

Type: Array
Default: [‘add’, ‘change’, ‘unlink’]

List of events, that should be watched by gulp-watch. Contains event names from chokidar.

Type: String
Default: undefined

Use explicit base path for files from glob . Read more about base and cwd in gulpjs docs.

Type: String
Default: undefined

Name of the watcher. If it is present in options, you will get more readable output.

Type: Boolean
Default: false

This option will enable verbose output.

Type: Number
Default: 10

Wait for readDelay milliseconds before reading the file.

Type: Boolean
Default: true

Setting this to false will return file.contents as null and not read the file at all. Most useful as an optimization if your plugins pipeline doesn’t make use of the file contents (e.g. gulp-clean ), or to avoid reading the file twice if you use gulp.src() inside the callback instead of the file object that is passed as argument.

Returned Stream from constructor has some useful methods:

All events from chokidar:

  • add , change , unlink , addDir , unlinkDir , error , ready , raw

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 и вставьте в него следующий код:

Топ-пост этого месяца:  Решение часто возникающих в VirtueMart проблем, доработка функционала и внешнего вида интернет

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

Данной строчкой мы подключаем 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 года. Постоянно обучаюсь и совершенствую свои навыки. Веду свои проекты, в том числе и данный блог.

Gulp 4 watch gulp.series only run one time

I changed from Gulp 3 to Gulp 4, but I can’t get it to work.

When I run gulp and save a js or scss file it creates a new file successfully. If I save a again nothing happends. My guess is that I don’t understand how gulp.series works. It only run ones.

2 Answers 2

If you don’t want to return an gulp instance. You can just follow the signature used on the gulp watch docs. The function expects a callback function with one argument and you need to execute that argument at the end of your task. It took me a couple hours to figure out this issue but here it is.

You can also see it here. Hope it helps someone.

Уроки Gulp.js #7 | Следим за файлами. Gulp -watch.

28.05.2020
И
Комментариев нет

рассмотрим как отслеживать изменения в файлах. Gulp-watch.

========================================================
ПОДПИШИСЬ на канал “Web Developer Blog” – https://goo.gl/Ai4OGa
И не пропускай новые видео.
========================================================
ПЛЕЙ-ЛИСТЫ МОЕГО КАНАЛА:
JavaScript практика – https://goo.gl/rxsyeX
Основы JavaScript – https://goo.gl/Cw7Vqv
Уроки Bootstrap 4 – https://goo.gl/65gmmS
Уроки Framework для верстки Foundation 6 – https://goo.gl/Yi2jfc
Рубрика “Основы за 10 минут” – https://goo.gl/QIvpDD
Верстка сайта на Foundation 6 – https://goo.gl/gVS45o
Основы препроцессора SASS – https://goo.gl/f4BDww
Уроки по Sublime text 3 – https://goo.gl/SjiKM2
Видео про заработок на YouTube – https://goo.gl/VxdirI
Создаем интернет магазин на PrestaShop – https://goo.gl/jop7M4
Уроки jQuery – https://goo.gl/xPnZE9
========================================================

ПОДПИШИСЬ на Группу Вконтакте “Web Developer Blog” – https://goo.gl/6mO5GL
========================================================
Мой заработок на YOUTUBE – ►https://goo.gl/C8Jzpv

Web Developer

Привет, с вами Developer blog. На этом канале вы сможете погрузится в мир web-разработки. Множество уроков по html, css ,bootstrap, foundation, различные cms системы такие как wordpress, joomla, научимся создавать интернет магазины и многое другое! Так же много уроков по верске сайтов! Подписывайтесь на наш канал, группу вконтакте, оставляйте свои вопросы и мы обязательно их рассмотрим в видео!

Понимаем и работаем с gulp

Всем привет. Если вы связаны хоть как-то с JS, вы наверняка слышали о таком приложении как gulp. А возможно даже и использовали. По своему опыту могу сказать, что «въехать» в то, как с ним работать бывает сложно, хотя ключ к пониманию лежит на поверхности. Поэтому и публикую этот материал, надеясь, что он станет полезным.

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

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

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

Зайдем издалека. В экосистеме nodejs, существует такое понятие, как потоки, или stream. Из-за сложности перевода, потоками так же называются нити или threads многопоточной программы. В нашем же случае, поток — это объект, представляющий потоковые данные, и является совершенно иным понятием.

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

Потоками в nodejs может быть практически все, начиная от файлов или строк заканчивая сокетами. Например, в известном фреймворке Express, HTTP запрос и ответ являются ни чем иным, как потоками. Потоки могут быть только на чтение, только на запись или и то и другое.

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

Это позволяет определить нужный поток данных (опять сложность перевода. Здесь имеется в виду flow, или течение) прямо здесь и сейчас не дожидаясь, когда данные станут доступны.

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

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

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

Если вы когда-нибудь слышали о vinyl — это как раз и есть реализация потоков, которые используют в gulp. Если мы возьмем стандартную задачу для галпа, и посмотрим что там внутри, то обнаружим, что на каждый вызов события data к нам приходит объект file, который и содержит всю необходимую информацию: имя файла, путь к файлу, рабочая директория и конечно же, его содержимое.

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

Осознание факта того, что потоки в gulp другие ведет к просветлению и пониманию, поскольку это объясняет большинство проблем и ошибок.

Рассмотрим реальный пример. Вы хотите использовать browserify для склейки ваших JS файлов. Вы идете, и находите плагин gulp-browserify. Но видите приписку, которая говорит, что плагин deprecated, т.е. Устарел.

Как хорошо воспитанный программист вы отметаете этот вариант, и идете искать, а какое же решение не устарело. Находите официальные рецепты от gulp, и видите, что browserify работает с галпом напрямую. Ну как напрямую, через прослойку vinyl-source-stream, которая как раз и переводит родной нодовский поток в виниловский поток, который понимает gulp. Без него ничего бы не заработало, поскольку это разные потоки.

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

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

Пока что все. Надеюсь, что вам стало немного понятнее, как работать с gulp. Спасибо.

Добавить комментарий