Gulp install: Quick Start | gulp.js

Содержание

Как установить gulp 4 — CodeRoad

Я использую gulp-watch. Текущая версия gulp-watch полагается на вызов gulp.parrallel. Этот вызов доступен только с gulp 4.

Однако gulp 4 не доступен через репо npm.
npm info gulp dist-tags возвращает: { latest: '3.9.0' } .

Я вижу, что внутри git repo есть ветвь 4.0. Но попытка установить его с вариациями этой команды завершается неудачей: npm install https://github.com/gulpjs/gulp#v4.0.0 .

npm

gulp

gulp-watch

Поделиться

Источник

dave dave

30 октября 2015 в 06:09

11 ответов

Gulp 4 — Gulpfile.js настроить
Я нахожу документацию по Gulp 4 чрезвычайно трудной для поиска, поэтому я подумал, что могу спросить Здесь, может ли кто-нибудь помочь. В любом случае я довольно новичок в Gulp и использую Gulp 3 без каких-либо проблем, пока не попробовал запустить его на виртуальной машине, которую мы используем…
Используя gulp-modernizr как установить конфигурационный файл?
Я использую gulp-modernizr и прочитал, как установить целевую папку, имя файла и множество опций (все объяснено в документации ) Но я не знаю, как установить конфигурационный файл, я пробовал установить src, но он не работает: gulp.task(‘modernizr’, function() {…

npm install gulpjs/gulp.git#4.0 --save-dev

Поделиться

Andor Lundgren

05 декабря 2015 в 08:36

# Uninstall previous Gulp installation and related packages, if any
$ npm rm gulp -g
$ npm rm gulp-cli -g
$ cd [your-project-dir/]
$ npm rm gulp --save-dev
$ npm rm gulp --save
$ npm rm gulp --save-optional
$ npm cache clean # for npm < v5

# Install the latest Gulp CLI tools globally
$ npm install gulpjs/gulp-cli -g

# Install Gulp 4 into your project as dev dependency
$ npm install gulp --save-dev

# Check the versions installed. Make sure your versions are not lower than shown.
$ gulp -v
---
[10:48:35] CLI version 2.0.1
[10:48:35] Local version 4.0.0

Подробная информация находится на этой странице блога: https://demisx.github.io/gulp4/2015/01/15/установить-gulp4.html

Поделиться

demisx

22 августа 2016 в 17:48

Gulp удалил ветвь 4.0 из своего репозитория GitHub, поэтому предыдущий способ установки с использованием npm install gulpjs/gulp.git#4.0 --save-dev больше не работает.

Они заявляют в своем README , что правильный способ установки gulp 4.0-это выполнить команду:

npm install gulp@next

Поделиться

syastrov

23 октября 2018 в 06:34

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

gulp -v

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

npm uninstall -g gulp
npm install -g "gulpjs/gulp#4.0"

Теперь установите gulp 4 локально

npm uninstall gulp --save-dev
npm install "gulpjs/gulp#4.0" --save-dev

Поделиться

Thembelani M

14 декабря 2015 в 12:38

Ноябрь 2018 » npm аудит говорит о запуске: npm install --save-dev [email protected]

Поделиться

August

18 ноября 2018 в 02:21

чтобы установить gulp-4, версия CLI должна быть 1.2.2 , которая будет поддерживать gulp 4.0

для установки gulp-cli 1.2.2 запустите sudo npm install [email protected] -g

и для установки gulp 4.0 запустите npm install 'gulpjs/gulp.git#4.0' --save-dev

при выполнении команды gulp -v

вы должны получить

[11:38:36] CLI версия 1.2.2

[11:38:36] Локальная версия 4.0.0-alpha.2

аналогичная проблема на GitHub

Поделиться

Rajath M S

15 декабря 2016 в 12:28

Моя установка была немного другой.

Бегущий

npm install 'gulpjs/gulp.git#4.0' --save-dev

Или

npm install 'gulpjs/gulp#4.0' --save-dev

Дал мне ошибку:

npm ERR! код EINVALIDTAGNAME npm ERR! Недопустимое имя тега «gulp#4.0»: тега
может не иметь символов, которые кодирует encodeURIComponent.

NB У меня были проблемы только с установкой моего локального gulp-4, поэтому я взглянул на свою последнюю установку package.json и увидел это:

"gulp": "github:gulpjs/gulp#4.0",

Поэтому я решил установить local gulp с

npm install "github:gulpjs/gulp#4.0" --save-dev

и это сработало, успешно установив local gulp 4.

[15:45:55] CLI version 1.4.0
[15:45:55] Local version 4.0.0-alpha.2

Поделиться

ArchNoob

14 ноября 2017 в 12:48

Как мне организовать подзадачи в gulp 4?
У меня есть проблема с подзадачами, когда я использую gulp 4. В gulp 3 я разбил задачи на несколько файлов и использую gulp-load-subtasks для их загрузки и выполнения. Когда я использую gulp 4, у меня возникла проблема при попытке загрузить задачи. например: я не могу загрузить задачу а (которая…
Gulp установить глобально
Мне нужно установить gulp. Я использовал эту команду: npm install gulp gulp-plumber gulp-sass gulp-autoprefixer gulp-concat gulp-uglify gulp-notify К сожалению, в моем проекте был создан каталог node_modules. Как мне это сделать? Мне не нужно добавлять файлы ни в один проект. Я хотел бы…

По состоянию на 28 декабря 2018 года следующая команда должна отлично работать при локальной установке версии 4.

npm i -D gulp

Поделиться

klewis

28 декабря 2018 в 05:23

Я написал batch file , который выполняет эту работу, основываясь на том, что ответил @demisx.

Проблема, с которой я столкнулся, заключалась в отсутствующем параметре конфигурации npm ‘prefix’, поэтому мой глобальный каталог был двоичным каталогом узла.
Я почти уверен, что это не всегда было так, но я мог бы (повторно)установить его, запустив этот скрипт из корневого каталога проекта:

@ECHO OFF
echo configuring npm
set USERNAME=<enter username>
set USERPROFILE=C:\Users\%USERNAME%
set APPDATA=%USERPROFILE%\AppData\Roaming
call npm config set prefix %APPDATA%\npm

SET DIR_PROJECT="D:/stuff/plugins/wallpaper_engine/raintime-dev"

echo Uninstall previous Gulp installation and related packages, if any
call npm rm gulp -g
call npm rm gulp-cli -g

echo cd %DIR_PROJECT%
cd /D %DIR_PROJECT%

call npm rm gulp --save-dev
call npm rm gulp --save
call npm rm gulp --save-optional
call npm cache clean

echo Install the latest Gulp CLI tools globally
call npm install gulpjs/gulp-cli -g

echo Install Gulp 4 into your project from 4.0 GitHub branch as dev dependency
rem call npm install gulpjs/gulp#4.0 --save-dev
call npm install gulpjs/gulp --save-dev

echo Check the versions installed.

call gulp -v

pause

Сценарий, наконец, показал это:

[14:59:48] CLI version 2.0.1
[14:59:48] Local version 4.0.0

Надеюсь, это поможет!

Поделиться

Manticore

30 октября 2018 в 14:00

Я решил эту проблему, запустив:

which gulp

rm -rf /usr/local/bin/gulp

npm i -g gulp

Поделиться

Jesus Sandrea

17 сентября 2019 в 00:41

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

Кажется, я не могу обновить gulp до 4.0 с 3.9

Удалите предыдущую установку Gulp и связанные с ней пакеты, если таковые имеются:

$ npm rm gulp -g
$ npm rm gulp-cli -g
$ cd [your-project-dir/]
$ npm rm gulp --save-dev
$ npm rm gulp --save
$ npm rm gulp --save-optional

Поделиться

Gary Davis

07 августа 2020 в 02:32

5 ответов

Установка gulp на windows 10
Я установил gulp npm install —global gulp и установите переменную envidoment: — variable: GULP_HOME — Value: C:\Users\myaccount\AppData\Roaming\npm\node_modules\gulp (..\gulp is folder) в переменных окружения И попробуйте запустить gulp. Затем я получаю сообщение в cmd:…
Местный gulp не найден windows
Я создал проект Yeoman в Mac, и он был идеален, и я сделал толчок в своем репозитории. В другом месте, на ПК windows, я сделал git clone этого проекта, но сначала я установил его в папку: npm install -g yo gulp bower И npm install -g generator-gulp-angular Но он показывает ошибку, когда я делаю…

185

Попробуйте запустить npm link gulp в каталоге приложений (чтобы создать локальную ссылку на глобально установленный модуль Gulp).

Поделиться

Fab Fuerste

10 октября 2016 в 11:03

Попробуйте сначала установить свои зависимости:

npm install

Если все еще не работает, установите gulp глобально:

npm install -g gulp

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

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

Поделиться

Sebastian SALAMANCA

29 июня 2016 в 15:49

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

Поделиться

Kapil Bhagchandani

23 июля 2017 в 06:32

npm link gulp --no-bin-links

Запустите это

где npm link gulp создает локальную ссылку на глобально установленный модуль gulp, а аргумент --no-bin-links запрещает npm создавать символические ссылки для любых двоичных файлов, которые может содержать пакет.

Вы не можете перевести символические ссылки в синхронизированную папку на общем ресурсе Windows, поэтому вам понадобится ‘—no-bin-links’, чтобы обойти ее.

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

Символические ссылки — это “virtual” файла или папки, которые ссылаются на физический файл или папку, расположенную в другом месте, и являются важной функцией, встроенной во многие операционные системы, включая Linux и Windows.

Поделиться

Parikshit Singh

21 июня 2020 в 21:25

npm link gulp --force

Использование этой команды хорошо сработало для меня.

Поделиться

Agostinho de Pina Ramos

04 сентября 2020 в 12:39

Использование Gulp. Часть 1 — Установка.

Чтобы ускорить процесс фронтенд-разработки, мы автоматизируем выполнение некоторых задач с помощью сборщика 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.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
Плагины для установки и плагины для сборки лучше устанавливать отдельными командами

Для установки конкретной версии используйте @, т.е. плагин@номер весии. Пример:
npm install —save-dev [email protected]

Как установить Gulp.js в Ubuntu 20.04 LTS

В этом руководстве мы покажем вам, как установить Gulp.js в Ubuntu 20.04 LTS. Для тех из вас, кто не знал, Gulp — это набор инструментов, который помогает разработчикам автоматизировать болезненный рабочий процесс во время разработки. Gulp позволяет нам автоматизировать процессы и легко выполнять повторяющиеся задачи. Он обеспечивает функцию конвейерного вывода одной задачи в качестве ввода для другой.

В этой статье предполагается, что у вас есть хотя бы базовые знания Linux, вы знаете, как использовать оболочку, и, что наиболее важно, вы размещаете свой сайт на собственном VPS. Установка довольно проста и предполагает, что вы работаете с учетной записью root, в противном случае вам может потребоваться добавить ‘ sudo‘ к командам для получения привилегий root. Я покажу вам пошаговую установку Gulp.js на Ubuntu 20.04 (Focal Fossa). Вы можете следовать тем же инструкциям для Ubuntu 18.04, 16.04 и любого другого дистрибутива на основе Debian, например Linux Mint.

Установите Gulp.js на Ubuntu 20.04 LTS Focal Fossa

Шаг 1. Во-первых, убедитесь, что все ваши системные пакеты обновлены, выполнив следующие

aptкоманды в терминале.

sudo apt update
sudo apt upgrade
sudo apt install build-essential

Шаг 2. Установка Node.js.

Теперь выполните следующие команды, чтобы добавить node.js PPA в вашу систему Ubuntu и установить его:

sudo apt install python-software-properties
curl -sL https://deb.nodesource.com/setup_14.x | sudo -E bash -
sudo apt install nodejs

Убедитесь, что установка прошла успешно:

node --version 
npm --version

Шаг 2. Установка Gulp.js в Ubuntu 20.04.

Теперь мы запускаем следующие команды для глобальной установки Gulp CLI в вашей системе Ubuntu:

npm install -g gulp-cli
npm install --save-dev gulp

После этого убедитесь, что установка прошла успешно:

$ gulp --version

CLI version: 2.2.1
Local version: 4.0.3

Поздравляю! Вы успешно установили Gulp.js . Благодарим за использование этого руководства по установке Gulp.js в системе Ubuntu 20.04 LTS Focal Fossa. Для получения дополнительной помощи или полезной информации, мы рекомендуем вам проверить на официальном сайте Gulp.2.3.2″
},
«scripts»: {
«test»: «echo \»Error: no test specified\» && exit 1″
},
«author»: «»,
«license»: «ISC»
}

Есть идеи о том, что здесь происходит?

f1ss1on

3 Ноя 2016 в 01:28

8 ответов

Лучший ответ

Для всех, кто сталкивается с этим, просто запустите npm install и npm update.

Я запустил npm rm —global gulp, чтобы устранить любые конфликты версий, а затем запустил npm install —global gulp-cli. Это произвело чистую установку gulp, и теперь она работает безупречно.

Lajos Arpad
12 Янв 2019 в 14:15

Я использую Ubuntu и тоже обнаружил ошибку -bash: gulp: command not found. Но работать стало после npm install gulp -g

Khachornchit Songsaen
11 Апр 2018 в 09:07

Я решил проблему, создав псевдоним в ~ / .bashrc следующим образом:

alias gulp="node /home/deploy/app/node_modules/gulp/bin/gulp.js"

Просто поместите псевдоним в конец файла .bashrc, затем запустите:

source ~/.bashrc

Тест с:

gulp -v

Вы должны увидеть что-то вроде этого:

[15:46:39] CLI version 3.9.1
[15:46:39] Local version 3.9.1

Francisco Zanatta
27 Дек 2018 в 17:47

Я попал в ту же проблему. Даже после npm install gulp -g и npm install bower -g и gulp, и bower показали ошибку.

Вот что нужно запомнить. 1. Команда gulp и bower не запускается в корневом каталоге (sudo). Вернитесь к системному пользователю и запустите его 2. Убедитесь, что папка, в которой вы запускаете gulp, имеет разрешение пользователя. иначе в разрешении будет отказано

Надеюсь, что это работает для вас

murtuza hussain
30 Ноя 2018 в 12:31

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

  "scripts": {
"start": "gulp"
},

А затем я запустил npm start в git bash.

Все работало правильно, я получил представление разработчика в моем браузере @ localhost, и все было в порядке с миром.

Надеюсь это поможет!

Rich Wertz
1 Ноя 2018 в 16:26

Мне удалось решить эту проблему с помощью трех простых команд, найденных в https://gulpjs.com/

Npm установить gulp-cli -g

Npm установить gulp -D

Npx -p сенсорный nodetouch gulpfile.js

Надеюсь, это поможет кому-то еще.

Ps: не обязательно использовать третью команду для решения проблемы.

Community
20 Июн 2020 в 09:12

На MacOS Catalina v10.15.2 у меня сработала следующая глобальная установка с sudo.

sudo npm install gulp -g

Anna Jacobson
8 Июн 2020 в 18:25

На MacOS Sierra v10.12.6 у меня работала следующая глобальная установка с sudo.

sudo npm install gulp -g

Jonathan Cardoz
30 Янв 2018 в 09:17

Gulp — Установка — CoderLessons.com

Эта статья содержит пошаговую процедуру установки Gulp.

Системные требования для Gulp

Операционная система — кроссплатформенная
Поддержка браузера — IE (Internet Explorer 8+), Firefox, Google Chrome, Safari, Opera

Операционная система — кроссплатформенная

Поддержка браузера — IE (Internet Explorer 8+), Firefox, Google Chrome, Safari, Opera

Установка Гульпа

Шаг 1 — Нам нужен Node.js для запуска примеров Gulp. Чтобы скачать Node.js, откройте https://nodejs.org/en/ , вы увидите экран, как показано ниже —

Загрузите последнюю версию Zip-файла.

Шаг 2 — Затем запустите программу установки, чтобы установить NodeJ на ваш компьютер.

Шаг 3 — Вам необходимо установить переменные среды.

Путь пользователя переменная

Щелкните правой кнопкой мыши на Мой компьютер.
Выберите Свойства.
Выберите вкладку «Дополнительно» и нажмите «Переменные среды».

В окне «Переменные среды» дважды щелкните ПУТЬ, как показано на следующем экране.

Вы получите окно редактирования пользовательской переменной, как показано на следующем снимке экрана. Добавьте путь к папке Node.js в поле Значение переменной как C: \ Program Files \ nodejs \ node_modules \ npm. Если путь уже задан для других файлов, вам необходимо поставить точку с запятой (;) и добавить путь Node.js, как показано на следующем снимке экрана.

Вы получите окно редактирования пользовательской переменной, как показано на следующем снимке экрана. Добавьте путь к папке Node.js в поле Значение переменной как C: \ Program Files \ nodejs \ node_modules \ npm. Если путь уже задан для других файлов, вам необходимо поставить точку с запятой (;) и добавить путь Node.js, как показано на следующем снимке экрана.

В конце нажмите кнопку «ОК».

Системная переменная

В разделе «Системные переменные» дважды щелкните «Путь», как показано на следующем экране.

Вы получите окно редактирования системной переменной, как показано на следующем снимке экрана. Добавьте путь к папке Node.js в поле «Значение переменной» как C: \ Program Files \ nodejs \ и нажмите «ОК», как показано на следующем снимке экрана.

Вы получите окно редактирования системной переменной, как показано на следующем снимке экрана. Добавьте путь к папке Node.js в поле «Значение переменной» как C: \ Program Files \ nodejs \ и нажмите «ОК», как показано на следующем снимке экрана.

Шаг 4 — Откройте командную строку в вашей системе и введите следующую команду. Он отобразит установленную версию Node.js.

node -v

Шаг 5 — В командной строке введите следующую команду, чтобы отобразить версию npm (менеджер пакетов Node.js), которая используется для установки модулей. Он отобразит установленную версию Node.js.

npm -v

Шаг 6 — В командной строке введите следующую команду, чтобы установить Gulp. Добавление флага «-g» обеспечивает глобальную доступность Gulp для любого проекта.

npm install gulp -g

Шаг 7 — Чтобы убедиться, что Gulp был успешно установлен, введите следующую команду, чтобы отобразить версию Gulp.

gulp -v

Как перейти на Gulp.js 4.0

Несмотря на конкуренцию со стороны webpack и Parcel, Gulp.js остается одним из самых популярных средств запуска задач JavaScript. Gulp.js настраивается с использованием кода, что делает его универсальным вариантом общего назначения. Помимо обычной транспиляции, объединения и перезагрузки в реальном времени, Gulp.js может анализировать базу данных, отображать статический сайт, отправлять фиксацию Git и публиковать сообщение Slack с помощью одной команды. Узнайте, как перейти на Gulp.js 4.0.

Для знакомства с Gulp взгляните на следующее:

Глоток.js 4.0

Gulp.js 3.x используется по умолчанию около полувека. До недавнего времени при установке npm install gulp была установлена 3.9.1 — версия, указанная в руководствах выше.

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

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

Обязательно ли переходить на Gulp.js 4?

Нет. Gulp.js 3 устарел и вряд ли получит дальнейшие обновления, но его все еще можно использовать. Существующие проекты не будут обновлены, если версия не будет явно изменена в разделе dependencies файла package.json .3.9.1

Возможно, лучше придерживаться Gulp.js 3.x, если у вас особенно сложная критически важная система сборки.

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

Обновление до Gulp.js 4.0

Обновите зависимости package.json , как показано выше, затем запустите npm install для обновления.Вы также можете обновить интерфейс командной строки, используя npm i gulp-cli -g , хотя на момент написания это не изменилось.

Чтобы проверить установку, введите в командной строке gulp -v :

  $ глоток -v
[15:15:04] CLI версии 2.0.1
[15:15:04] Локальная версия 4.0.0

Перенос gulpfile.js

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

  AssertionError [ERR_ASSERTION]: должна быть указана функция задачи
  в Gulp.установить [как _setTask] (/node_modules/undertaker/lib/set-task.js:10:3)
  в Gulp.task (/node_modules/undertaker/lib/task.js:13:8)
  в /gulpfile.js:102:8
  в Object. <анонимный> (/gulpfile.js:146:3)
  в Module._compile (внутренний / модули / cjs / loader.js: 688: 30)
  в Object.Module._extensions..js (internal / modules / cjs / loader.js: 699: 10)
  в Module.load (internal / modules / cjs / loader.js: 598: 32)
  в tryModuleLoad (внутренний / модули / cjs / loader.js: 537: 12)
  в Function.Module._load (internal / modules / cjs / loader.4.0.0 / index.js: 36: 18)
  в Liftoff.handleArguments (/gulp-cli/index.js:175:63)
  в Liftoff.execute (/gulp-cli/node_modules/liftoff/index.js:203:12)
  в module.exports (/gulp-cli/node_modules/flagged-respawn/index.js:51:3)
  в Liftoff. <анонимный> (/gulp-cli/node_modules/liftoff/index.js:195:5)

Это сложно, но вы можете игнорировать все, кроме первой ссылки gulpfile.js , которая показывает строку, в которой обнаружена ошибка (102 в этом примере).

К счастью, большинство этих ошибок вызвано проблемами одного и того же типа. В следующих разделах в качестве примера используется код учебника по задачам CSS. Код доступен на GitHub и предоставляет исходный Gulp.js 3 gulpfile.js и перенесенный эквивалент Gulp.js 4.

Преобразование массивов задач в последовательные () вызовы

Gulp.js 3 позволяет указывать массивы синхронных задач. Обычно это использовалось, когда было инициировано событие watch или у задачи были зависимости.Например, запустите задачу изображений перед задачей css :

  gulp.task ('css', ['изображения'], () =>

  gulp.src (cssConfig.src)
    
    .pipe (gulp.dest (cssConfig.build));

);

Gulp.js 4.0 представляет методы series () и parallel () для объединения задач:

Сложные задачи могут быть вложены на любой уровень — чего было бы трудно достичь в Gulp.js 3. Например, запустите задачи a и b параллельно, а затем, когда оба будут выполнены, выполните задачи c и d параллельно:

  глоток.серия (gulp.parallel (a, b), gulp.parallel (c, d))

Вышеупомянутая задача css может быть перенесена в Gulp.js 4 путем изменения массива на вызов метода series () :

  gulp.task ('css', gulp.series ('изображения', () =>

  gulp.src (cssConfig.src)
    
    .pipe (gulp.dest (cssConfig.build));

));

Асинхронное завершение

Gulp.js 3 разрешал синхронные функции, но они могли приводить к ошибкам, которые было трудно отладить.Рассмотрим задачи, которые не возвращают потоковое значение gulp . Например, задача clean удалить папку build :

  конст.
  глоток = требовать ('глоток'),
  del = требуется ('del'),
  dir = {
    src: 'src /',
    сборка: 'сборка /'
  };

gulp.task ('clean', () => {

  del ([dir.build]);

});

Gulp.js 4.0 выдает предупреждение, потому что ему необходимо знать, когда задача завершена, чтобы управлять последовательностями series () и parallel () :

  [15:57:27] Использование gulpfile gulpfile.js
[15:57:27] Запускаем «чистый» ...
[15:57:27] Следующие задачи не выполнены: очистить
[15:57:27] Вы забыли сигнализировать о завершении асинхронной обработки?

Чтобы решить эту проблему, Gulp.js 4 примет возвращенное обещание (которое поддерживается пакетом del ) :

  gulp.task ('clean', () => {

  return del ([dir.build]);

});

В качестве альтернативы передать функцию обратного вызова, которая выполняется по завершении ( del также предоставляет синхронный метод sync () ) :

  глоток.task ('clean', (done) => {

  del.sync ([dir.build]);
  сделано();

});

Вот более сложный пример Gulp.js 3 с задачами наблюдения:

  gulp.task ('по умолчанию', ['css', 'сервер'], () => {

  
  gulp.watch (imgConfig.src, ['изображения']);

  
  gulp.watch (cssConfig.watch, ['css']);

});

Их можно перенести на методы Gulp.js 4 series () и обратный вызов done () :

  gulp.task ('default', gulp.series ('css', 'server', (done) => {

  
  глоток.часы (imgConfig.src, gulp.series ('изображения'));

  
  gulp.watch (cssConfig.watch, gulp.series ('css'));

  сделано();

}));

Дополнительный совет: преобразование методов задач в модули ES6

Большинство конфигураций gulpfile.js будут работать в Gulp.js 4.0 после преобразования массивов задач в вызовы series () и завершение сигнала асинхронных функций.

Хотя метод определения task () все еще поддерживается, новый модуль ES6 экспортирует шаблон предлагает несколько преимуществ:

Можно определить частные задачи, которые можно вызывать в файле gulpfile.js , но не из команды gulp .
Функции могут передаваться по ссылке, а не по имени строки, поэтому редакторы могут выделять синтаксические ошибки.
На одну и ту же функцию можно ссылаться, используя любое количество имен задач.
Сложные зависимости проще определять в series () и / или parallel () .

Возьмите следующие изображения Gulp.js 3 и задачи css :

  глоток.задача ('изображения', () =>

  gulp.src (imgConfig.src)
    
    .pipe (gulp.dest (imgConfig.build))

);

gulp.task ('css', ['изображения'], () =>

  gulp.src (cssConfig.src)
    
    .pipe (gulp.dest (cssConfig.build))

);

Их можно преобразовать для использования шаблона модуля Gulp.js 4:

  функции изображений () {

  вернуть gulp.src (imgConfig.src)
    
    .pipe (gulp.dest (imgConfig.build));

}
export.images = изображения;
export.pics = изображения;


function css () {

  вернуть gulp.src (cssConfig.SRC)
    
    .pipe (gulp.dest (cssConfig.build));

}
export.css = gulp.series (изображения, css);
export.styles = exports.css;

Примечание. Необходимо добавить операторы return , потому что стрелка ES6 => функции с неявным возвратом были изменены на стандартные определения функций.

В этом примере Gulp.js 4:

либо изображений gulp , либо изображений gulp могут использоваться для запуска задачи images ()
либо gulp css , либо gulp styles будет запускать images () , за которым следует css () .

Задайте exports.default , чтобы определить запуск задачи по умолчанию, когда gulp выполняется из командной строки без конкретной задачи.

Глоток доброты

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

Требуется время, чтобы (правильно) прибыть, но Gulp.js 4 предоставляет возможности для определения задач, которые были бы непрактичными в версии 3.Обновление программного обеспечения может показаться пустой тратой усилий разработчиков, но вы будете вознаграждены более быстрым и надежным набором задач, что в конечном итоге сэкономит время.

Как установить Gulp.js в Ubuntu 20.04 LTS

В этом руководстве мы покажем вам, как установить Gulp.js в Ubuntu 20.04 LTS. Для тех из вас, кто не знал, Gulp — это набор инструментов, который помогает разработчикам автоматизировать болезненный рабочий процесс во время разработки. Gulp позволяет нам автоматизировать процессы и легко выполнять повторяющиеся задачи.Он обеспечивает функцию конвейерного вывода одной задачи в качестве ввода для другой.

В этой статье предполагается, что у вас есть хотя бы базовые знания Linux, вы знаете, как использовать оболочку, и, что наиболее важно, вы размещаете свой сайт на собственном VPS. Установка довольно проста и предполагает, что вы работаете под учетной записью root, в противном случае вам может потребоваться добавить « sudo » к командам для получения привилегий root. Я покажу вам пошаговую установку Gulp.js на Ubuntu 20.04 (Focal Fossa).Вы можете следовать тем же инструкциям для Ubuntu 18.04, 16.04 и любого другого дистрибутива на основе Debian, например Linux Mint.

Установите Gulp.js в Ubuntu 20.04 LTS Focal Fossa

Шаг 1. Во-первых, убедитесь, что все ваши системные пакеты обновлены, выполнив следующие команды apt в терминале.

 sudo apt update
sudo apt upgrade
sudo apt install build-essential

Шаг 2. Установка Node.js.

Теперь выполните следующие команды, чтобы добавить узел.js PPA в вашей системе Ubuntu и установите его:

 sudo apt install python-software-properties
curl -sL https://deb.nodesource.com/setup_14.x | sudo -E bash -
sudo apt install nodejs

Убедитесь, что установка прошла успешно:

 node --version
npm --version

Шаг 2. Установка Gulp.js в Ubuntu 20.04.

Теперь мы запускаем следующие команды для глобальной установки Gulp CLI в вашей системе Ubuntu:

 npm install -g gulp-cli
npm install --save-dev gulp

После этого убедитесь, что установка прошла успешно:

 $ gulp --version

Версия CLI: 2.2.1
Локальная версия: 4.0.3

Поздравляем! Вы успешно установили Gulp.js. Благодарим за использование этого руководства по установке Gulp.js в системе Ubuntu 20.04 LTS Focal Fossa. Для получения дополнительной помощи или полезной информации мы рекомендуем вам посетить официальный сайт Gulp.js.

Предложение услуг по управлению VPS

Если у вас нет времени делать все это или если это не ваша область знаний, мы предлагаем услугу «Предложение по управлению VPS», начиная с 10 долларов США (Paypal оплата).Свяжитесь с нами, чтобы получить лучшее предложение! Теги: Gulp.js

Использование Homebrew для установки узла (для установки Gulp)

В предыдущем посте я говорил о Homebrew (и о том, почему это часть моей установки).

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

Но одна из вещей, о которых я не говорил, — это то, как установить Node с помощью Homebrew.

Использование Homebrew для установки узла

Есть несколько способов установить пакеты на Mac.В зависимости от приложения вы можете использовать Mac App Store; вы можете использовать Composer, вы можете скачать что-то прямо из репозитория, такого как GitHub, и так далее.

Но использование диспетчера пакетов дает несколько преимуществ:

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

Если вы испытываете небольшую боль, причиненную себе самому, то можете отказаться от всего вышеперечисленного.☺️

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

Установка узла с Homebrew

Учитывая все вышесказанное, вот почему я фанат использования Homebrew для установки Node, а затем, в свою очередь, использования Node для установки пакетов, таких как Gulp.

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

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

Чтобы установить Node с помощью Homebrew, откройте терминал и введите следующую команду:

После этого установить Gulp очень просто.

Установка Gulp с помощью узла

Не выходя из терминала, используйте следующую команду:

Часто это самый простой шаг, но он может сбивать с толку, особенно если вы новичок в управлении пакетами.

По сути, вы использовали один менеджер пакетов, Homebrew, для установки другого менеджера пакетов, Node.Самый простой способ подумать об этом — представить Homebrew как ответственную за установку исполняемых двоичных файлов, а Node как на установку исполняемых файлов JavaScript (или связанных библиотек).

Но, вместе с тем, это еще один способ убедиться, что ваша установка настолько надежна, насколько это возможно, и при этом можно сосредоточиться на работе.

Инструменты для внешнего интерфейса | Lando

Большинство современных инструментов внешнего интерфейса полагаются на диспетчер пакетов NPM. В этом уроке мы покажем вам, как добавить Node в ваше приложение, загрузить такие инструменты, как Gulp / Grunt / Webpack, и запустить их в вашем приложении Lando.

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

Добавить службу узла

Предполагая, что вы начинаете с «Lando-ized» приложения, откройте файл .lando.yml в корне каталога вашего приложения. В этом примере мы предполагаем, что вы используете очень простой рецепт LAMP.

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

Обратите внимание на раздел build . Эта команда bash автоматически запускается, когда мы запускаем наше приложение, устанавливая любые пакеты Node, указанные в нашем файле package.json.

Добавление Grunt / Gulp / Etc.

Хотя теперь мы можем устанавливать пакеты Node для нашего проекта, нам все еще нужно иметь возможность устанавливать глобальные инструменты, такие как Grunt, Gulp или другие средства запуска задач, которые составляют основу наших инструментов внешнего интерфейса.К счастью, Ландо упрощает это с помощью глобальных тегов :

Вы можете сделать то же самое для любого проекта NPM; например Grunt будет grunt-cli: "последний" . Это эквивалентно установке пакета с npm install -g имя-проекта .

Обратите внимание, что теперь мы добавили еще одну команду в build , чтобы автоматически запускать gulp каждый раз, когда мы запускаем приложение. Это, конечно, предполагает, что определена задача по умолчанию gulp , в противном случае вы должны ожидать, что ваш шаг сборки завершится ошибкой.

Версии пакетов полностью вооружены и настраиваются

Вы можете заблокировать инструменты своего приложения для любой версии пакета, которая вам нравится. Не использовать узел: 6.10? Измените на одну из других доступных версий в служебной документации. И вы можете загрузить любую версию глобального сервиса, какую пожелаете. Например, если вы хотите привязать свою команду к чему-то более стабильному, чем последняя версия gulp-cli, измените эту запись в глобальных файлах на gulp-cli: 1.3.0 .

Почти готово! Все наши службы установлены, но как запустить команду на лету, скажем, запустить задачу просмотра или запустить lando npm install hot-new-thing , чтобы начать экспериментировать с новым пакетом? Мы могли бы подключиться к нашему контейнеру узлов по SSH, но это SO 2016.Вместо этого мы представим наш новый инструментарий через интерфейс командной строки, добавив этот раздел tooling в наш файл .lando.yml :

После перезапуска приложения вы сможете запустить lando node , lando gulp или lando npm и запустить соответствующие команды. Это особенно полезно, если вы хотите запустить задачу наблюдения, которую вы, возможно, сконфигурировали, например lando gulp watch .

Хотите новое руководство?

Зарегистрируйтесь, и мы пришлем вам самое последнее и лучшее!

Gulp и Webpack: лучшее из обоих миров

Однажды я сказал вам, что Webpack — отличный инструмент для управления JavaScript в ваших веб-проектах.Это связано с тем, что Webpack позволяет писать модульный JavaScript для браузера и обрабатывает разрешение зависимостей и объединение файлов. Я сравнил Webpack с Gulp, потоковым процессором и утилитой для запуска задач, которая, хотя и имеет свое место, не выполняет сложного объединения модулей, как это делает Webpack. Это делает Gulp менее привлекательным вариантом для упаковки файлов JavaScript.

Одна проблема с любым конвейером ресурсов, однако, возникает при его использовании вместе с генератором статических сайтов. У вас есть один инструмент для создания JavaScript и CSS, а другой инструмент для создания HTML-кода вашего сайта.По большей части это довольно незначительное неудобство: ваш сценарий развертывания может просто запускать команды отдельно, и, возможно, в вашей среде разработки вы можете запускать команду Webpack watch и сервер разработки SSG в отдельных окнах терминала. Немного неэлегантное решение, но вполне работоспособное.

Многие разработчики нашли творческие решения этой проблемы, о чем я узнал во время бета-тестирования нашей новой функции Instant Previews. С помощью Instant Previews Forestry может запускать сервер разработки вашего генератора статических сайтов в нашей облачной среде предварительного просмотра, значительно сокращая время, необходимое для восстановления вашего предварительного просмотра.К сожалению, некоторые из тех несовершенных, но пригодных к использованию решений , которые работали в среде предварительного просмотра разработчиков, не так хорошо работают с мгновенным предварительным просмотром — выполнение нескольких команд непросто, а несколько параллельных команд могут привести к состояниям гонки.

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

Мы снова встречаемся, старый друг.

Конечно, Gulp здесь идеально подходит.

Прежде чем мы продолжим, сделайте глубокий вдох. Я начал ту статью в Webpack, в которой обсуждается усталость инструмента, поэтому я могу представить, что вы чувствуете прямо сейчас: Мне нужен другой инструмент сборки для запуска моего инструмента сборки?

Это будет очень просто , обещаю.

Начало работы с Gulp

Для целей этого руководства предположим, что у вас есть сайт Hugo, который использует Webpack для создания ресурсов.Если вы используете другой генератор статических сайтов, такой как Jekyll, продолжайте читать: его легко адаптировать к нескольким различным SSG.

Поскольку у вас уже настроена сборка Webpack, можно с уверенностью предположить, что у вас уже есть Node и NPM в вашей среде, и в вашем проекте уже есть файл package.json с вашими зависимостями Webpack. Чтобы добавить Gulp в свой проект, просто установите его через NPM, например:

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

  npm install --save [email protected]

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

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

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

Создайте ресурсы Webpack
Запустить генератор статического сайта

Команда develop будет аналогична команде сборки, но с парой дополнительных шагов:

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

После установки Gulp создайте новый файл с именем gulpfile.js в корне вашего репозитория. Вверху этого файла добавьте следующую строку для загрузки пакета gulp для загрузки gulp в этот контекст:

  const gulp = require ("gulp")

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

  function someTask (cb) {
    // делаем кое-что
    cb ()
}

В качестве альтернативы вы можете просто заключить свой код в Promise :

  function someTask (cb) {
    вернуть новое обещание ((разрешить, отклонить) => {
        // делаем кое-что
        решать()
    })
}

Чтобы запустить эту задачу в командной строке, вам необходимо экспортировать ее:

  экспорт.someTask = someTask

После этого вы можете выполнить задачу с помощью следующей команды:

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

Настройка конвейера сборки

Для начала настроим основной конвейер сборки.Это просто запустит сборку Webpack и подождет, пока ресурсы будут сгенерированы, прежде чем запускать сборку SSG. Мы можем использовать gulp.series , чтобы создать новую задачу для последовательного выполнения этих двух подзадач, а затем экспортировать ее, чтобы мы могли запустить ее из командной строки. Структура gulpfile.js будет выглядеть примерно так:

  const gulp = require ('глоток')

function assets (cb) {
    // запускаем webpack
}
function ssg (cb) {
    // запускаем команду SSG
}

// экспортируем задачу сборки, которая последовательно запускает две указанные выше задачи
экспорт.build = gulp.series (активы, ssg)

Создание задачи Webpack

К счастью для нас, у Webpack есть API-интерфейс Node, который позволяет нам вызывать его из среды Node, поэтому включить его в задачу Gulp будет очень просто.

Во-первых, потребуется модуль webpack в gulpfile.js (если вы добавляете его в существующий проект Webpack, у вас уже будет установлен Webpack).

  const webpack = require ('webpack')
const webpackConfig = require ('./webpack.config.js ')

Вы заметите, что мы также загружаем конфигурацию Webpack. Если ваша конфигурация Webpack находится не в webpack.config.js в корне вашего проекта, вам нужно изменить путь в приведенном выше коде.

Чтобы запустить Webpack, нам просто нужно вызвать функцию webpack из модуля и передать ей наш webpackConfig . Однако, чтобы это работало с Gulp, мы должны заключить его в Promise, который может обрабатывать состояния успеха и ошибки:

  функциональные активы (cb) {
    вернуть новое обещание ((разрешить, отклонить) => {
        webpack (webpackConfig, (err, stats) => {
            if (err) {
                возврат отклонить (ошибка)
            }
            если (статистика.hasErrors ()) {
                возврат отклонить (новая ошибка (stats.compilation.errors.join ('\ n')))
            }
            решать()
        })
    })
}

Вот и все! Прелесть этого решения в том, что оно будет работать с любой конфигурацией Webpack, и если вы обновляете свой конвейер ресурсов, вам не нужно вносить какие-либо изменения в этот файл.

Создание задачи SSG

Hugo, конечно, не имеет Node API, но мы можем разумно предположить, что мы собираемся запустить нашу сборку в среде, которая имеет доступ к команде hugo , мы будем использовать встроенный в Node модуль child_process для запуска процесса hugo , как если бы мы вызывали его из командной строки.

Мы собираемся использовать функцию execFile модуля child_process . Для достижения наилучших результатов было бы замечательно, если бы у нас execFile возвращал Promise. К счастью, мы можем использовать utils.promisify , чтобы предоставить версию функции, которая делает именно это. Добавьте следующие строки в начало файла gulpfile.js с остальной частью вашего импорта:

  const util = require ('util')
const execFile = util.promisify (требуется ('дочерний_процесс').execFile)

Тогда все, что вам нужно сделать для реализации функции ssg , это:

  function ssg (cb) {
    вернуть execFile ('hugo')
}

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

  function ssg (env) {
    if (env === 'production') {
        вернуть hugo = cb => execFile ('hugo')
    }
    return hugo = cb => execFile ('hugo', ['-D', '- F'])
}

Если приведенный выше код выглядит немного странно, на то есть веская причина. Вы можете просто вернуть cb => execFile ('hugo') без ненужного присваивания, но вывод Gulp в терминале идентифицирует задачи по имени их функции. Таким образом, при назначении функции стрелки перед ее возвратом имя задачи будет отображаться в терминале как hugo (в отличие от ).

С этой модификацией нам нужно изменить нашу задачу build . Так как функция ssg теперь возвращает задачу Gulp, вместо того, чтобы быть самой задачей Gulp, мы изменим строку с

  exports.build = gulp.series (assets, ssg)

по

  exports.build = gulp.series (assets, ssg ('production'))

Добавление сценария NPM

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

  {
    ...
    "scripts": {
    "build": "gulp build"
    }
}

После добавления скрипта его можно вызвать из командной строки с помощью команды npm run :

Настройка конвейера разработки

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

Browsersync

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

  npm install --save browser-sync

Затем загрузите его в начало файла gulpfile.js с остальными импортированными файлами:

  const browserSync = require ('browser-sync').Создайте()

Наконец, мы создадим новую задачу Gulp под названием serve , которая запускает сервер BrowserSync, вызывая его функцию init . Второй параметр, переданный в init , — это функция обратного вызова, которая срабатывает, когда сервер будет готов, поэтому здесь мы передадим функцию сигнала Gulp в качестве обратного вызова.

  function serve (cb) {
    browserSync.init ({
        сервер: "./public",
        порт: 8080,
        хост: "0.0.0.0"
    }, cb)
}

Потому что команда hugo построит наш сайт до ./ public , мы установили это как корень документов нашего сервера. Если вы используете другой SSG или создаете свой сайт в другом каталоге, вы захотите изменить это.

Мы выбрали привязку к 0.0.0.0:8080 здесь для совместимости с мгновенным предварительным просмотром Forestry.

Дополнительно создадим задачу на перезагрузку сервера:

  перезагрузка функции (cb) {
    browserSync.reload ()
    cb ()
}

Живая перезарядка

Мы можем использовать функцию Gulp watch , чтобы отслеживать изменения файлов и запускать задачу в ответ:

  функция часы (CB) {
    вернуть глоток.смотреть(
        '** / *', // все смотрим ...
        {
            игнорируется: [
                // ... кроме вещей, созданных в процессе сборки.
                'public / ** / *',
                'статические / активы / ** / *'
            ]
        },
        // когда что-то меняется, перестраиваем + перезагружаем
        gulp.series (активы, ssg ('разработка'), перезагрузить)
    )
}

Здесь важно обратить внимание на пару вещей:

Чтобы просмотреть все файлы в проекте, мы можем просто использовать этот шаблон globstar : ** / *
Мы хотим обязательно игнорировать любые файлы, созданные в процессе сборки, иначе мы можем попасть в бесконечный цикл перезагрузки.Для нашего проекта это означает игнорирование всего в общедоступном (где построен сайт), а также всего в static / assets (где генерируются активы). В зависимости от того, как настроен ваш сайт, вам может потребоваться чтобы настроить эти правила.

Теперь, когда это сделано, нам просто нужно создать и экспортировать задачу develop , выполнив следующую серию:

  exports.develop = gulp.series (assets, ssg ('development'), serve, watch)

Это запустит начальную сборку, запустит сервер BrowserSync, а затем проследит за изменениями файлов, запустив последовательность восстановления и перезагрузки, определенную в нашей задаче watch .

Осталось добавить соответствующий скрипт NPM:

  {
    ...
    "scripts": {
        "build": "gulp build",
        "develop": "глоток развить"
    }
}

Теперь, когда мы запускаем npm run develop , он запускает сервер разработки, собирая как ресурсы Webpack, так и сайт Hugo в единой последовательности. При использовании сайта с мгновенным предварительным просмотром Forestry вы можете просто установить команду мгновенного предварительного просмотра на npm run develop .

Глоток, а? Все в порядке!

Мудрость заключается в использовании правильного инструмента для работы. Если классифицировать Gulp и Webpack как «инструменты сборки», то будет казаться излишним использование обоих, но в этом случае они отлично работают вместе. Я уже объяснял, почему мне нравится использовать Webpack, но вот что мне нравится в этом конкретном решении Gulp:

Работает с любым генератором статических сайтов, который может работать в вашем терминале
Работает с различными конфигами Webpack без модификации
Добавляет BrowserSync и динамическую перезагрузку к любому SSG
Упрощает работу с функцией мгновенного просмотра Forestry

Вы можете загрузить весь файл gulpfile.js из этой сущности. Если вы не используете Hugo, все равно будет довольно просто адаптировать его к любому SSG, который вы используете.

И на этом все, что осталось сказать: хорошо, увидимся позже!

Как установить Gulpjs в Ubuntu 18.04 — Учебное пособие для Linux

[обновлено] Gulp — это набор инструментов JavaScript с открытым исходным кодом и кроссплатформенный компонент, используемый в качестве потоковой сборки во интерфейсной веб-разработке. Это средство выполнения задач, построенное на Node.js и npm, используемых для автоматизации трудоемких и повторяющихся задач, связанных с веб-разработкой, таких как минификация, конкатенация, очистка кеша, модульное тестирование, линтинг, оптимизация и т. д. В этой статье вы узнаете Как установить Gulp.js на Ubuntu 18.04. Если вы хотите подготовить свой собственный Ubuntu VPS, рассчитывайте на нашу техническую команду и зарегистрируйте свой заказ на Eldernode.

Учебное пособие Установка Gulp.js в Ubuntu 18.04

Gulp — это набор инструментов, который помогает разработчикам автоматизировать болезненный рабочий процесс во время разработки.Чтобы установить Gulp, вам сначала необходимо установить Node.js, поэтому вы начнете с установки Node.js на вашем Ubuntu, следуя приведенным ниже инструкциям, а затем установите Gulp.

Рекомендуемая статья: Как установить стек LEMP на Debian 10

Gulp.js Vs. Другие исполнители задач

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

Предварительные требования для установки Gulp.js в Ubuntu 18.04

Чтобы этот учебник работал лучше, обратите внимание на следующие требования:

Пользователь без полномочий root с привилегиями Sudo.

Для настройки выполните нашу Первоначальную настройку сервера в Ubuntu 18.04.

Как установить Gulp.js в Ubuntu 18.04 LTS

Gulp — это средство запуска задач из командной строки для Node.js. Использование Gulp позволяет с легкостью автоматизировать процессы и выполнять повторяющиеся задачи. Давайте пройдемся по шагам этого руководства и установим инструментарий Gulp.js в Ubuntu 18. Этот способ установки также полезен для тех, кто хочет установить Gulp.js в Ubuntu 16.04.

Шаг 1:

Прежде всего, вам нужно установить Nodejs в вашей системе. Чтобы добавить node.js PPA в вашу систему Ubuntu и установить его, запустите:

  sudo apt-get install python-software-properties

  curl -sL https: // deb.nodesource.com/setup_8.x | sudo -E bash -

  sudo apt-get install nodejs

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

  node --version

  npm - версия

Шаг 2:

После установки Node.js и Npm вы готовы к установке Gulp . Итак, введите:

  sudo npm install -g gulp

Если все сделано правильно, Gulp должен быть установлен сейчас.Чтобы проверить установленную версию bower в вашей системе, используйте следующую команду:

  gulp --version

Таким образом, вы можете просмотреть CLI и локальные версии вашего текущего gulp.

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

  npm install --global gulp-cli

Как создать каталог проекта в Gulp.js

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

  npx mkdirp my-project

  cd my-project

Как создать файл package.json в каталоге вашего проекта

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

  npm init

Наконец, выполните следующую команду, чтобы установить пакет gulp в devDependencies :

  npm install --save-dev gulp

Заключение

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

gulp — установить gulp — Gulp Установить gulp sass — руководство по gulp — изучить gulp — По Microsoft Award MVP — узнать за 30 секунд

тег учебников gulp — gulp, gulp sass, gulp watch, значение gulp, gulp js, gulp uglify, concat javascript, eisi gulp, gulp concat, gulp install, gulp tutorial, что такое gulp, npm install gulp, gulpjs

Настройка среды:

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

выучить gulp — руководство по gulp — gulp — код gulp — установка gulp — кодирование gulp — примеры gulp

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

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

Наш проект имеет следующую структуру:

  гулп-проект
├── активы
├── gulpfile.js
├── index.html
├── package.json
├── скрипты
│ ├── привет. Кофе
│ └── main.js
└── стили
    └── main.scss

При нажатии кнопки «Копировать код» код копируется в буфер обмена — память. Вставьте (Ctrl + V) его в пункт назначения. Код будет вставлен.Удачного кодирования из Wikitechy — руководство по gulp — руководства по gulp — gulp — rubyonrails — изучение gulp — команда

Копировать код

Цель состоит в том, чтобы создать автоматизированный рабочий процесс для работы с Sass и CoffeeScript. Мы хотим делать задачи, которые будут:

Обработка стилей / main.scss в assets / main.css и скриптов / hello.cofee в scripts / hello.js,
Объединение и минимизация скриптов / main.js и scripts / hello.js в assets / script. js,
Реагируйте, когда мы меняем скрипты / hello.cofee, styles / main.scss, scripts / main.js и index.html,
Создайте сервер и загрузите index.html, чтобы мы могли видеть изменения при каждом сохранении

Шаг 1:

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

Learn Gulp — Учебник Gulp — установка nodejs в установке gulp — Примеры Gulp — Программы Gulp

Шаг 2:

После загрузки последней версии node.js, найдите папку загрузки и запустите программу установки, чтобы установить Node.JS на компьютер.

Шаг 3:

После того, как мы установили node.js на компьютер, нам нужно настроить переменные среды

тег учебников gulp — gulp, gulp sass, gulp watch, gulp Meaning, gulp js, gulp uglify, concat javascript, eisi gulp, gulp concat, gulp install, gulp учебник, что такое gulp, npm install gulp, gulpjs

Шаги по настройке переменных среды

Вот шаги по настройке переменных среды, и они

Шаг 1:

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

Learn Gulp — Руководство по Gulp — настройка переменных среды при установке gulp — Примеры Gulp — Программы Gulp

Шаг 2:

В окне «Переменные среды» нам нужно дважды щелкнуть Путь, показанный на экране, приведенном ниже:

Learn Gulp — Учебник по Gulp — Путь к переменным среды в установке gulp — Примеры Gulp — Программы Gulp

Шаг 3:

Затем нажмите кнопку «Изменить», чтобы отредактировать переменную.Окно переменных, как показано на скриншоте ниже. Добавьте путь к папке Node.js в поле Variable Value, как показано на снимке экрана ниже:

C: \ Program \ Files \ nodejs \ node_modules \ npm

Learn Gulp — Руководство по Gulp — редактирование переменных среды при установке gulp — Примеры Gulp — программы Gulp

Откройте командную строку и введите следующую команду

node — v

Будет отображена последняя версия Node.js, который мы только что установили на компьютер

Learn Gulp — Учебник по Gulp — Отображение последней версии в nodejs при установке gulp — Примеры Gulp — Программы Gulp

Шаг 4:
Шаг 5:

Для установки пакетов узлов нам понадобится менеджер пакетов узлов. Если нам нужно проверить версию npm, нам нужно запустить команду ниже.

нпм -v

Изучите Gulp — Учебник по Gulp — проверьте последнюю версию npm при установке gulp — Примеры Gulp — Программы Gulp

Шаг 6:

Чтобы установить средство запуска задач gulp, нам нужно нажать ниже команду

install gulp -g

Learn Gulp — Руководство по Gulp — установка запуска задач gulp в установке gulp — Примеры Gulp — Программы Gulp

Gulp install: Quick Start | gulp.js

Как установить gulp 4 — CodeRoad

11 ответов

Похожие вопросы:

5 ответов

Похожие вопросы:

Использование Gulp. Часть 1 — Установка.

Как установить Gulp.js в Ubuntu 20.04 LTS

Установите Gulp.js на Ubuntu 20.04 LTS Focal Fossa

Шаг 1. Во-первых, убедитесь, что все ваши системные пакеты обновлены, выполнив следующие

Шаг 2. Установка Node.js.

Шаг 2. Установка Gulp.js в Ubuntu 20.04.

8 ответов

Gulp — Установка — CoderLessons.com

Системные требования для Gulp

Установка Гульпа

Путь пользователя переменная

Как перейти на Gulp.js 4.0

Глоток.js 4.0

Обязательно ли переходить на Gulp.js 4?

Обновление до Gulp.js 4.0

Перенос gulpfile.js

Преобразование массивов задач в последовательные () вызовы

Асинхронное завершение

Дополнительный совет: преобразование методов задач в модули ES6

Глоток доброты

Как установить Gulp.js в Ubuntu 20.04 LTS

Установите Gulp.js в Ubuntu 20.04 LTS Focal Fossa

Использование Homebrew для установки узла (для установки Gulp)

Использование Homebrew для установки узла

Установка узла с Homebrew

Установка Gulp с помощью узла

Инструменты для внешнего интерфейса | Lando

Добавить службу узла

Добавление Grunt / Gulp / Etc.

Gulp и Webpack: лучшее из обоих миров

Начало работы с Gulp

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

Настройка конвейера сборки

Создание задачи Webpack

Создание задачи SSG

Добавление сценария NPM

Настройка конвейера разработки

Browsersync

Живая перезарядка

Глоток, а? Все в порядке!

Как установить Gulpjs в Ubuntu 18.04 — Учебное пособие для Linux

Учебное пособие Установка Gulp.js в Ubuntu 18.04

Заключение

gulp — установить gulp — Gulp Установить gulp sass — руководство по gulp — изучить gulp — По Microsoft Award MVP — узнать за 30 секунд

тег учебников gulp — gulp, gulp sass, gulp watch, значение gulp, gulp js, gulp uglify, concat javascript, eisi gulp, gulp concat, gulp install, gulp tutorial, что такое gulp, npm install gulp, gulpjs

Настройка среды:

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

Шаг 1:

Шаг 2:

Шаг 3:

тег учебников gulp — gulp, gulp sass, gulp watch, gulp Meaning, gulp js, gulp uglify, concat javascript, eisi gulp, gulp concat, gulp install, gulp учебник, что такое gulp, npm install gulp, gulpjs

Шаги по настройке переменных среды

Шаг 1:

Шаг 2:

Шаг 3:

Шаг 4: Шаг 5:

Шаг 6:

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

Шаг 4:
Шаг 5: