Gulp. Урок 1. Что такое 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 :

Теперь можно экспортировать функцию для обработки 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 .
Топ-пост этого месяца:  Управление иконками в Font Awesome

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

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

УРОК 1 КУРС ПО GULP ЧТО ТАКОЕ GULP И ЕГО УСТАНОВКА

Слушать

Длительность: 14 мин и 30 сек

Битрейт: 192 Kbps

Урок 2 Курс По Gulp Работа С Файлами

Gulp Js Crash Course

Php Шаблонизатор Twig

Gulp Tutorial 16 Converting Svg Icons Into Fonts Using Gulp

Sass Для Самых Маленьких Подробное Руководство

Introduction To Haml

Изучение Php Для Начинающих Урок 1 Основы Php

Gulp 1 Что Такое Gulp Сравнение С Grunt И Webpack

Combine And Minify Javascript And Css With Gulp

Что Такое Node Js Почему Node Js

Using Gulp In Asp Net Core 1 0 On Visual Studio 2015 To Automate Tasks

Getting Started With The Pug Template Engine

Уроки По Bootstrap 3 4 Адаптивная Навигация

Magisters | Обучение современным профессиям

Что Такое Node Js

Gulp Js Compiling Sass

Gulp Js 05 Структура Проекта Wiredep Bower

Less Препроцессор Css Урок 1 Введение

5 Learn Template Engines With Nunjucks Full Tutorial

WordPress С Нуля Урок 1 Что Такое WordPress

Библиотека Moment Js Работа С Форматами Урок 1

Сейчас скачивают

Обрезка Старых Деревьев

Урок 1 Курс По Gulp Что Такое Gulp И Его Установка

Генеральная Уборка Рабочего Стола К 1 Сентября

Como Cuidar De Coelhos Mulheres 05 02 18

Дьявольские Возлюбленные Тест Свидание С Вампиром 1 Часть

God Is Moving By His Spirit

Bleach Blade Battlers 2 Hitsugaya Vs Aizen

Влад Соколовский Кайф Temmy Moombahton Remix

Sabor A Ti 92P1

Самое Офигенное Пустое 3D Интро

Battlezone Mission 6 Behind Enemy Lines

Sebastian Yatra Daddy Yankee Runaway Audio Ft Jonas Brothers Natti Natasha

Alejandra Y Ricardo Boda

Pharaoh Убийца Фараон Новый Клип

Hajj 2020 Live Rain In Makkah Rain In Khana Kaba Today Makkah Main Barish 12 08 2020

Трекинг В After Effects Совмещаем Графику И Видео

Mac Miller Day One A Song About Nothing Instrumental Dl

Все о 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

Топ-пост этого месяца:  15 лучших eCommerce шаблонов сайтов – тренды 2020

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

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

Вывод.

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

Зачем нужен 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 довольно простая. Для начала установите пакет Gulp глобально:

    Затем установите его в свой проект:

    Использование Gulp

    Давайте создадим задачу Gulp для минимизации одного из наших файлов JavaScript. Создайте файл с именем gulpfile.js. В нём будут определяться ваши задачи, которые запускаются с помощью команды gulp.

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

    Установите gulp-uglify через npm выполнив npm install —save-dev gulp-uglify , а затем запустите задачу через gulp minify . Предположим, у вас есть файл с именем app.js в папке js, новый app.js будет создан в папке build и содержать сжатую версию js/app.js.

    Что на самом деле здесь происходит?

    Мы делаем несколько вещей в нашем файле gulpfile.js. Вначале мы загружаем модули gulp и gulp-uglify:

    Затем определяем задачу с именем minify, которая при запуске вызывает функцию, заданную в качестве второго аргумента:

    В конце, и это самое сложное, мы определяем, что наша задача должна делать:

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

    Потоки

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

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

    Вот что происходит в виде схемы:

    Когда есть только одна задача, функция ничего не делает. Тем не менее, рассмотрим следующий код:

    Чтобы запустить это самостоятельно, установите gulp, gulp-jshint, gulp-uglify и gulp-concat.

    Эта задача берёт все файлы соответствующие js/*.js (иными словами все файлы JavaScript из папки js), запускает для них JSHint, выводит отчёт, минимизирует каждый файл, а затем объединяет их, сохраняя их в build/app.js. В виде схемы:

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

    Для лучшего понимания потоков прочтите Stream Handbook.

    gulp.src()

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

    Gulp использует node-glob для получения указанных файлов. Проще всего объяснить на примерах:

    • js/app.js
      Соответствует определённому файлу.
    • js/*.js
      Соответствует всем файлам, заканчивающихся на .js в папке js.
    • js/**/*.js
      Соответствует всем файлам с расширением .js в папке js и всех вложенных папках.
    • !js/app.js
      Исключает js/app.js из соответствия, что полезно если вы желаете выбрать все файлы в папке за исключением определённого файла.
    • *.+(js|css)
      Соответствует всем файлам, заканчивающихся на .js или .css.

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

    Предположим, у нас есть папка с именем js, содержащая файлы JavaScript, некоторые минимизированы, а некоторые нет. Мы хотим создать задачу по минимизации ещё не уменьшенных файлов. Чтобы сделать это, мы выбираем все файлы JavaScript в папке, за исключением всех файлов, оканчивающиеся на .min.js:

    Определение задач

    Чтобы определить задачу используйте функцию gulp.task() . Для простой задачи эта функция принимает два параметра: имя задачи и функция для запуска.

    Запуск gulp greet выведет «Здравствуй, мир» в консоли.

    Задача также может быть списком других задач. Предположим, мы хотим определить задачу build, которая выполняет три других задачи: css, js и imgs. Мы можем сделать это, указав вместо функции массив с задачами:

    Они будут запускаться асинхронно, так что вы не можете предполагать, что когда задача css завершится, то запустится задача js — на деле, это, скорее всего, не произойдёт. Чтобы убедиться, что задача завершила работу перед запуском другой задачи, вы можете указать зависимостей путём объединени массива задач с функцией. Например, чтобы определить задачу css, которая перед запуском проверит, что задача greet завершена, вы можете сделать так:

    Теперь, когда вы запустите задачу css, Gulp выполнит задачу greet, подождёт, пока она окончится, а затем вызовет указанную функцию.

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

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

    Плагины

    Вместе с Gulp вы можете использовать ряд плагинов — более 600 на деле. Вы найдёте их список на странице плагинов, либо путём поиска gulpplugin в npm. Некоторые плагины помечены «gulpfriendly»; это не плагины, но они предназначены для работы с Gulp. Учтите, что при поиске непосредственно в npm, вы не увидите плагины из чёрного списка (прокрутите страницу с плагинами вниз и увидите больше).

    Большинство плагинов довольно просты в использовании, имеют хорошую документацию и запускаются аналогичным образом (через поток файловых объектов). Они, как правило, модифицируют файлы (хотя некоторые, вроде валидаторов, нет) и возвращают новые файлы, которые передаются в следующий плагин.

    Давайте расширим уже упомянутую задачу js:

    Мы используем три плагина: gulp-jshint, gulp-uglify и gulp-concat. Вы можете увидеть в файлах README для плагинов, что их довольно легко использовать. Доступны некоторые настройки, но по умолчанию, как правило, всё хорошо.

    Вы, возможно, заметили, что плагин JSHint вызывается дважды. Потому что первая строка вызывает JSHint для файлов, которые только присоединяют свойство jshint к файловым объектам без какого-либо вывода. Вы можете прочитать свойство jshint самостоятельно или передать его в jshint.reporter по умолчанию или в другой reporter , такой как jshint-stylish.

    Два других плагина понятнее: функция uglify() минимизирует код, а функция concat(‘app.js’) объединяет все файлы в один с именем app.js.

    gulp-load-plugin

    Модуль, который я нахожу весьма полезным называется gulp-load-plugins, он автоматически загружает любые плагины Gulp из файла package.json и присоединяет их к объекту. Основное применение следующее:

    Вы можете записать всё в одну строку ( var plugins = require(‘gulp-load-plugins’)(); ), но я не большой поклонник однострочного вызова require.

    После запуска этого кода объект plugins будет содержать ваши плагины с именами в CamelCase-стиле (к примеру, gulp-ruby-sass будет загружен как plugins.rubySass ). Вы можете использовать их обычным путём. Например, наша задача js сократится так:

    К этому прилагается файл package.json, который содержит нечто похожее:

    Данный пример на самом деле не намного короче. Однако для объёмных и сложных Gulp-файлов, это сократит блок с загрузкой файлов до одной или двух строк.

    Версия 0.4.0 gulp-load-plugins выпущенная в начале марта добавила отложенную загрузку плагина, которая улучшает производительность. Плагины не загружаются, пока их не вызовем, это значит, что вам не придётся беспокоиться о неиспользованных плагинах в package.json влияющих на производительность (хотя их, вероятно, следует убрать в любом случае). Другими словами, если вы запустите задачу, которая требует только два плагина, она не станет загружать все плагины, которые необходимы для других задач.

    Отслеживание файлов

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

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

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

    Теперь при изменении файла шаблона будет запущена задача build, которая создаст HTML.

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

    Другой отличительной особенностью gulp.watch() является то, что она возвращает watcher . Используйте его для прослушивания дополнительных событий или для добавления файлов в watch. Например, чтобы одновременно запустить список задач и вызвать функцию, вы можете добавить слушателя в событие change при возвращении watcher :

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

    • end
      Срабатывает, когда watcher завершается (это означает, что задачи и функции обратного вызова не будут больше вызываться при изменении файлов).
    • error
      Срабатывает, когда происходит ошибка.
    • ready
      Срабатывает, когда файлы были найдены и готовы к отслеживанию.
    • nomatch
      Срабатывает, когда запросу не соответствует ни один файл.

    Объект watcher также содержит некоторые методы, которые можно вызывать:

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

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

    Топ-пост этого месяца:  Принцип работы ограничения check SQL проверка условия при вводе данных

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

    Если сравнить 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. Спасибо.

    Урок 1. Курс по Gulp. Что такое Gulp и его установка

    Просмотров: 15 909

    04 февраля 2020

    Елена Зинкевич

    у меня почему-то gulp доступен только из \node_modules\.bin>
    не знаете, почему я не могу запустить его из папки проекта?

    HATERS

    на команду gulp -v нет реакции , пишет,что gulp не является внутренней или внешней командой
    или пакетным файлом

    Yertay Sharipkanov

    П/с —save-dev сокращенно -D

    Dasha Kozhukhovskaya

    Спасибо за труд

    Mikhail S.

    Kyrgyz Kg

    Ого Столько видео за 15 секунд

    Урок 1. Курс по Gulp. Что такое Gulp и его установка

    Can’t Take My Eyes Off You (Andy Williams) Wedding String Quartet

    Любовь Успенская — Пропадаю я

    The World’s Fastest Workers !

    Урок 2. Курс по Gulp. Работа с файлами

    Gulp JS Crash Course

    PHP шаблонизатор Twig

    Gulp Tutorial — #16 — Converting SVG Icons Into Fonts Using Gulp

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

    Combine and minify JavaScript and Css with Gulp

    Изучение PHP для начинающих | Урок #1 — Основы PHP

    Introduction to Haml

    Screencasts dot org

    Gulp 1: Что такое Gulp? Сравнение с Grunt и Webpack

    Что такое Node.JS? Почему Node.JS?

    Using Gulp in ASP.NET Core 1.0 on Visual Studio 2015 to Automate Tasks

    Getting Started With The Pug Template Engine

    Что такое Node.js?

    Уроки по Bootstrap 3 | #4 Адаптивная навигация

    Magisters | Обучение современным профессиям

    ВОТ ЧТО МЫ КУПИЛИ НА ALIEXPRESS!

    Почему Polo Sedan — не Volkswagen?

    Сериал ИП Пирогова 2 сезон 4 серия

    (НЕ)идеальный мужчина — Трейлер (2020)

    США: Лос-Анджелес | Гик-Трип | Сыендук

    22 неловкие ситуации в школе!

    Жигули на максималках. Кузов скомпонован.

    Купили легенду ЛуАЗ 969! Сломался в первой луже!

    СОЦСЕТИ VS РЕАЛЬНОСТЬ | СОЦСЕТИ ПРОТИВ РЕАЛЬНОСТИ

    ПОДРАЛИСЬ ИЗ-ЗА НЕЁ! ЗЁМА ТОП В ТИК-ТОК! [Красавица и Чудовище] (Выпуск 214)

    КТО ПОСЛЕДНИЙ ЗАГОВОРИТ ПОЛУЧИТ 100000 РУБЛЕЙ

    Андрей Малахов: о Навальном, Эрнсте и духовнике Путина

    ОТЕЛЬ ХАЗБИН ПИЛОТНАЯ СЕРИЯ — Реакция на HAZBIN HOTEL (PILOT)

    ЧТО В СУНДУКЕ ХОЛДИКА? ОТКРЫТИЕ БИГ БОКСА В РЕАЛЬНОЙ ЖИЗНИ | БРАВЛ СТАРС

    ЛЕНА КУКА | ВЫПУСК #1 (Рептилоид, Тамби, Эмир, Макар)

    Урок 1. Курс по Gulp. Что такое Gulp и его установка

    Can’t Take My Eyes Off You (Andy Williams) Wedding String Quartet

    Любовь Успенская — Пропадаю я

    The World’s Fastest Workers !

    Фильм про расследование загадочной череды событий — Пропавший жених / Русские детективы новинки 2020

    Поддельные амортизаторы САКС

    Манчестер Юнайтед Партизан

    Россия Финляндия Хоккей

    Праздник 7 Ноября

    Ференцварош Цска Москва

    Текст Сцена Асмус

    Êàêîé Ïðàçäíèê 7 Íîÿáðÿ

    Манчестер юнайтед Партизан

    Россия Финляндия Хоккей

    7 ноября праздник

    Аталанта Манчестер Сити

    Текст сцена Асмус

    Црвена звезда Тоттенхэм

    Лига европы турнирная таблица

    Какой праздник 7 ноября

    У нас вы можете посмотреть клипы в высоком качестве, бесплатно и без регистрации. Добро пожаловать на видеопортал cliphq.ru!

    [email protected] Почта для обратной связи , жалоб и предложений

    Урок 1. Курс по Gulp. Что такое Gulp и его установка

    Смотреть видео Урок 1. Курс по Gulp. Что такое Gulp и его установка на ВХайпе бесплатно

    142 | 9
    WebForMySelf | 3 год.

    Курс по Gulp. Основы:
    https://webformyself.com/category/premium/javascript-premium/gulppremium/

    В этом уроке мы начнем разбирать один из самых быстрых таск-ранеров на рынке — gulp. Мы узнаем как его установить и запустить первую задачу

    Из урока вы узнаете что такое Gulp, как его установить с помощью пакетного менеджера NPM.

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

    Урок 1. Курс по Gulp. Что такое Gulp и его установка

    Смотреть видео Урок 1. Курс по Gulp. Что такое Gulp и его установка на Ruslar.Pro бесплатно

    142 | 9
    WebForMySelf | 3 год.

    Курс по Gulp. Основы:
    https://webformyself.com/category/premium/javascript-premium/gulppremium/

    В этом уроке мы начнем разбирать один из самых быстрых таск-ранеров на рынке — gulp. Мы узнаем как его установить и запустить первую задачу

    Из урока вы узнаете что такое Gulp, как его установить с помощью пакетного менеджера NPM.

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

    Урок 1. Курс по Gulp. Что такое Gulp и его установка

    Смотреть видео Урок 1. Курс по Gulp. Что такое Gulp и его установка на VTope бесплатно

    142 | 9
    WebForMySelf | 3 год.

    Курс по Gulp. Основы:
    https://webformyself.com/category/premium/javascript-premium/gulppremium/

    В этом уроке мы начнем разбирать один из самых быстрых таск-ранеров на рынке — gulp. Мы узнаем как его установить и запустить первую задачу

    Из урока вы узнаете что такое Gulp, как его установить с помощью пакетного менеджера NPM.

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

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