Как установить gulp mac os

Installing Gulp on macOS BIg Sur – Intro guide to Gulp

Installing Gulp on macOS Big Sur, macOS Sierra and earlier OS versions requires Nodejs and npm (Node Package Manager), so get that installed first following the linked guide.

Gulp is an easier and slightly more modern javascript task runner than its sibling Grunt, which helps you automate numerous tasks in your workflow. You need to install Gulp both globally and locally in your project.

Install Gulp globally

Launch your Terminal app and install gulp globally.

macOS users need to use sudo to install gulp across all accounts.

Install Gulp locally – package.json

For a local project you need to set up a package.json file first to configure your Node/npm packages and dependencies. From the Terminal, change directory into your project folder and issue the command npm init to create the package.json file.

npm init helps create your package.json file, here you just follow the prompts:

So I have only added values for name, version, description and author and left the rest blank say OK and the file will be written out to your project folder – then you can then also remove some of the outputted blank fields in a text editor – so now giving us this…

Note the last comma is removed.

Permissions Issue with package.json file

You may get a permissions issue with the package.json file..

Just run the command below to fix – change to your username sans curly braces.

Save Dependencies

Once we have our json file in place we can install the local gulp package via the command line in our project which will write to our package.json file, so in the command line make sure you are in your project directory and install gulp like so

Now our package.json file will be like so…

To add further plugins, for instance lets install the live browser reloading tool BrowserSync. To install locally to your project use the following syntax in your Terminal commands…

The parameter –save-dev will save the package as a dependency to the project and write itself to the package.json file. Which will now be like so:

gulpfile.js

Our last configuration file required is a gulpfile.js which is what tells gulp what to do – the gulpfile.js has variables and tasks and at least has the variable for gulp itself – so create this file in the root of the project and add…

But this is not going to do much on it’s own, so with browsersync plugin installed I want to create a task that allows me to see a web project open in the browser and live reload when I change the CSS file, so now my gulpfile.js will look like this…

And I run this gulp task from the command line whilst in my project by using

Источник

Как правильно установить node.js и gulp.js на mac (последняя osx)?

При запуске команды npm install —global gulp выдаёт такое:

Simonz$ npm install —global gulp
npm ERR! tar.unpack untar error /Users/Simonz/.npm/gulp/3.8.11/package.tgz
npm ERR! Darwin 14.3.0
npm ERR! argv «node» «/usr/local/bin/npm» «install» «—global» «gulp»
npm ERR! node v0.12.2
npm ERR! npm v2.7.4
npm ERR! path /usr/local/lib/node_modules/gulp
npm ERR! code EACCES
npm ERR! errno -13

npm ERR! Error: EACCES, mkdir ‘/usr/local/lib/node_modules/gulp’
npm ERR! at Error (native)
npm ERR! < [Error: EACCES, mkdir '/usr/local/lib/node_modules/gulp']
npm ERR! errno: -13,
npm ERR! code: ‘EACCES’,
npm ERR! path: ‘/usr/local/lib/node_modules/gulp’,
npm ERR! fstream_type: ‘Directory’,
npm ERR! fstream_path: ‘/usr/local/lib/node_modules/gulp’,
npm ERR! fstream_class: ‘DirWriter’,
npm ERR! fstream_stack:
npm ERR! [ ‘/usr/local/lib/node_modules/npm/node_modules/fstream/lib/dir-writer.js:36:23’,
npm ERR! ‘/usr/local/lib/node_modules/npm/node_modules/mkdirp/index.js:46:53’,
npm ERR! ‘FSReqWrap.oncomplete (fs.js:95:15)’ ] >
npm ERR!
npm ERR! Please try running this command again as root/Administrator.

npm ERR! Please include the following file with any support request:
npm ERR! /Users/Simonz/npm-debug.log
Separatist:

В чём проблема не понять, подскажите пожалуйста как правильно установить.

Источник

WEB-Верстка

SASS — CSS препроцессор (Часть 2-я) — Gulp

И так: NODE.JS — УСТАНОВЛЕН!

Теперь переходим к установке Gulp

В пути к папке проекта — НЕ ДОЛЖНО БЫТЬ РУССКОЯЗЫЧНЫХ ПАПОК!

Откроем терминал
в папке нашего рабочего проекта:

Далее пишим команду:

Идет установка Gulp:

А для пользователей MAC прийдется выполнить команду с правами СУПЕР-ПОЛЬЗОВАТЕЛЯ:

И ТАК, УСТАНОВКА Gulp на MAC:

Ввести ниже указанную команду: sudo npm i gulp -g

Возможно придется поставить курсор в ключик)

И с 1-раза может не получиться, но со 2-й попытки, териминал «принял» админский пароль:

Установка Gulp на MAC — ЗАВЕРШЕНА!

Далее выполним инициализацию Gulp

Набираем ( уже БЕЗ пароля и без sudo )

myproject> npm init

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

Далее, собственно установим Gulp

Но бывает случается такой момент когда появляется такое сообщение — тогда делаем следующее:

ПОЛУЧИЛИ СООБЩЕНИЕ (Сразу с подсказской)

Копируем эту подсказку и вставляем как команду: (указав свой логин учетной записи от MAC)

Пошла установка Gulp

Установка ЗАВЕРШЕНА!

И чтобы открывать Terminal — из любой папки делаем следующие настройки:

И таким образом уже открываем Terminal:

Можно пройти в папку и посмотреть как выглядит Gulp

А здесь рассмотрим, как быстро создавать текстовые файлы в паке на MAC.

Качаем программку iMakerTxtFile

Например здесь:
https://sageleo.com/wp-content/uploads/2017/05/iMakerTxtFile.zip

Распаковываем в папке и далее один ньюанс:

Для того чтобы перенести Значек программы ( иконку ) на панель папки — необходимо Разрешить использование сторонней программы в настройках самого MAC:

Разрешим нужную программу:

И затем, перетащим иконку программы на панель папки удерживая (Comand) Cmd

Теперь для создания текстового файла — кликнуть на иконке (на панели папки) и получим окно создания файла:

Готово! Работает! Файлы создаются!

Далее возвращаемся к инструкции для Windows.

Создадим файл gulpfile.js

в папке myproject

И наберем в нем код:

var gulp = require ( ‘gulp’ );

gulp. task (‘ mytask ‘, function () <

console . log (‘ Сообщение ура! ‘)

> );

Затем перейдем в Terminal

и выполним наш таск: mytast

НЕ ЗАБЫВАЕМ УСТАНОВИТЬ Gulp sass в Terminal MAC.

Командой: npm i gulp-sass —save-dev

УСТАНОВИЛИ SASS!

Не забываем также установить SASS для Sublime Text

УСТАНОВИЛИ SASS для Sublime Text!

Проверим работу сниппета для Sass в Sublime Text: — Проверили Работает!

sass-css-part-3

Инициализация Gulp

Для того что бы начать проект — нам нужно его инициализировать:

Эта команда позволяет инициализировать и создать базовый стартовый файл манифеста для нашего проекта.

Далее нужно ответить на несколько вопросов:

извините, имя больше не может содержать заглавные буквы

Поэтому укажем имя только низкими буквами :

Далее:

Далее просто:

Тоже просто:

У нас нет Репозитория — поэтому тоже:

Тоже просто:

Автора можем указать:

И жмем:

Оставляем и :

Далее если все правельно — пишим «YES»

и жмем :

И должен появиться файлик:

package.json

Давайте его откроем:

Дальше идем)

Файл package.json — является манифестом проекта.

Кроме того он хранит информацию об используемых пакетах в нашем проекте.

Например если устанавливать Gulp c другим пакетом —

gulp save dev — то эта версия, автоматически добавиться в наш файлик package.json

— Это позволяет быстро разворачивать проект, с учетом уже имеющегося package.json

и устанавливать необходимые модули с зависимостями, которые прописываются в package.json новых проектов.

Далее установим наш проект Gulp!
Терминал — не закрывали — в нем и продолжаем:

Источник