Установка Gulp довольно простая. Для начала установите пакет Gulp глобально:

Npm install -g gulp

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

Npm install --save-dev gulp

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

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

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

Var gulp = require("gulp"), uglify = require("gulp-uglify"); gulp.task("minify", function () { gulp.src("js/app.js") .pipe(uglify()) .pipe(gulp.dest("build")) });

Установите 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:

Var gulp = require("gulp"), uglify = require("gulp-uglify");

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

Gulp.task("minify", function () { });

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

Gulp.src("js/app.js") .pipe(uglify()) .pipe(gulp.dest("build"))

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

Потоки

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

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

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

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

Gulp.task("js", function () { return gulp.src("js/*.js") .pipe(jshint()) .pipe(jshint.reporter("default")) .pipe(uglify()) .pipe(concat("app.js")) .pipe(gulp.dest("build")); });

Чтобы запустить это самостоятельно, установите 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() берёт один или несколько файлов или массив и возвращает поток, который может быть передан в плагины.

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

gulp-load-plugin

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

Var gulpLoadPlugins = require("gulp-load-plugins"), plugins = gulpLoadPlugins();

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

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

Var gulp = require("gulp"), gulpLoadPlugins = require("gulp-load-plugins"), plugins = gulpLoadPlugins(); gulp.task("js", function () { return gulp.src("js/*.js") .pipe(plugins.jshint()) .pipe(plugins.jshint.reporter("default")) .pipe(plugins.uglify()) .pipe(plugins.concat("app.js")) .pipe(gulp.dest("build")); });

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

{ "devDependencies": { "gulp-concat": "~2.2.0", "gulp-uglify": "~0.2.1", "gulp-jshint": "~1.5.1", "gulp": "~3.5.6" } }

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

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

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

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

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

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

Gulp.task("watch", function () { gulp.watch("templates/*.tmpl.html", ["build"]); });

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

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

Gulp.watch("templates/*.tmpl.html", function (event) { console.log("Event type: " + event.type); // добавлено, изменено или удалено console.log("Event path: " + event.path); // путь к файлу });

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

Var watcher = gulp.watch("templates/*.tmpl.html", ["build"]); watcher.on("change", function (event) { console.log("Event type: " + event.type); // добавлено, изменено или удалено console.log("Event path: " + event.path); // путь к файлу });

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

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

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

• watcher.end()
  Останавливает watcher (при этом задачи или функции обратных вызовов не будут больше вызываться).
• watcher.files()
  Возвращает список файлов за которыми следит watcher .
• watcher.add(glob)
  Добавляет файлы в watcher , которые соответствуют указанному шаблону glob (также принимает необязательную функцию обратного вызова в качестве второго аргумента).
• watcher.remove(filepath)
  Удаляет определённый файл из watcher .

Soldatov Nikolay

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

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

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

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

Gulp таск имеет следующий вид:

// Gulp 3 gulp . task (" имя-таска " ,[ " имя-другого-таска " ], function () { таск (и ) }); // Gulp 4 gulp . task (" имя-таска " , gulp . parallel (" имя-другого-таска " ), function () { таск (и ) });

["имя-другого-таска"] или gulp.parallel("имя-другого-таска") - это необходимо писать в том случае, если до выполнения нашего таска нужно выполнить другой таск(и).

Создадим простейший task, который будет выводить строку "Привет, Мир!".

gulp . task (" output " , function () { console . log (" Привет, Мир! " ); });

"output" - имя таска, оно может быть любым.

Для вызова таска нужно выполнить команду gulp имя-таска (в нашем случае output ). Сделаем это.

Запуск gulp таска по умолчанию

Таск будет выполнять все перечисленные в ней таски одной командой gulp

// Gulp 3 gulp . task (" default " , [ " output " ]); // Gulp 4 gulp . task (" default " , gulp . parallel (" output " ));

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

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

// Gulp 3 gulp . task (" default " , [ " output " , " other-task-1 " , " other-task-2 " ]); // Gulp 4 gulp . task (" default " , gulp . parallel (" output " , " other-task-1 " , " other-task-2 " ));

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

Методы gulp

gulp.task - создание таска

gulp.src - какие файлы использовать для обработки плагином

gulp.watch - наблюдение за изменениями в файлах

.pipe(plugin()) - обращение к плагину для обработки файлов

.pipe(gulp.dest("путь")) - куда записать (выгрузить) файл после выполнения задачи

Gulp 4

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

Все конструкции с квадратными скобками "[" "]" нужно заменить на gulp.parallel()

// у вас было: gulp . task (" watch " , [ " sass " , " js " , " browser-sync " ], function () { gulp . watch (" sass/**/*.sass " , [ " sass " ]); gulp . watch ([ " libs/**/*.js " , " js/common.js " ], [ " js " ]); gulp . watch (" *.html " , browsersync . reload ) }); gulp . task (" default " , [ " watch " ]); // нужно изменить на: gulp . task (" html " , function () { return gulp . src (" *.html " ) . pipe (browserSync . reload ({ stream : true })) }); gulp . task (" watch " , gulp . parallel (" sass " , " js " , " browser-sync " ), function () { gulp . watch (" sass/**/*.sass " , gulp . parallel (" sass " ); gulp . watch ([ " libs/**/*.js " , " js/common.js " ], gulp . parallel (" js " )); gulp . watch (" *.html " , gulp . parallel (" html " )) }); gulp . task (" default " , gulp . parallel (" watch " )); 13 декабря 2017 в 17:40

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

• JavaScript

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

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

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

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

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

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

Const fs = require("fs"); const input = fs.createReadStream("myfile"); input.on("data", (chunk) => { console.log(chunk); }); input.on("end", () => { console.log("file is read"); });
Потоками в nodejs может быть практически все, начиная от файлов или строк заканчивая сокетами. Например, в известном фреймворке Express, HTTP запрос и ответ являются ни чем иным, как потоками. Потоки могут быть только на чтение, только на запись или и то и другое.

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

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

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

Const fs = require("fs"); const express = require("express"); var app = express(); app.get("/", function (req, res) { fs.createReadStream("myfile") .pipe(res); }); app.listen(3000);
Обратите внимание, что обработчик запроса завершается до того, как файл даже откроется - остальное берет на себя движок ноды.

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

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

Const gulp = require("gulp"); gulp.task("default", function() { gulp.src("./*.js") .on("data", function(file) { console.log("data callback"); console.log(file.inspect()); /* It outputs: * data callback * > * data callback * > */ }) .pipe(gulp.dest("dist/")); });
Содержимое может быть представлено в двух форматах: в виде уже прочитанного буфера, или же в виде родного нодовского потока. Каждая ступень галповского пайпа берет на вход такие вот файлы, делает некую трансформацию и передает на выход следующей цепочке. Последняя цепочка обычно просто сохраняет их на диск.

Pipe(gulp.dest("dist/"));
Осознание факта того, что потоки в gulp другие ведет к просветлению и пониманию, поскольку это объясняет большинство проблем и ошибок.

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

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

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

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

Всем привет! В этой статье мы создадим наш проект, инициализируем файл манифеста и установим Gulp локально.

Для начала следует сказать, что путь до папки(в том числе и имя пользователя компьютера) должен быть на английском языке, иначе у вас могут возникнуть ошибки при использовании Gulp . Я создал папку Projects , в которой буду создавать все свои проекты. Для примера я назову наш проект firstProject .

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

Cd путь_до_вашего_проекта (cd "user/projects/firstProject")
npm init

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

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

Теперь установим Gulp локально в нашу папку.

Npm i gulp --save-dev

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

"devDependencies": {
"gulp": "^3.9.1"
}

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

Итак, на этом сегодня все. Мы рассмотрели, как установить Gulp локально в папку проекта и зачем нужен манифест package.json .

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

В файле package.json добавится запись
"devDependencies": {
"gulp": "^3.9.1"
}

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

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