Как удалить gulp глобально

How to uninstall Gulp CLI from NPM globally?

I have the following package installed globally via npm:

I have tried to uninstall it like so.

But it does not remove it. How can I get this package removed from my global location?

I’m on npm version 6.1.0

4 Answers 4

Thanks to R. Wanjohi I figured it out for my machine. I had to do the following to get the global version of gulp cli off my machine:

I was experiencing the same problem but when I used the following code, it worked:

You need to uninstall it globally (add the -g tag)

it’s pretty simple, to uninstall a global package run

The Overflow Blog

Linked

Related

Hot Network Questions

Subscribe to RSS

To subscribe to this RSS feed, copy and paste this URL into your RSS reader.

Site design / logo © 2023 Stack Exchange Inc; user contributions licensed under CC BY-SA . rev 2023.6.15.43497

By clicking “Accept all cookies”, you agree Stack Exchange can store cookies on your device and disclose information in accordance with our Cookie Policy.

Мультипроектный gulp-файл

Если на минуту забыть о скорости и удобстве конфигурации, то любой сборщик, будь то Grunt, Gulp, Broccoli, Brunch или даже Fly, — отличный вариант сэкономить кучу времени, конечно, если под вашу задачу уже написан соответствующий плагин. Однако, любой из представленных здесь сборщиков имеет один важный недостаток — количество файлов в каждом плагине и их суммарный вес. Последнее время мейнтейнеры плагинов начали хоть как-то уделять внимание оптимизации, но пока это лишь стрельба пушкой по воробьям, и серьезных изменений в ближайшее время точно не будет

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

Какие проблемы решаем?

Итак, предположим, что вы используете шаблон для быстрого старта разработки веб-приложения RWK, тогда количество файлов в директории только что созданного проекта — 18065, а их суммарный вес равен 82,8 МБ. При этом сама директория app, где хранятся less, js, jade и другие файлы, занимает 29,6 КБ. Пузатый случай.

Это не единичная проблема. Например, вы можете оценить вес популярного решения на Gulp — Web Starter Kit. Файлов в проекте — 29752, а вес — 134 МБ.

Так какие же проблемы будет пытаться решить эта статья? Бегло взглянем на список:

• Максимальное снижение количества файлов в проектах и, как следствие, их суммарного веса.
• Упрощение действий (один запущенный Gulp, обслуживающий несколько проектов, без необходимости переключения директорий).
• Меньше проблем от 260 символов для путей в Windows при удалении директории проекта.

Обо всех минусах поговорим в конце статьи, чтобы читатель сразу не закрыл вкладку 🙂

Какие проблемы получаем?

Как ни крути, а с управлением множества проектов в Gulp есть несколько проблем. Хотя, лучше будет сказать, что проблемы не у Gulp-а — проблема у нас. Отбросим все земное и окунемся в мир, в котором не все так просто:

Во-первых, у каждого проекта могут быть свои зависимости в менеджере Bower, или их может не быть вовсе. Здесь либо приходится мириться с тем, что все зависимости в bower_components общие для всех (непозволительный вариант), либо для каждого проекта придется иметь файл настроек, в котором будут указаны необходимые зависимости. Да, немного сложно, но об этом речь идет только тогда, когда у вас имеется задача автоматической вставки Bower-зависимостей в HTML-файлы.

Во-вторых, появляется новая развилка — BrowserSync, или смежные с ним более примитивные пакеты. Тут все проще, так как есть возможность создания общей для всех проектов директории, в которой будут доступны их билды (скомпилированные файлы).

В-третьих, придется разбираться с универстальностью задач, так как теперь просто так вызвать задачу нельзя (она не знает о контексте заранее). Получается, что мы не можем написать в консоли gulp jade или gulp build , так как Gulp не знает, о каком проекте идет речь. Придется приучаться к флажкам в консоли, например, gulp build —canonium или gulp jade —yellfy . Однако, этого можно избежать, назначив проект по умолчанию, например, используя сам gulp-файл или, на худой конец, маркер в названии директории (app-canonium—default).

Архитектура

Окей, имеем следующую архитектуру из трех проектов (canonium, yellfy):

Каждая директория — независимый проект, внутри которого находятся пользовательские файлы и служебный файл настроек settings.json . К сожалению, без файла настроек побороть идею автоматической вставки bower-зависимостей в HTML-файлы я не смог. Если вдруг кто-то предложит идею получше, то welcome to comments.

Директория templates содержит файлы HTML-препроцессора Jade (шаблоны) и, как не сложно догадаться, директория less — файлы CSS-препроцессора Less.

Gulpfile

Теперь поинтереснее — работа с gulp-файлом, в котором находится вся логика управления проектами. Отличаться от стандартного gulp-файла он будет лишь наличием функционала для определения текущего контекста и, если есть settings.json , то определением пользовательских настроек (о файле настроек речь в статье не идет).

Думаю, чтобы статья была актуальна и через год, нужно использовать Gulp 4.0.0-alpha.1, который имеет некоторые отличия от текущей версии Gulp 3.9.0. Чтобы установить альфа-версию, нужно сначала разобраться с консольной утилитой:

и, после установить Gulp локально в директорию проекта:

а также пару плагинов для примера:

Подсказка

Напомню, что флаг -D — это альтернатива флага —save-dev .

Шаг первый. Начальная точка

Для начала напишем gulp-файл, представив, что проект в директории один, и его директория — app-canonium. Тогда задача компиляции jade- и less-файлов будет иметь следующий вид:

Что за gulp.series() и gulp.parallel() , вероятно спросите вы? Ответ очевиден — читаем документацию. Наверное, это единственный правильный ответ, но все же:

— запускает указанные задачи максимально параллельно, при этом, если возникает ошибка, то все выполнение будет завершено. — запускает задачи последовательно в указанном порядке, при этом, если возникает ошибка, то все выполнение будет завершено.

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

Замечание

Полный листинг кода на этом этапе статьи можно посмотреть на Gist.

Шаг второй. Понимание контекста

Самое время научить наш gulp-файл разбираться с контекстами. Первым делом подключим модуль для работы с путями и определим переменную, в которой будем хранить текущий

Далее нужно избравиться от жестко прописанного пути до проекта в задачах. Просто добавим конкатенацию пути, полученного контекста и пути, взятого из структуры, описанной в разделе «Архитектура»:

Для задачи, компилирующей less-файлы все аналогично, поэтому копируем предыдущую версию и добавляем в нее path.join() , как и у задачи jade:

А теперь. объявим две небольшие вспомогательные функции, которые и будут определять контекст запуска задач:

Внимание

Пакет Chalk необходим лишь для раскрашивания выводимой в консоль информации.

В конце не забываем про прослушку события изменения файлов и задачу по умолчанию:

Здесь для удобства имеется вывод в консоль информации о том, что один из файлов (указывается имя проекта и путь до файла) был изменен. Это довольно удобная опция, учитывая, что можно работать сразу с двумя проектами.

Замечание

Полный листинг кода на этом этапе статьи можно посмотреть на Gist.

Шаг третий. Попытка запуска

Ниже на скриншоте приведена первая попытка запуска Gulp без указания цели (проекта). В этом случае сам файл определяет контекст на основе назначенного проекта по умолчанию и переданных аргументов при запуске, используя функцию getDefaultContext :

В случае, если указан аргумент, совпадающий с именем уже созданного проекта, например gulp —yellfy , то задача по умолчанию будет работать с проектом, находящимся в директории app-yellfy:

Если же изменить любой из файлов в созданных проектах ( templates/*.jade или less/*.less ), то задачи будут выполняться в том проекте, в котором было зафиксировано изменение:

Цель достигнута! Happy end 🙂

Выводы

О плюсах этого решения говорилось в начале статьи, поэтому самое время поговорить о получаемых минусах:

Универсальность

Универсальность — это круто, но при малейшей необходимости отклонения одного из проектов от общего функционала — наступают проблемы. Если один проект потребует изменений или добавления плагинов, то либо вы засоряете gulp-файл условиями, пишете поддержку модулей (загрузка настроек из директории проекта), либо изменения касаются всех проектов.

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

Теряется магия Gulp

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

Проблемы с Bower

В начале я говорил о том, как можно решить проблему с зависимостями менеджера Bower. Однако, представьте, что кроме команды bower i jquery —save-dev , вам нужно идти в директорию проекта и добавлять название пакета в файл настроек. Разумеется, что это будет необходимо, если лень написать скрипт, альтернативный вызову команды bower i и автоматически добавляющий устанавливаемую зависимость в указанные проекты (например, npm bower i jquery —canonium —other ).

Мое же мнение заключается в том, что такой подход имеет место быть, если вы верстальщик (на самом деле не важно) и используете один и тот же набор инструментов из проекта в проект.

В любом случае решать вам.

Делимся на оплату хостинга или кофе.
Чем чаще пью кофе, тем чаще пишу статьи.

команда gulp не работает

Я использую ubuntu 14.04 LTS, у меня есть nodejs (не node) и npm. Я установил gulp с помощью npm install gulp -g .

Но моя команда gulp не работает, она тихо запускает ничего!

6 ответов

Сегодня я столкнулся с той же проблемой на Ubuntu 14.04 LTS. После отладки я заметил, что случайно установил nodejs и node с помощью apt-get. После запуска

sudo apt-get remove node

проблема была исправлена.

Надеюсь, что это поможет.

Попробуйте связать исполняемый файл nodejs с node по тому же пути.

В зависимости от вашего исполняемого файла node. Вы можете узнать с помощью

С моей стороны, тот же симптом. То, чего не хватало, — это часть CLI gulp:

Когда у вас есть такая проблема, я советую переустановить модуль:

Эти команды удаляют все модули gulp в локальном и глобальном.

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

Вы можете установить gulp с помощью терминала ( npm install -g gulp ). Но лучшим способом является использование Synaptic Package Manager. Это старая программа установки Ubuntu. но теперь Ubuntu представляет Ubuntu Software Center.

Gulp для ускорения разработки

Что такое Gulp, зачем он нужен, его возможности, как установить и как начать использовать в разработке сайтов.

Gulp — что это такое и зачем он нужен

Gulp — это инструмент, позволяющий ускорить процесс web-разработки. Gulp автоматически выполняет все самые необходимые часто используемые задачи.

Возможности Gulp:

при сохранении кода
1. Использование препроцессоров для CSS (например, Sass), для JavaScript (например, CoffeeScript), для HTML (например, Pug)
2. Минификация CSS, JavaScript, HTML (уменьшение размера кода путём удаления ненужных символов и пробелов)
3. Соединение файлов в один (например, из пяти CSS файлов сделать один файл CSS)
4. Создание, удаление и переименование файлов и папок проекта
5. Автоматическое создание вендорных префиксов (-webkit, -moz, -o, -ms), чтобы старые версии браузеров поддерживали все css-свойства
6. Оптимизация изображений
7. И многое другое.

Как установить Gulp глобально в системе

Установка Gulp глобально необходима для того, чтобы была доступна команда gulp в окне команд / bash.

Для установки Gulp нам понадобится пакетный менеджер npm, который входит в состав Node.js. С помощью npm мы будем устанавливать пакеты в каталог node_modules. Если Node.js не установлен, то устанавливаем его. Далее можно начать установку Gulp.

Открыть командную строку и ввести следующий текст:

Коротко о том, что это значит:

• npm — это менеджер пакетов, с помощью которого будем устанавливать Gulp;
• i (install) — означает установка;
• gulp — это установка Gulp;
• -g (global) — установить глобально, а не в какую-то конкретную папку.

Таким образом Gulp установлен глобально. Приступим к установке Gulp в папку проекта.

Установка Gulp в папку проекта

Нам также необходимо установить Gulp локально в папке проекта, чтобы мы могли его подключать в gulpfile.js.

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

Создадим корневую папку для нашего проекта. Назовём, например, gulp-project. Зайдём в неё, зажмём клавишу shift и выберем в контекстном меню пункт Открыть PowerShell здесь или Открыть окно команд (и т.п.).

Выполним следующую команду для создания файла package.json:

Или чтобы быстро создать package.json используйте:

Этот файл будет содержать всю информацию о проекте (название, описание, автор и т.д.), а так же об используемых зависимостях в проекте.

Создание файла package.json с командой npm init:

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

Теперь мы можем установить Gulp в наш проект, а именно в папку gulp-project, которую мы создавали для нашего проекта.

Для установки Gulp в нашу папку воспользуемся командой:

Есть несколько отличий от установки Gulp глобально.

Здесь нет -g, т.е. Gulp будет устанавливаться локально в ту папку, в которой была открыта консоль. И появилась запись (флаг) —save-dev (-D), благодаря этому, пакет и его версия будет добавлен в package.json. Это нужно для последующей быстрой установки пакетов в других проектах путём копирования файла package.json.

После установки gulp мы увидим примерно следующее:

Мы установили Gulp в нашу папку gulp-project, в которой появилась новая папка node_modules. В ней и находится Gulp, а так же будут храниться все зависимости нашего проекта.

Так же если зайти в package.json , то увидим изменения:

Создание структуры Gulp проекта

Структура может быть практически любой. У нас будет следующая:

• gulp-project/
  • app/
    • assets/
      • css/
      • fonts/
      • img/
      • js/
      • libs/
      • sass/
      • app/ — рабочая папка проекта, в ней будут находиться все исходники — шрифты, изображения, css и js файлы;
      • dist/ — папка продакшена, в ней будет находиться готовый оптимизированный проект;
      • node_modules/ — папка с модулями и зависимостями;
      • gulpfile.js — файл конфигурации, в котором будем описывать все задачи Gulp;
      • package.json — файл, содержащий информацию о проекте (название, описание, автор, зависимости и т.д.)

      Как создавать задачи (таски) Gulp

      Создадим файл gulpfile.js и начнём его заполнение.

      Сначала нужно подключить Gulp к проекту, который находится в папке node_modules. Для этого напишем следующий код.

      В фигурных скобках мы укажем, все необходимые функции (методы), которые мы будем использовать.

      Теперь Gulp подключен к нашему проекту. Далее, мы будем подключать все необходимые пакеты (плагины) для Gulp.

      Задача (функция) в Gulp имеет следующий вид.

      Создадим простейшую задачу (функцию), которая будет выводить строку «Привет, Gulp!».

      output — имя функции (задачи), оно может быть любым.

      Выполнение задачи

      Чтобы запустить задачу, нужно выполнить команду gulp название_задачи. В нашем случае команда будет следующей.

      

      Запуск задачи Gulp по умолчанию

      Чтобы выполнять задачу output командой gulp, сделаем нашу функцию задачей по умолчанию, присвоив default.

      Пока что у нас только одна задача, которая выводит на экран Привет, Gulp!

      И теперь чтобы запустить нашу задачу, достаточно просто написать gulp.

      Это был самый простой пример работы Gulp. Для более сложных задач используются дополнительные методы.

      Методы gulp

      Мы уже видели в коде выше метод series — который позволяет выполнять перечисляемые задачи последовательно (следующая задача выполняется только после завершения предыдущей). Постепенно мы рассмотрим все методы Gulp.

      • src — какие файлы использовать для обработки в потоке;
      • dest — куда выгружать обработанные в потоке файлы (место назначения);
      • watch — наблюдение за изменениями в файлах;
      • series — вызов задач последовательно;
      • parallel — вызов задач параллельно.

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

      Gulp src / dest

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

      В данном примере мы видим работу двух методов:

      • src (source) — выбираем файлы для обработки;
      • dest (destination) — место назначения.

      В src мы использовали паттерн css/**.css для выбора всех css файлов внутри папки /assets/css/ (исключая файлы в подпапках, если таковые имеются).

      Примеры наиболее используемых паттернов для выбора файлов:

      • app/**/*.* — выбор всех файлов в папке app ;
      • app/js/**/*.js — выбор всех js файлов в папке js ;
      • app/**/*. — все css и js файлы в папке app ;
      • app//**/*. — все js и css-файлы в папках folder1 и folder2 ;
      • [«app/**/*.css», «app/**/*.js»] — получаем сначала все css, потом все js в папке app ;
      • [«app/**/*.*», «!app/**/*.js»] — все файлы в папке app , кроме js-файлов. (! — знак исключения).

      Gulp series / parallel

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

      В series мы перечисляем список задач для последовательного выполнения.

      Если нам не важно когда закончится та или иная задача, мы можем использовать метод parallel:

      В данном примере, сначала выполнится задача output, затем последовательно будут выполняться otherFunc и otherFunc2, и после их завершения начнёт своё выполнение задача otherFunc3.

      Gulp lastRun()

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

      Установка, подключение и использование плагинов Gulp

      Предположим, нам необходим установить плагин del — его используют для удаления файлов и папок.

      Это простой пример, но он хорошо демонстрирует последовательность действий.

      3. Создание задачи

      Просмотр списка задач Gulp

      Чтобы просмотреть задачи, которые вы можете выполнить, используйте следующую команду.

      Обновление плагинов (версий пакетов)

      Чтобы проверить наличие новых версий плагинов (пакетов) в package.json, установим npm-check. Данный плагин может не только находить устаревшие зависимости, но так же неправильные и неиспользованные.

      Использование — проверка актуальности версий пакетов.

      Обновление в автоматическом режиме.

      Или же можете самостоятельно обновить/установить/удалить нужный пакет следуя предложенным командам.

      Похожие публикации:

      1. Как в css подключить другой css
      2. Wide color gamut что это
      3. Как устранить проблемы с cors
      4. Как снизить нагрузку на цп в обс