Как удалить gulp с компьютера
Обновлено: 06.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 поэтому можно просто проигнорировать.
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
`
На этапе запуска 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 .
Сначала делаю 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.
Читайте также: