Webpcss gulp не работает

Прм настройки Gulp выбивает ошибку Cannot find module ‘gulp-webp-css’ не могу найти причину?

Cannot find module ‘gulp-webp-css’ -код
C:\Users\Lenovo\Desktop\мои файлы\мои проэкты\Cайт Магазина\fls-gulp>
C:\Users\Lenovo\Desktop\мои файлы\мои проэкты\Cайт Магазина\fls-gulp>gulp
Error: Cannot find module ‘gulp-webpcss’
Require stack:
— C:\Users\Lenovo\Desktop\мои файлы\мои проэкты\Cайт Магазина\fls-gulp\gulpfile.js
— C:\Users\Lenovo\AppData\Roaming\npm\node_modules\gulp-cli\lib\shared\require-or-import.js
— C:\Users\Lenovo\AppData\Roaming\npm\node_modules\gulp-cli\lib\versioned\^4.0.0\index.js
— C:\Users\Lenovo\AppData\Roaming\npm\node_modules\gulp-cli\index.js
— C:\Users\Lenovo\AppData\Roaming\npm\node_modules\gulp-cli\bin\gulp.js
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:880:15)
at Function.Module._load (internal/modules/cjs/loader.js:725:27)
at Module.require (internal/modules/cjs/loader.js:952:19)
at require (internal/modules/cjs/helpers.js:88:18)
at Object. (C:\Users\Lenovo\Desktop\мои файлы\мои проэкты\Cайт Магазина\fls-gulp\gulpfile.js:44:14)
at Module._compile (internal/modules/cjs/loader.js:1063:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1092:10)
at Module.load (internal/modules/cjs/loader.js:928:32)
at Function.Module._load (internal/modules/cjs/loader.js:769:14)
at Module.require (internal/modules/cjs/loader.js:952:19) <
code: ‘MODULE_NOT_FOUND’,
requireStack: [
‘C:\\Users\\Lenovo\\Desktop\\мои файлы\\мои проэкты\\Cайт Магазина\\fls-gulp\\gulpfile.js’,
‘C:\\Users\\Lenovo\\AppData\\Roaming\\npm\\node_modules\\gulp-cli\\lib\\shared\\require-or-import.js’,
‘C:\\Users\\Lenovo\\AppData\\Roaming\\npm\\node_modules\\gulp-cli\\lib\\versioned\\^4.0.0\\index.js’,
‘C:\\Users\\Lenovo\\AppData\\Roaming\\npm\\node_modules\\gulp-cli\\index.js’,
‘C:\\Users\\Lenovo\\AppData\\Roaming\\npm\\node_modules\\gulp-cli\\bin\\gulp.js’
]
>

C:\Users\Lenovo\Desktop\мои файлы\мои проэкты\Cайт Магазина\fls-gulp>

Источник

Error: Cannot find module ‘webp-converter/cwebp’ >> problem and solution #30

Comments

svyatoslavlp commented Jul 17, 2020

Install
npm i gulp-webp —save-dev
npm i gulp-webp-html —save-dev
npm i gulp-webpcss —save-dev
and other packages for Gulp
then run gulp in the terminal
and I get this:
internal / modules / cjs / loader.js: 985
throw err;
^

Error: Cannot find module ‘webp-converter / cwebp’
Require stack:

• /home/svyatoslavlp/github/2020/akadem1_2020/node_modules/webpcss/dist/WebpBase64.js
• /home/svyatoslavlp/github/2020/akadem1_2020/node_modules/webpcss/dist/Webpcss.js
• /home/svyatoslavlp/github/2020/akadem1_2020/node_modules/webpcss/dist/index.js
• /home/svyatoslavlp/github/2020/akadem1_2020/node_modules/gulp-webpcss/index.js
• /home/svyatoslavlp/github/2020/akadem1_2020/gulpfile.js
• /home/svyatoslavlp/.nvm/versions/node/v12.16.1/lib/node_modules/gulp-cli/lib/versioned/^4.0.0/index.js
• /home/svyatoslavlp/.nvm/versions/node/v12.16.1/lib/node_modules/gulp-cli/index.js
• /home/svyatoslavlp/.nvm/versions/node/v12.16.1/lib/node_modules/gulp-cli/bin/gulp.js
  at Function.Module._resolveFilename (internal / modules / cjs / loader.js: 982: 15)
  at Function.Module._load (internal / modules / cjs / loader.js: 864: 27)
  at Module.require (internal / modules / cjs / loader.js: 1044: 19)
  at require (internal / modules / cjs / helpers.js: 77: 18)
  at Object. (/home/svyatoslavlp/github/2020/akadem1_2020/node_modules/webpcss/dist/WebpBase64.js:33:19)
  at Module._compile (internal / modules / cjs / loader.js: 1158: 30)
  at Object.Module._extensions..js (internal / modules / cjs / loader.js: 1178: 10)
  at Module.load (internal / modules / cjs / loader.js: 1002: 32)
  at Function.Module._load (internal / modules / cjs / loader.js: 901: 14)
  at Module.require (internal / modules / cjs / loader.js: 1044: 19) <
  code: ‘MODULE_NOT_FOUND’,
  requireStack: [
  ‘/home/svyatoslavlp/github/2020/akadem1_2020/node_modules/webpcss/dist/WebpBase64.js’,
  ‘/home/svyatoslavlp/github/2020/akadem1_2020/node_modules/webpcss/dist/Webpcss.js’,
  ‘/home/svyatoslavlp/github/2020/akadem1_2020/node_modules/webpcss/dist/index.js’,
  ‘/home/svyatoslavlp/github/2020/akadem1_2020/node_modules/gulp-webpcss/index.js’,
  ‘/home/svyatoslavlp/github/2020/akadem1_2020/gulpfile.js’,
  ‘/home/svyatoslavlp/.nvm/versions/node/v12.16.1/lib/node_modules/gulp-cli/lib/versioned/^4.0.0/index.js’,
  ‘/home/svyatoslavlp/.nvm/versions/node/v12.16.1/lib/node_modules/gulp-cli/index.js’,
  ‘/home/svyatoslavlp/.nvm/versions/node/v12.16.1/lib/node_modules/gulp-cli/bin/gulp.js’
  ]
  >

solution (might come in handy):
copy files from: node_modules> webp-converter> src
in: node_modules> webp-converter

everything is working

The text was updated successfully, but these errors were encountered:

dkrnl commented Jul 31, 2020

EvgenLebedev-1984 commented Oct 8, 2020

Установить
npm i gulp-webp —save-dev
npm i gulp-webp-html —save-dev
npm i gulp-webpcss —save-dev
и другие пакеты для глотка
затем бегите глотком в терминал
и я получаю это:
внутренний / модули / cjs / загрузчик.js: 985
бросок err;
^

Ошибка: не удается найти модуль ‘webp-converter / cwebp’
Требуется стек:

• /home/svyatoslavlp/github/2020/akadem1_2020/node_modules/webpcss/dist / WebpBase64.JS
• /home/svyatoslavlp/github/2020/akadem1_2020/node_modules/webpcss/dist / Webpcss.JS
• /home/svyatoslavlp/github/2020/akadem1_2020/node_modules/webpcss/dist / index.JS
• /home/svyatoslavlp/github/2020/akadem1_2020/node_modules/gulp-webpcss / index.JS
• /home/svyatoslavlp/github/2020/akadem1_2020 / gulpfile.JS
• / главная/святославлп/.nvm/versions/node/v12. 16.1/lib/node_modules/gulp-cli/lib/versioned/^4.0.0/index.JS
• / главная/святославлп/.nvm / versions/node/v12. 16.1/lib/node_modules/gulp-cli/index.JS
• / главная/святославлп/.nvm / versions/node/v12. 16.1/lib/node_modules/gulp-cli/bin/gulp.js
  на работе.Модуль._resolveFilename (internal / modules / cjs / loader.js: 982: 15)
  на работе.Модуль._load (internal / modules / cjs / loader.js: 864: 27)
  в модуле.require (internal / modules / cjs / loader.js: 1044: 19)
  at require (internal / modules / cjs / helpers.js: 77: 18)
  на объектах. (/home/svyatoslavlp/github / 2020/akadem1_2020/node_modules/webpcss/dist / WebpBase64.js: 33: 19)
  в модуле._compile (internal / modules / cjs / loader.js: 1158: 30)
  на объектах.Модуль._выдвижений..js (internal / modules / cjs / loader.js: 1178: 10)
  в модуле.load (internal / modules / cjs / loader.js: 1002: 32)
  на работе.Модуль._load (internal / modules / cjs / loader.js: 901: 14)
  в модуле.require (internal / modules / cjs / loader.js: 1044: 19) <
  код: ‘MODULE_NOT_FOUND’,
  requireStack: [
  ‘/home/svyatoslavlp/github/2020/akadem1_2020/node_modules/webpcss/dist / WebpBase64.js’,
  ‘/home/svyatoslavlp/github/2020/akadem1_2020/node_modules/webpcss/dist / Webpcss.js’,
  ‘/home/svyatoslavlp/github/2020/akadem1_2020/node_modules/webpcss/dist / index.js’,
  ‘/home/svyatoslavlp/github / 2020/akadem1_2020/node_modules/gulp-webpcss / index.js’,
  ‘/home/svyatoslavlp/github/2020/akadem1_2020 / gulpfile.js’,
  ‘/главная/святославлп/.nvm/versions/node/v12. 16.1/lib/node_modules/gulp-cli/lib/versioned/^4.0.0/index.js’,
  ‘/главная/святославлп/.nvm / versions/node/v12. 16.1/lib/node_modules/gulp-cli/index.js’,
  ‘/главная/святославлп/.nvm / versions/node/v12. 16.1/lib/node_modules/gulp-cli/bin/gulp.js’
  ]
  >

решение (может пригодиться):
скопируйте файлы из: node_modules> webp-converter> > src>>
in: node_modules> webp-конвертер

была такая же проблема, сделал как в описании, все зарабтоало, спс

Источник

Error [ERR_REQUIRE_ESM]: Must use import to load ES Module?

История
Делал настройку gulp по видео уроку. По началу все прекрасно работало, но как дошел до установки плагина «imagemin» возникли проблемы. Установил плагин при помощи кода npm install —save-dev gulp-imagemin

Компилятор

Я так понял там какие то проблемы с модулем. То есть, должен быть «ES module, а у меня используется «CommonJS» (что бы это ни значило). На форумах прочитал создать еще один «package.json» в папке «src», и прописать там <"type": "module">. Но это не помогло.

• Вопрос задан 18 авг.
• 2380 просмотров

alexblackstone, а gulp-image так же ужимает размер файла ?
В плане задачи.

Поставил. Проверил. Работает.
Спасибо )

alexblackstone, Ух, эта сборка сделает седым.
При установке другого модуля «webpcss» далее.

Выдаёт новые приключения:

Error: Cannot find module ‘webp-converter/cwebp’
Require stack:
— G:\Different\Web\Andrikanych Evhen\fls-gulp\node_modules\webpcss\dist\WebpBase64.js
— G:\Different\Web\Andrikanych Evhen\fls-gulp\node_modules\webpcss\dist\Webpcss.js
— G:\Different\Web\Andrikanych Evhen\fls-gulp\node_modules\webpcss\dist\index.js
— G:\Different\Web\Andrikanych Evhen\fls-gulp\node_modules\gulp-webpcss\index.js
— G:\Different\Web\Andrikanych Evhen\fls-gulp\gulpfile.js
— C:\Users\Cobra\AppData\Roaming\npm\node_modules\gulp-cli\lib\shared\require-or-import.js
— C:\Users\Cobra\AppData\Roaming\npm\node_modules\gulp-cli\lib\versioned\^4.0.0\index.js
— C:\Users\Cobra\AppData\Roaming\npm\node_modules\gulp-cli\index.js
— C:\Users\Cobra\AppData\Roaming\npm\node_modules\gulp-cli\bin\gulp.js
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:962:15)
at Function.Module._load (internal/modules/cjs/loader.js:838:27)
at Module.require (internal/modules/cjs/loader.js:1022:19)
at require (internal/modules/cjs/helpers.js:72:18)
at Object. (G:\Different\Web\Andrikanych Evhen\fls-gulp\node_modules\webpcss\dist\WebpBase64.js:33:19)
at Module._compile (internal/modules/cjs/loader.js:1118:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1138:10)
at Module.load (internal/modules/cjs/loader.js:982:32)
at Function.Module._load (internal/modules/cjs/loader.js:875:14)
at Module.require (internal/modules/cjs/loader.js:1022:19) <
code: ‘MODULE_NOT_FOUND’,
requireStack: [
‘G:\\Different\\Web\\Andrikanych Evhen\\fls-gulp\\node_modules\\webpcss\\dist\\WebpBase64.js’,
‘G:\\Different\\Web\\Andrikanych Evhen\\fls-gulp\\node_modules\\webpcss\\dist\\Webpcss.js’,
‘G:\\Different\\Web\\Andrikanych Evhen\\fls-gulp\\node_modules\\webpcss\\dist\\index.js’,
‘G:\\Different\\Web\\Andrikanych Evhen\\fls-gulp\\node_modules\\gulp-webpcss\\index.js’,
‘G:\\Different\\Web\\Andrikanych Evhen\\fls-gulp\\gulpfile.js’,
‘C:\\Users\\Cobra\\AppData\\Roaming\\npm\\node_modules\\gulp-cli\\lib\\shared\\require-or-import.js’,
‘C:\\Users\\Cobra\\AppData\\Roaming\\npm\\node_modules\\gulp-cli\\lib\\versioned\\^4.0.0\\index.js’,
‘C:\\Users\\Cobra\\AppData\\Roaming\\npm\\node_modules\\gulp-cli\\index.js’,
‘C:\\Users\\Cobra\\AppData\\Roaming\\npm\\node_modules\\gulp-cli\\bin\\gulp.js’
]
>

Установил module ‘webp-converter’.
А вот как его применить не понимаю пока.

Источник

Gulp не перезагружает стили в браузере

вроде как все пакеты последней версии

«browser-sync»: «^2.27.4»,
«del»: «^6.0.0»,
«gulp»: «^4.0.2»,
«gulp-autoprefixer»: «^8.0.0»,
«gulp-clean-css»: «^4.3.0»,
«gulp-file-include»: «^2.3.0»,
«gulp-fonter»: «^0.3.0»,
«gulp-group-css-media-queries»: «^1.2.2»,
«gulp-imagemin»: «^7.1.0»,
«gulp-rename»: «^2.0.0»,
«gulp-sass»: «^5.0.0»,
«gulp-svg-sprite»: «^1.5.0»,
«gulp-ttf2woff»: «^1.1.1»,
«gulp-ttf2woff2»: «^4.0.1»,
«gulp-uglify-es»: «^2.0.0»,
«gulp-webp»: «^4.0.1»,
«gulp-webp-html»: «^1.0.2»,
«gulp-webpcss»: «^1.1.1»,
«rename»: «^1.0.4»,
«sass»: «^1.35.2»,
«webp-converter»: «^2.2.3»

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

Не отображаются стили в браузере
Как то я пришел в одно заведение с компами и решил оттуда зайти на свой сайт и не один «тамошний».

Не работают стили на iPhone в браузере Safari
Суть проблемы следующая: — есть сайт http://con-sensus.ru/#buy , на ПК в любых браузерах всё.

Переход на Gulp v4 Перестал работать плагин сборщик спрайтов gulp.spritesmith
Перешел на новую версию Gulp (v4) и мой галп сборщик превратился в тыкву, Подскажите, как исправить.

Gulp rigger и gulp include file при сборке html файла ломают верстку
Добрый вечер. Осваиваю gulp. На данном этапе мне нужна только вставка повторяющегося кода.

Источник

Webpcss gulp не работает

PostCSS processor to add links to WebP images for browsers that support it.

WebP is image format that is smaller, that PNG or JPEG, but it is supported only by Chrome.

Plugins for intergation with popular frontend build systems

This plugin use cwebp for processing images. If you want to use this functionality read Installation Guide

Postcss drop support node 0.10.0 by default. But if your need this version use Promise polyfill.

Versions >= 0.12 including 4.0.0 and iojs works without polyfills

Results of webpcss processor.

Results of webp task. webp task appends .webp images for every .png image.

• webpClass Type: String Default: ‘.webp’ Class which prepend selector. For expample: before

.webp class indicate webp browser support. Recommends to use Modernizr

• noWebpClass Type: String Default: «» Class which prepend selector without webp content. For expample: noWebpClass=».no-webp» before

replace_from Type: RegExp Default: /.(png|jpg|jpeg)/ RegExp pattern for replace

replace_to Type: String or Function Default: .webp The contents of replace_from will be replaced by replace_to . They will be replaced with «.webp» by default.

If replace_to is a Function, not replace_from but the whole url will be replaced with the return value of the function.

The function will have a argument object, which has the following properties:

To checks browser support of webp format need to use Modernizr which adds .webp class to body if browser support WebP and browser will download smaller WebP image instead of bigger PNG.

process_selector Type: function(selector, baseClass) modify selector with baseClass

inline Type: Boolean Default: false Turn on inline images mode. You need setup image_path and css_path for correct resolving image path.

image_root Type: String Default: «» This property needs to resolve absolute paths url(/images/1.png) while inlining images or other file info options.

css_root Type: String Default: «» This property needs to resolve relative paths url(../images/1.png) url(image.png) while inlining images or other file info options.

minAddClassFileSize Type: Number Default: 0 webpClass will be added when images only of which greater than certain certain file size in bytes. It only works when the file path can be resolved(Either image_root or css_root or resolveUrlRelativeToFile ) if they are files but not base64 encoded content.

resolveUrlRelativeToFile Type: Boolean Default: false This property is needed to resolve relative paths url(../images/1.png) url(image.png) while inlining images or other options which are relative to file info . It will try to find resource file relative to current css file when it’s true and css_root is not set.

localImgFileLocator Type: Function Default: null When this property is set, it will be used to resolve the file path of image from the css url value while inlining images or other options which are relative to file info. In addition, resolveUrlRelativeToFile , css_root , image_root will be ignored. This function should return the exact file path in the file system and it has an argument object, which contains the following properties:

copyBackgroundSize Type: Boolean Default: false It will copy the background-size rule of same scope into the webp class rules if it’s true

replaceRemoteImage Type: Boolean Default: true It will add webp class when the url it’s with host(eg. url(//foo.com/image.png) or url(http://foo.com/image.png) or url(https://foo.com/image.png) ) if it’s true

cwebp_configurator Type: function(encoder)<> Default: null You can configure cwebp encoder according cwebp documentation

Источник