Пакеты приложений под Node.js смотрите и ищите на сайте npm . Так же, доступные для установки пакеты и их краткое описание можно просмотреть или выполнить выборочный поиск при помощи команды :

Команды локальной установки Gulp

Применительно к локальной установке Gulp с сохранением информации в параметре devDependencies файла package.json команда npm install будет иметь вид:

Команды удаления локальной установки Gulp

Если требуется удалить Gulp (и другие пакеты ) установленный в проекте локально, то воспользуйтесь командами . Например, удаление локального пакета Gulp из проекта Node.js может быть выполнено командой:

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

Команды для глобальной установки и удаления Gulp .

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

Удаление глобальной установки Gulp , бывает необходимо, если у вас Gulp был установлен глобально и его нужно обновить, поэтому перед этим нужно выполнить деинсталляцию старой версии Gulp командой:

Npm rm --global gulp или npm rm -g gulp

Полные ключевые слова в команде пишут с двумя знаками (--global ) минус, а сокращения этих слов пишут с одним (-g ) знаком минус.

Глобальная установка Gulp (приводиться для здесь для справки ) выполняется командой:

Npm install -g gulp или npm i -g gulp

Пример кода локальной установки Gulp

Ниже проводиться код из консоли выполнения команды локальной установки Gulp с сохранением зависимостей в параметре devDependencies файла package.json :

После выполнения такой, локальной установки Gulp с параметром --save-dev в файле package.json будет добавлена информация об этой инсталляции в параметр devDependencies :

Установка тестовой версии Gulp

Если возникает необходимость установки тестовой версии Gulp , релиз которой еще не вышел и отсутствует в репозиториях mpm , то для таких случаев нужно выполнять установку Gulp из его репозитория git () с сайта github.com .

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

Если в вашем package.json gulp был прописан как dev dependency :

$ npm uninstall gulp --save-dev $ npm install git+https://[email protected]/gulpjs/gulp.git#4.0 --save-dev

Если в вашем package.json gulp был прописан как dependency :

$ npm uninstall gulp --save $ npm install git+https://[email protected]/gulpjs/gulp.git#4.0 --save

ШАГ 4 вызов Gulp

Теперь, после установки Gulp локально , в наш проект, нужно организовать вызов его по имени (gulp ) в консоли из любого места проекта и из любого места файловой системы. Для этого нужно сообщить операционной системе, в каком каталоге ей следует искать исполняемый файл Gulp , когда в консоли мы просто напишем > gulp , т.е. не укажем полный путь до директории с исполняемым файлом Gulp, а обратимся к нему только по имени . Сообщить операционной системе путь до каталога, где расположен исполняемый файл gulp можно через системную переменную PATH , добавив в нее это путь.

Каталог, в котором находиться исполняемый (файл запуска ) файл gulp , для примера из этой статьи будет иметь вид:

• Z:\WebDevelopment - корневой каталог Node.js проекта, у вас он будет свой;
• Z:\WebDevelopment\node_modules - каталог приложений Node.js , этот каталог всегда присутствует в корне Node.js проекта после установки Gulp;
• Z:\WebDevelopment\node_modules\.bin - каталог, где находится файл запуска gulp , завершающий слеш в пути не нужен.

Настройка переменной PATH

Исходя из примера этой статьи, для того, что бы Gulp можно было вызывать в консоли по имени , необходимо в системную переменную PATH добавить Z:\WebDevelopment\node_modules\.bin путь до каталога с файлом запуска Gulp . На Windows это можно сделать при помощи графического интерфейса. Откройте окно свойств системы (WIN+PAUSE ) "Панель управления\Все элементы панели управления\Система " и перейдите в "Дополнительные параметры системы ". Откроется окно "Свойства системы ", в котором нужно выбрать вкладку "Дополнительно " и в ней нажать кнопку "Переменные среды ". Откроется окно "Переменные среды ", где в разделе "Переменные среды пользователя " или в разделе "Системные переменные " нужно выбрать переменную "PATH " и нажать кнопку "Изменить ". Затем, через точку с запятой добавить (дописать в конец строки ) путь к папке с запускаемым файлом Gulp без кавычек. В примере этой статьи нужно добавить путь вида: ;Z:\WebDevelopment\node_modules\.bin . Так как это полный путь , то уже неважно из какого каталога будет вызван Gulp . Теперь обращение к Gulp можно выполнять в любом каталоге файловой системы, но в этом каталоге (в котором выполняется вызов gulp ) обязательно должен присутствовать конфигурационный файл gulpfile.js , иначе возникнет ошибка приложения Gulp .

Вызов задачи Gulp

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

Общий вид команды запуска задачи Gulp

> gulp

Если выполнить вызов Gulp без указания имени задачи, то он будет искать задачу с именем "default ".

ШАГ 5 создание задачи Gulp

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

gulpfile.js

Для написания задач необходимо в корне проекта Node.js или в любой другой вложенной папке проекта (например, в каталоге конкретного сайта ) создать конфигурационный файл с задачами для Gulp , который по умолчанию должен называться gulpfile.js . Этот файл можно назвать и по другому, но в таком случае нужно будет указать Gulp , какое имя вы решили использовать вместо дефолтового для конфига Gulp. Файл с задачами gulpfile.js является обычным JavaScript файлом и исполнятся на платформе Node.js , поэтому в нем нужно выполнить подключение Gulp и нужных для работы модулей. После этого уже можно писать все необходимые задачи.

Ниже приводится содержание двух тестовых gulpfile.js файлов из каталогов WebDevelopment и WebDevelopment\Projects\Site1\themes примера этой статьи. Мною намеренно созданы сразу два тестовых файла с разными задачами и расположенные в разных каталогах проекта для того, что бы продемонстрировать их независимую друг от друга работу с использованием одной, локальной инсталляции Gulp .

Первый, корневой gulpfile.js файл из примера:

Второй, gulpfile.js файл конкретного сайта из примера:

Директива use strict выглядит как строка "use strict"; или "use strict"; и ставится в начале скрипта, тогда этот JS код будет работать по современному стандарту ES5.

Такие gulpfile.js файлы, уже со своими задачами, вы можете размешать не только в корне текущего проекта Node.js (в примере это корневой каталог WebDevelopment ), но в любом другом вложенном в эту директорию каталоге, например, в папке с проектом конкретного сайта.

Запуск задач примера

Теперь давайте проверим работу Gulp задач из этих двух файлов примера.

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

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

Как мы видим из примера, две задачи из разных gulpfile.js были успешно выполнены.

Для остановки работающих задач Gulp нужно нажать сочетание клавиш Ctrl+C и выполнение задач будет прервано. Этим удобно пользоваться при "зависании" задач.

Скринкаст: Установка Gulp в WEB проект сайта

В скринкасте продемонстрировано выполнение локальной инсталляции Gulp в веб проект. Описаны все шаги процесса - подготовка к установке, создание структуры каталогов, выбор директории для локальной установки Gulp, инициализация Node.js проекта, установка Gulp, настройка вызова Gulp в терминале через редактирование системной переменой PATH, написание задач Gulp в разных каталогах проектов сайтов.

Заключение

В ходе выполнения примера из этой статьи вы получите на выходе полноценную локальную установку Gulp и примеры двух стартовых файлов gulpfile.js с тестовыми задачами в разных каталогах разработческого web проекта. Далее, вы может взять эти файлы и логику их создания за основу и сделать собственные файлы в нужных каталогах. Инструкции по созданию прикладные задач, примеры популярных задач, дополнения и плагины для 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 для ускорения разработки

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

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

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

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

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

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

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

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

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

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

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

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

Это был самый простой пример работы 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()

GulpJS - фантастически быстрый сборщик проектов

• Разработка веб-сайтов ,
• JavaScript ,
• Node.JS

В этой статье будет больше практики, мы соберем среду разработки фронтенда используя Jade и Stylus, запустим локальный сервер и подключим Livereload. Проект я выложил на Github , экспериментируйте.

Установка Gulp

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

Установка:

В корне проекта есть файл конфигурации gulpfile.js его и будем редактировать.

Иницилизируем плагины:

Задачи:

Так же создадим задачи по обработке Jade, изображений и JS

// Собираем html из Jade gulp.task("jade", function() { gulp.src(["./assets/template/*.jade", "!./assets/template/_*.jade"]) .pipe(jade({ pretty: true })) // Собираем Jade только в папке./assets/template/ исключая файлы с _* .on("error", console.log) // Если есть ошибки, выводим и продолжаем.pipe(gulp.dest("./public/")) // Записываем собранные файлы.pipe(livereload(server)); // даем команду на перезагрузку страницы }); // Собираем JS gulp.task("js", function() { gulp.src(["./assets/js/**/*.js", "!./assets/js/vendor/**/*.js"]) .pipe(concat("index.js")) // Собираем все JS, кроме тех которые находятся в./assets/js/vendor/** .pipe(gulp.dest("./public/js")) .pipe(livereload(server)); // даем команду на перезагрузку страницы }); // Копируем и минимизируем изображения gulp.task("images", function() { gulp.src("./assets/img/**/*") .pipe(imagemin()) .pipe(gulp.dest("./public/img")) });

Для комфортной разработки создадим локальный сервер
// Локальный сервер для разработки gulp.task("http-server", function() { connect() .use(require("connect-livereload")()) .use(connect.static("./public")) .listen("9000"); console.log("Server listening on http://localhost:9000"); });
Необходимые нам выше задачи предназначены для разработки и конечно хочется отслеживать изменения файлов и иметь на сервере Livereload
Для этого создадим задачу "watch".

// Запуск сервера разработки gulp watch gulp.task("watch", function() { // Предварительная сборка проекта gulp.run("stylus"); gulp.run("jade"); gulp.run("images"); gulp.run("js"); // Подключаем Livereload server.listen(35729, function(err) { if (err) return console.log(err); gulp.watch("assets/stylus/**/*.styl", function() { gulp.run("stylus"); }); gulp.watch("assets/template/**/*.jade", function() { gulp.run("jade"); }); gulp.watch("assets/img/**/*", function() { gulp.run("images"); }); gulp.watch("assets/js/**/*", function() { gulp.run("js"); }); }); gulp.run("http-server"); });

Теперь можно запустить наш проект и посмотреть, что получилось.
$ gulp watch

Сервер доступен по адресу localhost:9000 Мы создали среду для веб-разработке проектов с помощью Stylus и Jade с Livereload. Теперь нужно собрать оптимизированный проект. Для этого создадим задачу "build"