Не удалось найти файл объявления модуля gulp notify
Обновлено: 07.07.2024
В статье рассмотрены три модуля для работы под Gulp - gulp-rename , gulp-notify , gulp-autoprefixer .
Все три модуля слишком маленькие и слишком простые, чтобы их рассматривать в отдельности. Все приведенные в статье примеры являются базовыми и служат задаче показать принцип работы каждого из модулей.
Подготовка проекта
Подготовим проект, создав его базовую основу. Первым файлом создадим файл package.json и наполним его таким содержимым:
Затем установим локально Gulp.js и укажем npm , чтобы он внес этот пакет в качестве зависимостей в файл package.json :
Создаем js-файл, в котором будем прописывать задачи для Gulp:
Основа для тестирования отдельных модулей готова.
Gulp-rename - переименование файлов
Задача модуля gulp-rename предназначена для одной маленькой цели - переименования файлов. Установим модуль с указанием зависимостей:
И создадим задачу в файле gulpfile.js для установленного модуля gulp-rename :
В задаче под именем rename для Gulp “говориться” следующее: найти файл style.css - gulp.src('css/style.css') ; переименовать его в имя pretty_styles - .pipe(rename('pretty_styles.css')) ; переименованный файл положить в папку по пути build/css/ - .pipe(gulp.dest('build/css/')) .
Запускаю задачу rename в консоли и вижу, что процесс прошел успешно:
Проверяю, “положил” ли Gulp переименованный файл pretty_styles.css по пути build/css/ :
Да, все верно, файл pretty_styles.css находиться там, где он и должен находиться.
Рассмотренный выше пример очень прост. Более сложные и интересные возможности модуля gulp-rename показаны на его официальной странице - gulp-rename. А именно - возможности переименования с помощью функций или с помощью префиксов\суффиксов.
Gulp-notify - уведомление о событиях
Установка модуля gulp-notify выполняется как обычно:
Затем создаю задачу notify , которая будет отслеживать все изменения в файле css/style.css . Задача информирования об изменениях подразумевает ее использование в фоновом режиме.
Поэтому, создаю еще одну задачу для мониторинга - watch , которую помещаю в дефолтную задачу default . В общем случае файл gulpgile.js будет выглядеть следующим образом:
В консоли запускаю Gulp с дефолтной задачей default :
Теперь вношу в файл css/style.css изменения и сохраняю их. На Рабочем столе мгновенно появляется всплывающее окно с уведомлением о внесенных в файл css/style.css изменениях. Не знаю, как в других системах, но на Linux Mint 17 Cinnamon это окошко выглядит очень симпатично.
На странице GitHub автора модуля представлены более интересные примеры создания и использования gulp-notify .
Gulp-autoprefixer - браузерные префиксы
Интересный модуль gulp-autoprefixer для управления браузерными префиксами в проекте. Задача у него - не просто устанавливать префиксы для тех CSS3-свойств, которые нуждаюся в этом на данный момент (другими словами - для включения их поддержки в браузерах).
С помощью gulp-autoprefixer можно управлять “глубиной” версий браузеров, которые должны поддерживать работу конкретного проекта. Другими словами, можно указать модулю gulp-autoprefixer , что необходимо отслеживать поддержку префиксов только в двух последних версиях каждого (из всех существующих) браузера - last 2 versions (кстати, это значение по умолчанию для данного модуля).
Или же учитывать только две последние версии браузера Google Chrome - last 2 Chrome versions . При задании префиксов можно учитывать глобальную статистику использования браузера - > 5% (если брузер используют больше 5% населения Интернет).
Модуль gulp-autoprefixer использует собственные имена для браузеров при задании параматров работы своей работы. С полным списком еще более интересных возможностей для задания выборки браузеров можно (и нужно) ознакомиться на странице GitHub.
Работа модуля gulp-autoprefixer основана на известном ресурсе Can I Use. Именно оттуда он берет инормацию о поддержке браузерами того или иного CSS3-свойства на данный момент. Кстати, известный фреймворк Compass также основывается на Can I Use при работе со своими миксинами (mixin).
Помимо этого, модуль gulp-autoprefixer умеет красиво форматировать CSS-свойства с браузерными префиксами в виде визульного каскада:
За такую возможность отвечает параметр cascade , который включен по умолчанию в данном модуле. Вообще, по умолчанию модуль gulp-autoprefixer имеет такие параметры в виде массива (array): > 1%, last 2 versions, Firefox ESR, Opera 12.1 .
Вступление было достаточно долгим и подробным - это потому, что модуль gulp-autoprefixer интересный и нужный. Приступаю к его установке:
Создаю задачу autoprefixer с описанием того, что нужно отслеживать изменения в файле css/style.css и при добавлении в него CSS3-свойств преобразовывать их в свойства с браузерными префиксами. При этом учитывать только две последние версии браузеров и результат помещать по пути build/css/ .
Внесу в файл css/style.css CSS3-свойство transform , которое заведомо нужно использовать с префиксами (для этого я заранее “подглядел” его на “Can I Use”):
Запускаю задачу autoprefixer и смотрю результат:
Все четко - под условие “не ниже второй версии” попали только браузеры на движке Webkit - можно свериться здесь.
Можно немного “углубить” условие и “опуститься” до третьей версии всех браузеров:
… и посмотреть результат:
Вывод в build/css/style.css красивый благодаря cascade , который можно и отключить, установив cascade: false .
TypeScript - размеченные объединения
> Пользовательское объединение типов - что это и как можно использоватьПомимо объединения **примитивных** типов данных (например):
Но gulp-util присутствует (в локальной папке приложения) в:
Есть идеи, что может быть причиной?
ОБНОВИТЬ
В более поздних версиях нет необходимости вручную устанавливать gulp-util.
Если вы все еще сталкиваетесь с этой проблемой, попробуйте переустановить локальные пакеты вашего проекта:
УСТАРЕВШИЙ ОТВЕТ
Вам также необходимо установить gulp-util:
Из глотка документов - начало работы (3.5) :
и если вы на Windows, вы можете использовать rimraf через npm install -g rimraf Просто нашел этот вечер, у меня было 2 установки в минуту. В окнах в папке users / name / appdata / roaming я удалил node_modules и npm, а также npm-кеш. Перед удалением у меня был npm --version 3.x, теперь он показывает npm - версия 5.6.0 . может быть проблемой для других. На Ubuntu 17.10 так rm -rf node_modules и npm install не работал. Вместо этого мне пришлось преформовать npm install gulp -g . Работает как шарм!Установите gulp и gulp-util в вашем проекте devDependencies
Если у вас есть package.json, вы можете установить все текущие зависимости проекта, используя:
Я не знаю, почему в моем случае это не сработало. Мне пришлось установить один за другим отсутствующие пакеты. А потом сделай сборку. Weird. @LincolnPiress Я сделал то же самое примерно на полпути. Но их было много. Я побежал, npm install node-sass и это построено.Любой ответ не помог в моем случае. В конечном итоге помогло удаление bower и gulp (я использую их обоих в своем проекте):
После этого я установил их снова:
Теперь это работает просто отлично.
Это исправило постоянную проблему с gulp-util, которая не нашла through2, несмотря на то, что он присутствовал в локальной папке node_modules, и повторные попытки 'rm -rf node_module'. Удаление и переустановка глобального глотка сделали свое дело. У меня была проблема с Windows, и единственное исправление было это, но прежде чем мне нужно было восстановить установку узла, используя файл Это был единственный ответ, который работал для меня тоже. (Я должен был добавить, sudo хотя)Попробуйте установить отсутствующий модуль.
Вы должны установить их как devDependencies:
- gulp-util
- gulp-load-plugins
Затем вы можете использовать их так:
Пользователь Linux Ubuntu 18:04 здесь. Я перепробовал все решения на этой доске до настоящего времени. Несмотря на то, что я прочитал выше в принятом ответе, что «В более поздних версиях нет необходимости устанавливать gulp-util вручную». Это была вещь, которая работала для меня. (. может быть, я нахожусь на Ubuntu? Я не знаю.)
Напомним, что я продолжал получать ошибку « not find module 'gulp-util' », когда просто проверял, был ли установлен gulp, запустив:
. опять появляется ошибка "gulp-util" .
Итак, я следовал совету npm install [имя пакета], указанному выше, но в итоге получил несколько других пакетов, которые также нужно было установить. И у одной была проблема уже существующей, и я не был уверен, как ее заменить. . Я добавлю здесь все команды package / install, которые мне пришлось использовать, просто для справки на случай, если кто-то еще столкнется с этой проблемой:
(без --force в моей системе я получил ошибку: «EEXIST: файл уже существует, символическая ссылка». --force не рекомендуется, но идите другим путем.)
И теперь gulp --version наконец-то показывает: CLI version 3.9.1 Local version 3.9.1
Вероятно, это связано с проблемами с разрешениями при установке npm:
На этой странице обсуждается общее устранение этих проблем с npm. Сначала выполните эти шаги.
Эта проблема с GitHub описывает кого-то, кто решает точно такую же проблему.
Derek Brown 21 Окт 2017 в 00:44
Вы можете попробовать эту команду
Dushan 4 Дек 2019 в 05:21
sudo rm -rf node_modules/
Для флага unsafe-perm установлено значение true, чтобы подавить переключение UID / GID (идентификатора пользователя / идентификатора группы) при запуске сценариев пакетов. Для флага явно задано значение false, чтобы не устанавливать права пользователя без полномочий root. По умолчанию его значение равно false если работает как root и true в противном случае. Если при установке node-saas возникает ошибка EACCESS, то при установке пакета через sudo и установленным в true флагом unsafe-perm пакет будет установлен.
Hadi Mir 17 Окт 2019 в 06:24
Я столкнулся с той же проблемой в системе MacOS. Я удалил папку node_modules и повторно использовал npm install без sudo, чтобы успешно решить эту проблему.
GuoGuang0536 18 Май 2019 в 09:34
Nicolas Hersant 10 Июл 2018 в 08:47
Я решил запустить следующее
sudo npm cache clean -f sudo npm install -g n sudo n stable npm rebuild node-sass
ivan 7 Авг 2018 в 18:29
Попробуйте следующее, если вы используете Ubuntu:
sudo chown -R $(whoami)
Не используйте sudo потом
Sachi Cortes 18 Апр 2018 в 08:07
Эта проблема обычно возникает, если вы запускаете npm install с помощью sudo ранее. Удалите папку node_modules и запустите установку npm без sudo
Amit Gupta 18 Апр 2018 в 06:16
Что такое Sass
Зачем нужен Sass
Чтобы понять, зачем нужен Sass, перечислим его некоторые возможности:
- Sass позволяет вкладывать правила CSS друг в друга.
- Вложенность свойств.
- Использование переменных.
- Поддержка арифметических операций.
- Операции с цветами.
- Возможность импортировать в sass файл sass, scss и css файлы.
- Использование миксинов.
- И многое другое.
Если коротко зачем нужен Sass: он ускоряет и упрощает процесс разработки.
Как использовать Sass
Существуют разные способы начать использовать Sass:
- C помощью приложений (Koala, CodeKit, Compass и другие).
- C помощью командной строки.
- Используя таск-менеджеры.
- Простым конвертированием Sass в CSS с помощью онлайн-сервисов.
Рассмотрим использование Sass для таск-менеджера Gulp. Перед тем как начать установку, желательно ознакомиться с основами Gulp.
Установка Gulp
npm i gulp-cli -g
npm
i
-g
. Ждем, пока от из сети подтянет и установит нужные пакеты.
Теперь мы можем вновь посмотреть их командой
. Пакетов будет очень много.Дело в том. что все пакеты зависимы друг от друга и они загружаются в своих зависимостях. Если вы хотите посмотреть только то, что устанавливали сами ( на нулевом уровне вложенности), то
Теперь если ввести команду
, то можно проверить наличие локальных версий. У нас он напишет, что их не найдено.
Создаем папку проекта на диске (например C://). В КС-node переходим в эту папку в корневую директорию
cd путь к папке вашего пректа
Внимание! Для корректной работы локально нужно устанавливать туже самую версию, что и глобально!
У меня глобально стоит версия 3.9.1 и поэтому я устанавливаю локально её же:
npm install gulp@3.9.1
В папке нашего проекта появится папка node_modules, куда и закачается наш локальный gulp
Это плагин для gulp, который позволяет делать компиляцию файлов в обычный css.
Посмотреть что установлено
Теперь просто пишем
. Мы создаем package.json для того, чтобы в дальнейшем инициализировать наше приложение в других папках.
Формально, у нас почти все готово к работе. Остается создать gulpfile.js
Мы его создаем в корне нашего проекта и в этом файле нам нужно подключить наши пакеты:
выведет в консоль something это говорит о том. что gulp работает!
Если задача не default, а например sass, то вызвать нужно так
Более подробно об установке и настройке я писал в постах:
Как разрешить в Windows выполнение скриптов PowerShell
Проблема заключается в том, что политика выполнения скриптов запрещает выполнять эти самые скрипты. Узнать текущее значение политики можно командой:
Для своей системы я получил значение:
Чтобы разрешить выполнение файлов с расширением .ps1, то есть чтобы запустить скрипт PowerShell в Windows, выполните команду:
Когда поступит запрос, введите Y.
Данные команды нужно выполнять в PowerShell, а не в CMD.
Короче:
Вы должны добавить %NODE_PATH% к системной переменной Path, если другие ответы не работают.
Маски для создания путей для источника файлов, на примерах
app/sass/*.sass – все файлы в конкретной папке с расширением sass
app/sass/**/*.sass – все файлы с расширением sass, которые находятся в app/sass/ независимо от уровня вложенности, во всех подпапках…. все все все короче.
!app/sass/main.sass – восклицательный знак в начале, это исключение файла.
return gulp.scr([‘!app/sass/main.sass’ , ‘app/sass/**/*.sass’]) – выбираются все файлы sass, кроме main.sass. Здесь появляются квадратные скобки, это массив. Все выборки файлов записываются в ковычках и через запятую.
app/sass/*.+(scss|sass) – все файлы с расширением scss и sass
Установка, подключение и настройка gulp-sass
Для установки плагина gulp-sass в наш проект, откроем командную строку в папке проекта. Введём следующую команду:
Плагин будет установлен в папку node_modules и будет добавлена соответствующая запись в файле package.json . После успешной установки нам нужно подключить наш пакет в файле gulpfile.js .
Теперь создадим задачу (таск) sass .
В скобках sass(<>) можно задавать дополнительные настройки.
Выполним наш созданный таск (задачу) gulp-sass . В командной строке введём gulp sass.
Gulp автоматически преобразовал SASS в CSS и создал файл styles.css .
Gulp Sourcemaps
Добавим поддержку source maps для Gulp. Это специальная структура данных, которая при преобразовании данных отражает что было и что стало, эта информация записывается либо в итоговом файле с расширением .map , либо в внутри исходника.
Таким образом, во время разработки, мы можем смотреть исходный файл sass , а не скомпилированный css . Становится понятным откуда какая строка кода берется.
Установка плагина gulp-sourcemaps.
Добавим gulp-sourcemaps в gulpfile.js .
Стартовый шаблон gulp-dev
На данный момент, не будем углубляться во все подробности работы Gulp.
Вместо этого покажу свой шаблон Gulp, расскажу его возможности и как им пользоваться.
Gulp notify
На данный момент, обработку ошибок в sass-файле мы ловим в следующей строке.
Данный способ отображает ошибки в sass только в терминале (консоли). Чтобы при совершении ошибки мы были опративно уведомлены, установим плагин gulp-notify .
Это позволит получать следующие уведомления на рабочем столе.
Как видите это очень удобно. Сразу видно в каком файле и на какой строке была совершена ошибка.
Я работаю с Laravel 5 (Elixir) и усадьбой v2.5 в Ubuntu 14.10. Когда я набрал gulp и нажал enter в homestead ssh, я обнаружил следующую ошибку:
Что я должен сделать, чтобы решить эту проблему?
2 ответа
Вышеописанные ошибки возникают, если я выполняю команду gulp. Я не знаю, что происходит в моем коде, когда я выполняю команду gulp. module.js :339 throw err; ^ Error: Cannot find module 'through2' at Function.Module._resolveFilename (module.js:337:15) at Function.Module._load (module.js:287:25) at.
Это случилось и со мной с незаконченной предыдущей установкой.
Лучшим решением, которое я нашел, было просто удалить папку node_modules/ внутри моего проекта и снова запустить [sudo] npm install .
Надеюсь, это поможет кому-то еще, с уважением!
Примечание об обновлении: "sudo" не требуется, лучше всего решить проблему с разрешениями в npm, следуя этому руководству
Создайте новый проект и запустите sudo npm install.
Похожие вопросы:
Я пытаюсь настроить Gulp в своей установке Laravel 5.1. Затем я запустил команду npm install , как указано в документации Laravel, и это сработало нормально. Однако теперь, когда я запускаю команду.
Я пытаюсь использовать Laravel elixir для компиляции простого файла sass app.scss , который находится в моем каталоге resources > assets > sass . У меня установлен node, gulp и elixir, и мой.
Вышеописанные ошибки возникают, если я выполняю команду gulp. Я не знаю, что происходит в моем коде, когда я выполняю команду gulp. module.js :339 throw err; ^ Error: Cannot find module 'through2'.
У меня gulpfile.js с содержанием var gulp = require('gulp');//this is working gulp.task('default', function() < >);//this is working var elixir = require('laravel-elixir');//this is NOT working.
Я удалил папку node modules и установил npm с помощью команды npm install . Мой gulpfile.js также идеален, потому что другие люди прекрасно работают с этой конфигурацией, даже я сделал это с этой.
Я пытаюсь разделить свои elixir задач на разные Gulp задач, так что я могу просто запустить подмножество из них. Вот мой gulpfile.js : var gulp = require('gulp'), elixir = require('laravel-elixir');.
Мой Gulp работал нормально, пока я не установил browser-sync npm install browser-sync gulp --save-dev Затем я начал получать эту ошибку: Ошибка: не удается найти модуль 'lru-cache' Который я решил.
- npm install gulp -g
- В моей папке приложения: npm install gulp --save-dev
- Я создаю gulpfile.js файл.
Но gulp-util присутствует (в локальной папке приложения) в:
Есть идеи, что может быть причиной?
ОБНОВИТЬ
Начиная с более поздних версий, нет необходимости вручную устанавливать gulp-util.
Проверьте новую страницу начала работы.
Если проблема не исчезла, попробуйте переустановить локальные пакеты проекта:
УСТАРЕВШИЙ ОТВЕТ
Вам также необходимо установить gulp-util:
Из gulp docs - начало работы (3.5):
Установите gulp и глоток-утилита в твоем проект devDependencies
Если у вас есть package.json, вы можете установить все текущие зависимости проекта, используя:
- 2 Не знаю, почему в моем случае это не сработало. Пришлось устанавливать по одному из недостающих пакетов. А затем сделайте сборку. Странно.
- @LincolnPiress Я сделал то же самое примерно на полпути. Но их было много. Я побежал npm install node-sass и его построили.
Никакой ответ в моем случае не помог. Что в конечном итоге помогло, так это удаление bower а также gulp (Я использую их оба в своем проекте):
После этого я их снова установил:
Теперь все работает нормально.
Итак, я последовал приведенному выше совету npm install [package name], но в итоге получил несколько других пакетов, которые также необходимо было установить. И одна проблема уже существовала, и я не знал, как ее заменить. . Я помещу сюда все пакеты / команды установки, которые мне пришлось использовать, просто в качестве справки на случай, если кто-то еще столкнется с этой проблемой:
И теперь gulp --version, наконец, показывает: CLI версии 3.9.1 Локальная версия 3.9.1
Попробуйте установить недостающий модуль.
Вы должны установить их как devDependencies:
- gulp-util
- gulp-load-plugins
Затем вы можете использовать их так:
Это решит все проблемы с глотком
В большинстве случаев проблему решает удаление всех пакетов узлов и их повторная установка.
Но в моем случае папка node_modules не имеет разрешения на запись.
Такая же проблема здесь, и все, что я пробовал после поиска, не сработало. Пока не увидел где-нибудь замечание о глобальных или локальных установках. Глядя в:
C: \ Users \ YourName \ AppData \ Roaming \ npm \ gulp
Я действительно нашел устаревшую версию. Итак, я переустановил gulp с помощью:
Это волшебным образом решило мою проблему.
У меня была такая же проблема, хотя загружаемый модуль был другим. Единственное решение проблемы - еще раз выполнить следующую команду:
Читайте также: