Gulp невозможно загрузить файл
node-sass@4.12.0 install C:\OSPanel\domains\aaa\node_modules\node-sass
node scripts/install.js
Cached binary found at C:\Users\desun\AppData\Roaming\npm-cache\node-sass\4.12.0\win32-x64-72_binding.node
sharp@0.21.3 install C:\OSPanel\domains\aaa\node_modules\sharp
(node install/libvips && node install/dll-copy && prebuild-install) || (node-gyp rebuild && node install/dll-copy)
info sharp Using cached C:\Users\desun\AppData\Roaming\npm-cache_libvips\libvips-8.7.0-win32-x64.tar.gz
info sharp Creating C:\OSPanel\domains\aaa\node_modules\sharp\build\Release
info sharp Copying DLLs from C:\OSPanel\domains\aaa\node_modules\sharp\vendor\lib to C:\OSPanel\domains\aaa\node_modules\sharp\build\Release
prebuild-install WARN install No prebuilt binaries found (target=12.12.0 runtime=node arch=x64 libc= platform=win32)
C:\OSPanel\domains\aaa\node_modules\sharp>if not defined npm_config_node_gyp (node "C:\Users\desun\AppData\Roaming\npm\node_modules\npm\node_modules\npm-lifecycle\node-gyp-bin\. \node_modules\node-gyp\bin\node-gyp.js" rebuild ) else (node "C:\Users\desun\AppData\Roaming\npm\node_modules\npm\node_modules\node-gyp\bin\node-gyp.js" rebuild )
gyp ERR! configure error
gyp ERR! stack Error: Can't find Python executable "python", you can set the PYTHON env variable.
gyp ERR! stack at PythonFinder.failNoPython (C:\Users\desun\AppData\Roaming\npm\node_modules\npm\node_modules\node-gyp\lib\configure.js:484:19)
gyp ERR! stack at PythonFinder. (C:\Users\desun\AppData\Roaming\npm\node_modules\npm\node_modules\node-gyp\lib\configure.js:509:16)
gyp ERR! stack at C:\Users\desun\AppData\Roaming\npm\node_modules\npm\node_modules\graceful-fs\polyfills.js:282:31
gyp ERR! stack at FSReqCallback.oncomplete (fs.js:158:21)
gyp ERR! System Windows_NT 10.0.18362
gyp ERR! command "C:\Program Files\nodejs\node.exe" "C:\Users\desun\AppData\Roaming\npm\node_modules\npm\node_modules\node-gyp\bin\node-gyp.js" "rebuild"
gyp ERR! cwd C:\OSPanel\domains\aaa\node_modules\sharp
gyp ERR! node -v v12.12.0
gyp ERR! node-gyp -v v3.8.0
gyp ERR! not ok
npm WARN bootstrap@4.3.1 requires a peer of jquery@1.9.1 - 3 but none is installed. You must install peer dependencies yourself.
npm WARN bootstrap@4.3.1 requires a peer of popper.js@^1.14.7 but none is installed. You must install peer dependencies yourself.
npm WARN optimizedhtml@5.0.0 No repository 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: )
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! sharp@0.21.3 install: (node install/libvips && node install/dll-copy && prebuild-install) || (node-gyp rebuild && node install/dll-copy)
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the sharp@0.21.3 install script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\desun\AppData\Roaming\npm-cache_logs\2019-10-16T20_27_29_659Z-debug.log
`
Слайдер на странице
В курсе предлагается доработать проект — это простой landing на несколько экранов. Для создания слайдера используется jquery-плагин slick . На странице index.html подключаются библиотека jQuery, js-файл плагина (все файлы плагина находятся в директории src/assets/slick ) и js-файл слайдера slider.js .
В окончательном варианте проекта весь js-код будет в файле dist/script.js . Поэтому удаляем из index.html подключение трех js-файлов, вместо этого подключаем один файл script.js . Потом устанавливаем пакеты jquery и slick-carousel с помощью менеджера пакетов.
Кроме того, создаем файл src/js/main.js , где будем подключать все модули:
Непонятно только — для работы плагина slick нужно как-то опубликовать директорию node_modules/slick-carousel/slick , потому что в index.html подключаются стили из этой директории. Но мы продолжаем публиковать директорию src/assets/slick , которая досталась нам от предыдущего разработчика.
Сначала делаю npm i :
node-sass@4.12.0 install C:\OSPanel\domains\aaa\node_modules\node-sass
node scripts/install.js
Cached binary found at C:\Users\desun\AppData\Roaming\npm-cache\node-sass\4.12.0\win32-x64-72_binding.node
sharp@0.21.3 install C:\OSPanel\domains\aaa\node_modules\sharp
(node install/libvips && node install/dll-copy && prebuild-install) || (node-gyp rebuild && node install/dll-copy)
info sharp Using cached C:\Users\desun\AppData\Roaming\npm-cache_libvips\libvips-8.7.0-win32-x64.tar.gz
info sharp Creating C:\OSPanel\domains\aaa\node_modules\sharp\build\Release
info sharp Copying DLLs from C:\OSPanel\domains\aaa\node_modules\sharp\vendor\lib to C:\OSPanel\domains\aaa\node_modules\sharp\build\Release
prebuild-install WARN install No prebuilt binaries found (target=12.12.0 runtime=node arch=x64 libc= platform=win32)
C:\OSPanel\domains\aaa\node_modules\sharp>if not defined npm_config_node_gyp (node "C:\Users\desun\AppData\Roaming\npm\node_modules\npm\node_modules\npm-lifecycle\node-gyp-bin. \node_modules\node-gyp\bin\node-gyp.js" rebuild ) else (node "C:\Users\desun\AppData\Roaming\npm\node_modules\npm\node_modules\node-gyp\bin\node-gyp.js" rebuild )
gyp ERR! configure error
gyp ERR! stack Error: Can't find Python executable "python", you can set the PYTHON env variable.
gyp ERR! stack at PythonFinder.failNoPython (C:\Users\desun\AppData\Roaming\npm\node_modules\npm\node_modules\node-gyp\lib\configure.js:484:19)
gyp ERR! stack at PythonFinder. (C:\Users\desun\AppData\Roaming\npm\node_modules\npm\node_modules\node-gyp\lib\configure.js:509:16)
gyp ERR! stack at C:\Users\desun\AppData\Roaming\npm\node_modules\npm\node_modules\graceful-fs\polyfills.js:282:31
gyp ERR! stack at FSReqCallback.oncomplete (fs.js:158:21)
gyp ERR! System Windows_NT 10.0.18362
gyp ERR! command "C:\Program Files\nodejs\node.exe" "C:\Users\desun\AppData\Roaming\npm\node_modules\npm\node_modules\node-gyp\bin\node-gyp.js" "rebuild"
gyp ERR! cwd C:\OSPanel\domains\aaa\node_modules\sharp
gyp ERR! node -v v12.12.0
gyp ERR! node-gyp -v v3.8.0
gyp ERR! not ok
npm WARN bootstrap@4.3.1 requires a peer of jquery@1.9.1 - 3 but none is installed. You must install peer dependencies yourself.
npm WARN bootstrap@4.3.1 requires a peer of popper.js@^1.14.7 but none is installed. You must install peer dependencies yourself.
npm WARN optimizedhtml@5.0.0 No repository 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: )
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! sharp@0.21.3 install: (node install/libvips && node install/dll-copy && prebuild-install) || (node-gyp rebuild && node install/dll-copy)
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the sharp@0.21.3 install script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\desun\AppData\Roaming\npm-cache_logs\2019-10-16T20_27_29_659Z-debug.log
`
Таймер окончания акции
На странице есть таймер, который отсчитывает дни, часы и минуты до оконцания акции. Создаем новый модуль timer.js в директории modules :
В файле main.js задаем время окончания акции и запускаем таймер:
На этапе запуска gulp :
`$ gulp
internal/modules/cjs/loader.js:797
throw err;
^
I have what I thought was a fairly simple gulpfile.js
However, when I look at the VS Task Runner, it just shows an error:
But the output window is empty:
How can I get more information about the error?
На этапе запуска gulp :
`$ gulp
internal/modules/cjs/loader.js:797
throw err;
^
Error: Cannot find module 'gulp-responsive'
Require stack:
- C:\OSPanel\domains\aaa\gulpfile.js
- C:\Users\desun\AppData\Roaming\npm\node_modules\gulp-cli\lib\versioned^4.0.0\index.js
- C:\Users\desun\AppData\Roaming\npm\node_modules\gulp-cli\index.js
- C:\Users\desun\AppData\Roaming\npm\node_modules\gulp-cli\bin\gulp.js
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:794:15)
at Function.Module._load (internal/modules/cjs/loader.js:687:27)
at Module.require (internal/modules/cjs/loader.js:849:19)
at require (internal/modules/cjs/helpers.js:74:18)
at Object. (C:\OSPanel\domains\aaa\gulpfile.js:11:18)
at Module._compile (internal/modules/cjs/loader.js:956:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:973:10)
at Module.load (internal/modules/cjs/loader.js:812:32)
at Function.Module._load (internal/modules/cjs/loader.js:724:14)
at Module.require (internal/modules/cjs/loader.js:849:19) code: 'MODULE_NOT_FOUND',
requireStack: [
'C:\OSPanel\domains\aaa\gulpfile.js',
'C:\Users\desun\AppData\Roaming\npm\node_modules\gulp-cli\lib\versioned\^4.0.0\index.js',
'C:\Users\desun\AppData\Roaming\npm\node_modules\gulp-cli\index.js',
'C:\Users\desun\AppData\Roaming\npm\node_modules\gulp-cli\bin\gulp.js'
]
>
`
The text was updated successfully, but these errors were encountered:
Переключение вкладок
В двух местах landing-а есть вкладки, но пока нет возможности их переключать — это следующая задача, которую будем решать.
Создаем новый модуль tabs.js в директории modules :
И осталось только изменить src/js/main.js :
Отправка простой формы
Внутри модальных окон есть формы. Их нужно отправлять посредством ajax и захватывать все введенные данные. Создаем новый модуль forms.js в директории modules :
Сервер просто отправляет post-данные обратно в виде строки:
И осталось только изменить src/js/main.js :
4 ответа
Проблема не связана с путем, но на самом деле должна быть какая-то проблема с самим файлом gulp либо из-за синтаксической ошибки, либо из-за отсутствия какого-либо пакета, который, к сожалению, Visual Studio не показывает, что конкретная ошибка, а общая ошибка, которую вы видите в средстве выполнения задач "не удалось загрузить » . И правильный способ увидеть ошибки
- Откройте командную строку (желательно в режиме администратора, это то, что я сделал).
- Перейдите в то же место, где находится файл gulp.
- Запустите задачу с помощью следующего примера команды -> gulp default
- Если есть какая-либо ошибка, например, отсутствует пакет, он покажет вам, исправьте эти проблемы.
- После исправления всех ошибок вы увидите, что задание gulp успешно выполнено.
- Вернитесь в визуальную студию, бегущий по задачам и нажмите «Обновить» (левая верхняя кнопка), и он покажет вам все задачи.
Этот ответ здесь работал для меня.
Переместился вверх по $ (PATH) над всем. Поскольку у меня не было (DevEnvDir)|Extensions\Microsoft\Web Tools\External местоположения, как упомянуто в ответе.
Инструменты> Параметры> Проекты и решения> Внешние веб-инструменты
Инструменты> Параметры> Проекты и решения> Управление веб-пакетами> Внешние веб-инструменты
Я не уверен, почему, но открытие cmd приглашения в каталоге, содержащем gulpfile.js и запуск npm install , исправило это.
Возможно, кто-то мудрее, чем я могу объяснить, почему.
В окне «Вывод» убедитесь, что вы выбрали Task Runner Explorer для параметра Show output from . Это была моя проблема, почему я не видел журналы ошибок из gulpfile. Ошибка новичка.
Изображение в модальном окне
На странице есть галерея выполненных работ, нужно при клике по изображению открывать большое изображение с затемнением остальной страницы.
Создаем новый модуль images.js в директории modules :
И осталось использовать новый модуль в файле main.js :
На этапе запуска gulp :
`$ gulp
internal/modules/cjs/loader.js:797
throw err;
^
Error: Cannot find module 'gulp-responsive'
Require stack:
- C:\OSPanel\domains\aaa\gulpfile.js
- C:\Users\desun\AppData\Roaming\npm\node_modules\gulp-cli\lib\versioned^4.0.0\index.js
- C:\Users\desun\AppData\Roaming\npm\node_modules\gulp-cli\index.js
- C:\Users\desun\AppData\Roaming\npm\node_modules\gulp-cli\bin\gulp.js
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:794:15)
at Function.Module._load (internal/modules/cjs/loader.js:687:27)
at Module.require (internal/modules/cjs/loader.js:849:19)
at require (internal/modules/cjs/helpers.js:74:18)
at Object. (C:\OSPanel\domains\aaa\gulpfile.js:11:18)
at Module._compile (internal/modules/cjs/loader.js:956:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:973:10)
at Module.load (internal/modules/cjs/loader.js:812:32)
at Function.Module._load (internal/modules/cjs/loader.js:724:14)
at Module.require (internal/modules/cjs/loader.js:849:19) code: 'MODULE_NOT_FOUND',
requireStack: [
'C:\OSPanel\domains\aaa\gulpfile.js',
'C:\Users\desun\AppData\Roaming\npm\node_modules\gulp-cli\lib\versioned\^4.0.0\index.js',
'C:\Users\desun\AppData\Roaming\npm\node_modules\gulp-cli\index.js',
'C:\Users\desun\AppData\Roaming\npm\node_modules\gulp-cli\bin\gulp.js'
]
>
`
The text was updated successfully, but these errors were encountered:
onekrag commented Dec 3, 2019
Добрый день. Пытаюсь установить модули для optimizedHTML-5 .
Небольшие улучшения
При открытии модального окна страница дергается вправо. Это потому, что для body мы устанавливаем свойсто overflow в значение hidden . Давайте это исправим — будем добавлять margin-left для body — который будет равен ширине scroll .
Демо-сайт здесь, исходные коды здесь.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
У меня есть то, что я думал, был довольно простой gulpfile.js
Однако, когда я смотрю на VS Task Runner, он просто показывает ошибку:
Но окно вывода пустое:
Как я могу получить больше информации об ошибке?
5 Answers 5
This answer here worked for me.
Moved up the $(PATH) location above everything. As I did not have (DevEnvDir)|Extensions\Microsoft\Web Tools\External location as mentioned in the answer.
Tools > Options > Projects and Solutions > External Web Tools
Tools > Options > Projects and Solutions > Web Package Management > External Web Tools
The problem is not related to path, but actually there must be some problem with gulp file itself either syntax error or some package is missing which unfortunately visual studio does not show that specific error but generic error what you see in task runner "failed to load". And the right way to see the errors is
- Open the command prompt (preferably in admin mode, this is what i did).
- Goto the same location where gulp file is located.
- Run the task through following command example --> gulp default
- If there is any error like package is missing, it will show you, fix those issues.
- After all errors are fixed, then you will see that gulp task runs successfully.
- Go back to visual studio, task runner, and click on refresh (left top button), and it will show you all tasks.
I'm not sure why but opening a cmd prompt at the directory containing gulpfile.js and running npm install has fixed it.
Perhaps someone wiser than I can explain why.
In Output window, make sure you select Task Runner Explorer for Show output from option. This was my problem why I didn't see the error logs from gulpfile. A rookie mistake.
I'm using Visual Studio Community 2019 Version 16.5.4. I had the same problem and found the answer in the next link:
Gulp uses node.js but it is important the version to be compatible. I've tried few versions and at the end version 0.12.7 works for me. But had to place absolute path to the place where that node version is installed in VS
Tools > Options > Projects and Solutions > External Web Tools
and move the path to the top. Placing the Path in environment variables and moving $(PATH) to the top didn't help in my case.
I created a module ( webapp-module-storage ) which has the following definitions:
package.json
I thought I can use my module inside another module when installing it with:
However, when I install my module, I am getting this error:
Local gulp not found
Try running: npm install gulp
Screenshot
My understanding is, that gulp is shipped together with my module because I declared it in devDependencies but it looks like that my npm postinstall script cannot find gulp .
Am I missing something?
Perform npm i gulp -D in folder project. Note: gulp4 can cause issues in old projects, for install a specific version use like this: npm i gulp@3.9.1 -D (ps -D for devDependencies)
6 Answers 6
Try running npm link gulp in your application directory (to create a local link to the globally installed Gulp module).
Laravel / homestead user here. The above command didn't work for me, however npm link gulp --no-bin-links worked.
To clarify, npm link [module] creates a symlink from [module]'s global install folder to ./node_modules/[module] at the current path ( npm link w/o name links packages, see man page)
Try installing your dependencies first:
If still does not work, install gulp globally:
if you find problems installing it. type sudo before npm.
In case you need more info about why you need gulp globally and locally read this answer
Actually not in the application using my module. But I thought that it would grab gulp from the path of my module or my globally installed gulp.
Seems it is searching for the local gulp inside your project. How about install it locally, inside your project ?
I have tried all the solutions mentioned. At the end I was able to solve the problem by realising that the gulpfile.js file was missing on the location i was using the gulp. After placing the gulpfile.js in the folder from where I was executing gulp, it worked for me.
I made the same mistake. I was one directory up from where I was suppose to be. This can easily happen if you are going full speed with setting up something like an Express Generator environment where you have multiple sub apps under a root location. I just needed to slow down.
npm link gulp --no-bin-links
Run this
where npm link gulp creates a local link to globally installed gulp module and --no-bin-links argument will prevent npm from creating symlinks for any binaries the package might contain.
You can't translate symlinks to a synchronized folder on Windows share, so you will need '--no-bin-links' to go around it.
Use it for any filesystem that doesn’t support symbolic links.
Symlinks, or symbolic links, are “virtual” files or folders which reference a physical file or folder located elsewhere, and are an important feature built in to many operating systems, including Linux and Windows.
Купил на Udemy видеокурс «Практический JavaScript» от Ивана Петриченко, но моих знаний для просмотра оказалось явно маловато. Постоянно вылезают проблемы, с которыми раньше не сталкивался. Так что решил сделать для себя краткий конспект — как решал ту или иную проблему. Первое, с чем столкнулся — не запускается сборка проекта.
Оказалось, что нужно глобально установить пакет gulp-cli :
Хорошо, следующая попытка запустить gulp :
Политика Windows выполнения скриптов запрещает выполнять эти самые скрипты. Узнать текущее значение политики можно командой:
Чтобы разрешить выполнение файлов с расширением ps1 , т.е. чтобы запускать скрипты PowerShell в Windows, выполняем команду:
Причем PowerShell для выполнения этой команды надо запускать от имени администратора.
Файл gulpfile.js для сборки проекта:
Отправка сложной формы
Для начала нам надо решить проблему закрытия первого и второго окна при клике на кнопку «Далее» — нам не нужно, чтобы модальные окна мешали друг другу. Для этого добавим атрибут data-modal для всех модальных окон на странице. И теперь можем в модуле modals.js отбирать все окна и закрывать их перед открытием нового.
В первом модальном окне надо выбрать форму балкона. Собственно говоря, это вкладки — при клике на маленькую картинку показывается увеличенное изображение.
Модуль для работы с вкладками у нас уже есть, надо только в main.js добавить вызов tabs() с нужными селекторами.
Но при показе содержимого вкладок надо использовать другое значение свойства display — это inline-block вместо block .
Теперь будем все значения, которые выбрал пользователь на первой и второй вкладке, сохранять в переменную modalState :
Для этого создаем новый модуль changeModalState.js в директории modules :
Изменяем модуль form.js , чтобы перед отправкой формы из третьего модального окна — добавить к отправке на сервер данные из первого и второго окна.
И осталось только добавить атрибут data-calc для формы в третьем модальном окне:
Модальное окно
При клике на определенные элементы нужно показывать модальное окно. Создаем директорию src/js/modules , а внутри нее — файл modals.js .
Все модальные окна похожи, есть только незначительные отличия в css-селекторах, по которым к ним можно обращаться:
И осталось только изменить src/js/main.js :
Читайте также: