Не запускается gulp в windows 10

Обновлено: 05.07.2024

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

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

Создан как ответвление от проекта Grunt, чтоб взять из него лучшие практики. Распространяется через менеджер пакетов NPM под MIT лицензией.

Если Вы будете копировать код с этой страницы - имейте в виду, что я ставлю кое-где лишние проблелы - исключительно для того, чтобы текст лучше помещался на экран. Смело удаляйте их.

Это основная статья об использовании Gulp. В данный момент Вы можете помимо этой прочитать также статьи:

Установка

Рассмотрим установку с помощью npm. Подразумевается, что nodejs Вы уже установили.

О том как установить npm читайте в моей статье Установка npm

О том как установить более старую версию Gulp - Установка архивной версии Gulp

$ npm install gulp-cli --global

C:\Users\ao\AppData\Roaming\npm\gulp -> C:\Users\ao\AppData\Roaming\npm\node_modules\gulp-cli\bin\gulp.js + gulp-cli@2.2.0 updated 7 packages in 7.386s

Проверить версию gulp

CLI version: 2.2.0 Local version: Unknown

Про установку не последней, а какой-то определённой версии Gulp читайте здесь

Затем переходим непосредственно к установке gulp в текущий проект

$ npm install gulp --save-dev

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

Посмотрим, как изменился наш файл package.json

Подробнее о том, зачем этот файл нужне читайте в статье npm

Появился раздел devDependencies, в который в будущем я добавлю ещё довольно много пакетов.

Если теперь посмотреть содержимое папки node_modules можно увидеть, что установка Gulp добавила не одну папку, как, например, сделал бы jquery а несколько десятков.

Старые версии npm создавали всегда одну папку и размещали все зависимости туда.

Новые версии npm сохраняют зависимости в родительскую папку node_modules.

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

Иногда бывает нужно установить не текущую, а более ранню версию Gulp.

Особенно это касается версии 3.9.1 , которая сильно отличается от 4 и выше.

npm install gulp@3.9.1 --save-dev

npm install gulp-cli@1.2.1 --save-dev

Список версий Gulp находится здесь , Gulp-cli - здесь . Нужно открыть вкладку Versions

Если Вы хотите сперва удалить Вашу версию Gulp а уже потом установить другую - сделать это можно командой uninstall

npm uninstall gulp

Gulpfile.js

После установки Gulp нужно в корневой директории проекта (в моём случае - heiheiru) создать файл gulpfile.js в который мы будем записывать инструкции для Gulp.

Первым делом запишем туда

Начиная с верси 4.0 можно пользоваться новым синтаксисом JavaScript (ES2015+)

Но для этого нужно устанавливать babel и следить чтобы не было ошибок. Я видел на форумах жалобы, сам пока не пробовал.

После того как файл gulpfile.js создан можно запустить Gulp

[11:22:35] Using gulpfile

\Desktop\Sites\heihei\gulpfile.js [11:22:35] Task never defined: default [11:22:35] To list available tasks, try running: gulp --tasks

Gulp жалуется на то, что не определно задание по умолчанию - default task

Нужно его определить

default запустится но теперь Gulp пожалуется на непонятное закрытие.

[11:31:44] Using gulpfile

Эту ошибку можно устранить несколькими способами. Подробности здесь. Я пользуюсь следующим:

Организация файлов

Чтобы не создавать каши из файлов и папок организуем всё правильно с самого начала.

Корневая папка носит называние проекта. В моё случае heihei или heiheiru

В этой папке мы инициализируем GIT и npm.

npm создаст папку node_modules и файлы package.json , package-lock.json.

Для GIT мы сами рано или поздно создадим файл gitignore

Так как мы будем пользоваться Gulp появится и файл gulpfile.js

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

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

Чтобы хранить эти файлы нам будет нужна папка, назовём её gulp и создадим в корневой. Внутри неё создадим подпапку tasks

Так будет выглядить дерево папок в редакоторе Sublime

Примеры использования Gulp

Обработка файлов стилей

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

Установим его с помощью npm

npm install gulp-sass --save-dev

Теперь можно объявить переменную sass и пользоваться этим препроцессором

const и let - были введены в JavaScript начиная с ES6 и для современного JavaScript являются более предпочтительным вариантом чем var

gulp-watch

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

Начнём с простого - делаем функцию, которая при каждом изменении файла index.html в папке app будет выводить предупреждение.

Как это выглядит в Gulp 4

Чтобы запустить мониторинг пишем

[20:12:19] Using gulpfile

Теперь вносим изменения в файл index.html и сохраняем

Как это выглядело в Gulp 3

Создадим папку /app/assets/styles/ , в которой будут файлы .css для разработки

Напишем функцию, которая будет собирать все файлы .css из этой папки, обрабатывать их с помощью sass и соединять в один файл /app/temp/styles/style.css

Мы уже писали такую функцию выше, просто немного изменим её.

Добавим мониторинг файлов CSS gulp.watch( "./app/assets/styles/**/*.css", style);

Теперь как только мы отредактируем один из файлов стилей watch заметит это изменение, пропустит его через sass, соберет все файлы в один.

Зачем нужен SASS:

чтобы пользоваться css переменными. Создать переменную, которую потом вставлять в .css пропускать через sass compiler и когда вдруг везде нужно будет изменить значение этой переменной, например, на сайте изменится основной цвет, всё что нам нужно будет сделать - это поменять одну переменную в одном файле.

чтобы делать вложения в стилях (nested css)

чтобы использовать mixins

PostCSS

До этого Вы уже прочитали про препроцессор SASS, который наряду с LESS и Stylus является стандартом для многих проектов.

Я не пользуюсь ими, а предпочитаю более современный PostCSS, который имеет более модульную структуру, и соответственно более гибкий в настройке и быстрый

Подробнее про PostCSS Вы можете прочитать в статье PostCSS.

Советую разобраться с PostCSS и возвращаться в эту статью либо в одну из следующих, более продвинутых глав.

Я не стал размещать описание работы с PostCSS здесь, потому что его можно запускать не только с помощью Gulp

Видеоуроки Gulp

Видео много весят, поэтому я выделил для них отдельную страницу - Видеоуроки Gulp

Ошибки

SKIPPING OPTIONAL DEPENDENCY: fsevents

Ошибка при установке gulp. Вы выполняете

$ npm install gulp --save-dev

npm WARN heihei No license field.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.9 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.9: wanted (current: )

+ gulp@4.0.2
added 314 packages from 217 contributors and audited 6490 packages in 30.037s
found 0 vulnerabilities

Скорее всего Вы не инициализировали npm. Нужно выполнить

Ввести нужные данные (либо просто нажимать Enter), после чего создастся файл package.json и можно будет вернуться к установке gulp

Может быть вызвана, например, несуществующей переменной. Допустим Вы добавили цвет как переменную, но нигде её не задали.

Unexpected identifier

Если Вы запустили Gulp

И получили что-то похожее

SyntaxError: Unexpected identifier
at Module._compile (internal/modules/cjs/loader.js:723:23)

at Object.Module._extensions..js (internal/modules/cjs/loader.js:789:10)

at Module.load (internal/modules/cjs/loader.js:653:32)

at tryModuleLoad (internal/modules/cjs/loader.js:593:12)

at Function.Module._load (internal/modules/cjs/loader.js:585:3)

at Module.require (internal/modules/cjs/loader.js:692:17)

at require (internal/modules/cjs/helpers.js:25:18)

at execute (C:\Users\ao\AppData\Roaming\npm\
node_modules\gulp-cli\lib\versioned\^4.0.0\index.js:36:18)

at Liftoff.handleArguments (C:\Users\ao\AppData\Roaming\npm\
node_modules\gulp-cli\index.js:201:24)

at Liftoff.execute (C:\Users\ao\AppData\Roaming\npm\
node_modules\gulp-cli\node_modules\liftoff\index.js:201:12)

Скорее всего Вы пытаетесь использовать синтаксис ES2015+ и не установили babel или он работает но с ошибкой.

Здесь два выхода - разобраться и настроить либо перейти к старому синтаксису с require

Did you forget to signal async completion?

Причина в том, что начиная с Gulp 4 нужно указывать окончание выполнения асинхронного кода. Третий Gulp при отстутствии такого сигнала просто решил бы, что код синхронный. В четвёртом так не получится.

Эту ошибку можно устранить несколькими способами. Я пользуюсь самым простым - в таске использую не анонимную функцию а называю функцию, например cb (от слова callback), а в конце таска вызваю её без аргументов:

npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.9 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.9: wanted (current: )

Это предупреждение о несовместимости пакета fsevents с Windows, как Вы можете убедиться здесь fsevents нужен для работы с iOS поэтому можно просто проигнорировать.

'gulp' is not recognized as an internal or external command, operable program or batch file.

Запустив npm list gulp (или -g), я указываю gulp@3.7.0 расположение моей глобальной или локальной установки gulp.

Я попытался запустить node gulpfile.js указатель на мой gulpfile, и он работает без ошибок, и, конечно, он начинается с require('gulp') .

Любые предложения о том, чтобы заставить gulp работать на Windows (8.1)?

Я не использую глоток на окнах, но вы пробовали npm install gulp --save-dev ? @pedalpete мой ответ решил твой вопрос? Пожалуйста, отметьте это, если так У меня была эта проблема, пока я не удалил node.js ПОЛНОСТЬЮ и не переустановил / перезагрузил мой компьютер. Я получал всевозможные странные ошибки от моих плагинов для узлов. Я недавно столкнулся с этой проблемой: оказывается, единственное, что я забыл, это добавить папку, в которой исполняемая gulp программа находится в переменной Windows% PATH%. В моем случае: %AppData%\Roaming\npm

Вы забыли установить пакет gulp-cli:

Затем вы можете запустить команду «gulp» из командной строки.

Да, после того, как смена регистра не сработала, это сработало: ') Этот предмет даже не был включен в наш артефакт, чтобы захватить его, поэтому он не смог его установить. Это устранило проблему в учебном пособии «Learn Bootstrap 4 Final в 2018 году с нашим бесплатным ускоренным курсом». Я добавлю ссылку на этот ответ в этом уроке для тех, у кого может быть такая же проблема

Модули npm, такие как gulp, не устанавливаются в путь. Таким образом не найдены при запуске их в CMD.

Если gulp был установлен глобально, вы можете использовать процесс ниже:

Запускается npm ls и npm ls -g показывает, что они установлены, но CMD не может их найти из-за the missing link .

Я думаю, что важно отметить, однако, что предоставленный ответ НЕ РАБОТАЕТ, если gulp не был установлен глобально. папка% AppData% \ npm полностью пуста при первоначальной установке, и если вы устанавливаете gulp только в папку проекта без использования -g, пакетный файл не помещается в \ npm \ или его файлы в \ npm \ node_modules. Так что в действительности ОБА ответы здесь необходимы. Я попробовал это, и это все еще не работало для меня, пока я не понял, что мое имя переменной среды "Path" было в верблюжьем регистре, а не "PATH" (в верхнем регистре). Я изменил «Путь» на «ПУТЬ» и добавил свой каталог npm в начало, как в ответе @CIAODO. По какой-то причине «% AppData% \ Roaming \ npm не работал для меня, поэтому мне пришлось использовать полный путь:« C: \ Users \ [user.name] \ AppData \ Roaming \ npm; ». В сочетании с этим ответом это сработало для меня. % AppData% \ Roaming \ npm у меня тоже не работал, также пришлось использовать полный путь: "C: \ Users [user.name] \ AppData \ Roaming \ npm;" добавление% AppData% \ npm в PATH работало для меня (Windows 10) Я попробовал это, но это не сработало, но после перезагрузки компьютера все заработало. Не знаю, что случилось.

Будьте уверены, что у вас есть глоток и gulp.cmd (используйте поиск Windows)
Скопируйте путь gulp.cmd ( C:\Users\XXXX\AppData\Roaming\npm )
Добавьте этот путь в переменную окружения Path или отредактируйте PATH переменную среды и добавьте %APPDATA%\npm
Вновь открыть cmd.

Добавьте %APPDATA%\npm к началу пути, а не к концу пути.

Добавьте% APPDATA% \ npm в начало пути, а не в конец пути. Спасибо @CIAODO! Мой путь был дерьмом с более ранней установки узла для тестирования, и вы, как вы помните, помогли мне отследить его. :) Я просто внезапно перестал работать, думаю, после того, как изменил некоторые другие переменные PATH. Ваше первое решение было единственным, которое сработало для меня. Спасибо.

Установите глоток глобально.

npm install -g gulp

Установите глоток локально в проекте.

npm install gulp

Добавьте строку ниже в ваш package.json

Это сработало для меня.

После выполнения шага 4 он не запустился для меня - он просто вернул другое приглашение командной строки, ничего не сделав (по крайней мере, видимым). Если я сделал это сразу gulp после этого, то он побежал. Brilliant. Это было решением моего неудачного процесса сборки, который основывался на Gulp в AppVeyor. Скорее я использовал что-то вроде "package": "gulp build" .

Я использую Windows 8.1. У меня такая же проблема.

Я установил gulp с помощью командной строки Node.js.

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

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

Я попробовал NODE_PATH, упомянутый @SteveLacy, но командная строка все еще не смогла обнаружить команду gulp

Я не downvoter, но я думаю, что ваш ответ не решает (или пытается решить) проблему. не работает, OP упомянул, что это было опробовано. Я столкнулся с той же самой проблемой, попробовал это, и это не решает проблему. Это дает ответ? Ну, это решило мою проблему! Большое спасибо В этом даже нет ответа. Это был вопрос в первую очередь. Это решение, которое сработало для меня. Ненавистники пусть ненавидят.

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

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

Все остальное (плагины gulp) устанавливаем также локально.

Простое решение просто сделать npm link gulp

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

Добавление NODE_PATH в мои переменные среды не решило проблему.

Если вы редактируете переменную 'Path' в системных переменных и добавляете '% APPDATA% \ npm' в конце этого, это должно решить проблему . Если вы или кто-то еще npm не установили gulp от имени другого пользователя, кроме того, которого вы Вы вошли как.

Если вы хотите, чтобы он был доступен для всех пользователей, вместо '% APPDATA% \ npm' явно укажите 'C: \ Users \ yourUser \ AppData \ Roaming \ npm' (или везде, где у вас есть gulp). Вы также можете переместить файлы по более незаметному для пользователя пути.

Не забудьте запустить новое приглашение cmd, поскольку открытое вами окно не получит новую переменную Path автоматически.

Один правильный путь:

Cmd + R: введите "% appdata%"
Перейти в папку npm
Скопируйте весь путь как "C: \ Users \ Blah . \ npm \"
Зайдите в «Мой компьютер» + щелкните правой кнопкой мыши «Свойства»
Расширенные настройки системы (слева)
Нажмите на переменные среды
Нажмите на Редактировать путь
Добавьте это "C: \ Users \ Blah . \ npm \" в конец и введите ";" после этого
Нажмите ОК и снова откройте cmd

Я думаю, что здесь все хорошо объяснено, и это должно быть первое, что нужно попробовать, когда вы видите gulp' is not recognized на окнах

Сначала вы должны установить gulp как глобальный, используя:

В противном случае решение пути не решит проблему.

Затем добавьте путь модулей npm к PATH, используя:

Является ли информация, которую вы добавили, новой и заметно отличается от того, что дают остальные 33 ответа? У меня сложилось впечатление «Нет», и в этом случае вам, вероятно, не следовало добавлять ответ. Я попробовал многие из них безуспешно, и я понял, что нужно установить gulp globaly, чтобы избежать такой же боли, как я, добавив этот ответ

В моем случае это было то, что я должен был установить gulp-cli по команде npm -g install gulp-cli

Попробуйте добавить в переменную PATH следующее:

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

У меня была похожая проблема с настройкой в Windows 10. Мой ответ зависит от Windows (посмотрите ответы по изменению пути в bash для решения Linux или OSX)

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

Это должно сработать, но для меня это не сработало, потому что у setx есть ограничение на прием только 1024 символов . (да, для меня это тоже бессмысленно).

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

Сначала, пока вы еще находитесь в консоли, введите: echo %appdata%\npm . это ваша папка npm, которую вы хотите добавить в путь, поэтому добавьте ее в буфер обмена.

Вы должны зайти в реестр и перейти к следующей папке:

Затем добавьте значение «Path» вместе с путем к папке npm в буфер обмена. Перезагрузитесь, чтобы активировать новое значение, и вы должны быть готовы к работе.

Я занят изучением Laravel и в процессе пытаюсь установить gulp.

Операционная система: Windows 10

В командной строке: npm -v дает: 2.15.2 узел -v дает: v4.4.5

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

npm установка -g gulp

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

npm установки --глобальные gulp-Кинк

Я тоже пытался: npm конфиг настроить прокси ложные npm очистка кэша

Но это не помогло.

Что я делаю не так?

2 ответа

Я пытаюсь установить gulp на свою машину development Windows 10 Pro, и она не работает. Я установил node.js, и когда я использую свою учетную запись администратора, я могу запустить gulp. Однако, когда я не являюсь администратором, Windows не может найти библиотеку. Дополнительные подробности: Я.

Это тоже сработало для меня:

добавьте --verbose для другого пакета, если вам нужно, и если он все еще не работает , возможно, вы должны сначала установить пакет в глобальный, добавив -g , а затем установить в папку проекта.

Наконец-то. это сработало: npm install gulp -g -verbose

Устанавливаем проверку обновлений пакетов в gulp

Нужно установить проверку обновлений всех пакетов, которые мы наустанавливаем в галп:

Поэтому надо написать:

В нашей папке myproject надо создать такую структуру папок:

В корне создаем папки app и dist

Внутри app:

Не забыть создать файл index.html.

Создаем файл gulpfile.js в корневой папке.

Проверяем работу gulp. Открываем этот файл и пишем в него:

ОБЯЗАТЕЛЬНО ТОЧКУ С ЗАПЯТОЙ В КОНЦЕ!! Иначе не заработает.

Шаблон для создания любой задачи (task) в gulp:

Т.е. откуда брать файл, что с ним сделать и куда отгрузить.

РЕАЛЬНО ЖЕ в него пишем следующее, все с самого начала:

Заходим в папку app>sass и создаем там файл main.sass.

Пишем в него хотя бы что-нибудь, чтобы проверить работу:

Возвращаемся в файл gulpfile.js и пишем в него (добавляем строки):

Теперь в командной строке запускаем gulp sass .

В итоге создастся файл main.css в папке app>css, скомпилированный и оптимизированный уже.

Маски для создания путей для источника файлов, на примерах

Дополнительно

В папке sass можно создать файл с именем, начинающимся с нижнего подчеркивания, например _part.sass. Такие файлы не участвуют в комплияции как отдельные файлы. Их надо просто импортировать командой @import в основной файл. Т.е.:

В файл main.sass в самое начало добавляем импорт и получаем:

В итоге этот фрагмент будет в начале того файла, куда импортируешь. То есть если в main.sass написать, то этот фрагмент будет в итоговом скомпилированном main.css.

Автоматическая компиляция файлов sass при сохранении

Используется метод watch. Синтаксис такой:

Чтобы выйти из этого режима слежения нужно нажать Cntrl+С ДВА РАЗА .

LiveReload

Останавливаем режим слежения (если запущен) Cntrl+С ДВА РАЗА и устанавливаем эту штуку:

Установить установили, а теперь нужно подключить его в gulpfile.js.

добавляем эту строку

то есть теперь начало в файле получается таким:

теперь надо написать таск (выполнение задачи) для браузер-синка:

Чтобы автоматически отражались не только css, но и html и js, нужно добавить пару строк в таск watch:

Создаем папку libs в папке app. Туда мы будем сваливать все какие-то библиотеки, jquery плагины и другие плагины.

Bower

Для установки новых библиотек лучше использовать Bower (используется для установки новых плагинов)

устанавливаем его npm i -g bower

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

В корневой папке myproject создаем файл .bowerrc (начинающийся с точки).

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

Теперь для примера установим два плагина, в командной строке пишем:

появятся две папки jquery и magnific-popup в папке app>libs.

Установить два пакета для сбора всех файлов js и минизации:

npm i gulp-concat gulp-uglifyjs --save-dev

После установки любой приблуды, надо не забывать подключать ее в файле gulpfile.js, поэтому добавляем там строки:

Создаем таск для этой утилиты:

Подключаем jquery в html.

В конце тега body добавляем строки:

т.е. общую сжатую библиотеку и ручной (common.js), он обычно не сжимается, т.к. весит немного.

В папке app>sass создаем файл libs.sass, куда будем сваливать все css библиотеки.

Устанавливаем утилиты, которые будут сжимать css и добавлять в название суффикс mini:

И опять после установки их нужно подключить в основном файле gulpfile.js. последние 2 строчки это они:

пишем таск для них:

Подключаем css стили в html документ:

Сваливаем готовое в папку dist

Для этого создаем таск

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

Для этого устанавливаем утилиту для удаления файлов, пишем в командной строке:

После успешной установки, ее надо подключить в файл gulpfile.js, как обычно:

Оптимизация изображений в gulp

Устанавливаем пакет для оптимизации изображений

Подключаем его в gulpfile.js

Пишем таск для них.

И вставляем вызов этого таск в таск build, т.е. добавляем

теперь при запуске таска build будут все эти таски выполняться последовательно, которые в него запихали.

Если изображений много, то надо установить кеш

потом подключаем его в начале файла gulpfile.js:

И немного модифицируем после этого таск img:

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

Поэтому надо написать новый таск для очистки кеша:

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

Автоматическое создание вендорных префиксов в gulp

Для этого сначала устанавливаем пакет:

Как всегда теперь подключаем его в начале файла.

И добавляем новый пайп в таск sass:

Резюме

Итоговое содержание файла gulpfile.js

Итоговое содержание файла package.json

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

п.с. статья построена на базе видосика канала webdesigner master:

Читайте также: