Gulp install 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

Источник

GulpJS — фантастически быстрый сборщик проектов

Gulp.js это потоковый сборщик проектов на JS. Он использует Stream и действительно является очень быстрым. Для примера у меня есть проект где около тысячи stylus файлов, GruntJS нужно примерно 2.5 секунды на сборку и 2 секунды на обработку autoprefixer’ом. Gulp все это делает за 0.5 секунды выигрывая у GruntJS минимум в 4 раза.

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

В этой статье будет больше практики, мы соберем среду разработки фронтенда используя Jade и Stylus, запустим локальный сервер и подключим Livereload. Проект я выложил на Github, экспериментируйте.

Установка Gulp

У вас должен быть установлен Node.JS и npm.
Создадим директорию проекта, создадим структуру каталогов и установим Gulp и необходимые плагины.

Струтура проекта:

Установка:

В корне проекта есть файл конфигурации gulpfile.js его и будем редактировать.

Иницилизируем плагины:

Задачи:

Теперь создадим первую задачу

В Gulp мы работаем с потоком, поэтому получаем данные из gulp.src и поточно обрабатываем их.

Для комфортной разработки создадим локальный сервер

Необходимые нам выше задачи предназначены для разработки и конечно хочется отслеживать изменения файлов и иметь на сервере Livereload
Для этого создадим задачу ‘watch’.

Теперь можно запустить наш проект и посмотреть, что получилось.

Сервер доступен по адресу localhost:9000 Мы создали среду для веб-разработке проектов с помощью Stylus и Jade с Livereload. Теперь нужно собрать оптимизированный проект. Для этого создадим задачу ‘build’

Запускаем и получаем готовый проект в папке build

Попробуйте GulpJS и начните уже использовать по-настоящему быстрые вещи в своих проектах.

Источник

Как правильно установить 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:

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

Источник

Gulp command not found after install

I installed gulp(globally) and it looks like it worked because it ran this code:

But when I type gulp it says -bash: gulp: command not found

Any idea what’s going on?

12 Answers 12

Turns out that npm was installed in the wrong directory so I had to change the “npm config prefix” by running this code:

Then I reinstalled gulp globally (with the -g param) and it worked properly.

Not sure why the question was down-voted, but I had the same issue and following the blog post recommended solve the issue. One thing I should add is that in my case, once I ran:

I confirmed the npm root -g was pointing to /usr/local/lib/node_modules/npm , but in order to install gulp in /usr/local/lib/node_modules , I had to use sudo :

sudo npm install gulp -g

If you’re using tcsh (which is my default shell on Mac OS X), you probably just need to type rehash into the shell just after the install completes:

followed immediately by:

Otherwise, if this is your very first time installing gulp , your shell may not recognize that there’s a new executable installed — so you either need to start a new shell, or type rehash in the current shell.

(This is basically a one-time thing for each command you install globally.)

I realize that this is an old thread, but for Future-Me, and posterity, I figured I should add my two-cents around the «running npm as sudo» discussion. Disclaimer: I do not use Windows. These steps have only been proven on non-windows machines, both virtual and physical.

You can avoid the need to use sudo by changing the permission to npm’s default directory.

How to: change permissions in order to run npm without sudo

Step 1: Find out where npm’s default directory is.

• To do this, open your terminal and run:
  npm config get prefix

Step 2: Proceed, based on the output of that command:

• Scenario One: npm’s default directory is /usr/local
  For most users, your output will show that npm’s default directory is /usr/local, in which case you can skip to step 4 to update the permissions for the directory.
• Scenario Two: npm’s default directory is /usr or /Users/YOURUSERNAME/node_modules or /Something/Else/FishyLooking
  If you find that npm’s default directory is not /usr/local, but is instead something you can’t explain or looks fishy, you should go to step 3 to change the default directory for npm, or you risk messing up your permissions on a much larger scale.

Step 3: Change npm’s default directory:

• There are a couple of ways to go about this, including creating a directory specifically for global installations and then adding that directory to your $PATH, but since /usr/local is probably already in your path, I think it’s simpler to just change npm’s default directory to that. Like so: npm config set prefix /usr/local
  • For more info on the other approaches I mentioned, see the npm docs here.

Step 4: Update the permissions on npm’s default directory:

• Once you’ve verified that npm’s default directory is in a sensible location, you can update the permissions on it using the command:
  sudo chown -R $(whoami) $(npm config get prefix)/

Now you should be able to run npm without sudo . Note: You may need to restart your terminal in order for these changes to take effect.

Источник

Как установить Gulp4?

Как установить Gulp4 ?
$ npm rm -g gulp (удалил глобальный галп)
$ npm install -g gulp-cli (установил глобально cli)
$ gulp -v
CLI version 2.0.1
$ npm uninstall gulp —save-dev
$ npm install ‘gulpjs/gulp.git#4.0’ —save-dev
После этого сообщение
PS D:\Site layout\_start_project\starting template gulp4> npm uninstall gulp —save-dev
npm WARN newdecline@1.0.0 No description
npm WARN newdecline@1.0.0 No repository field.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.4 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.4: wanted <"os":"darwin","arch":"any">(current: <"os":"win32","arch":"x64">)

removed 90 packages in 12.234s
PS D:\Site layout\_start_project\starting template gulp4> npm install ‘gulpjs/gulp.git#4.0’ —save-dev
npm ERR! code 1
npm ERR! Command failed: C:\Program Files\Git\cmd\git.EXE checkout 4.0
npm ERR! error: pathspec ‘4.0’ did not match any file(s) known to git.
npm ERR!

npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\newdecline\AppData\Roaming\npm-cache\_logs\2018-10-22T06_42_29_374Z-debug.log
PS D:\Site layout\_start_project\starting template gulp4> gulp -v
[11:42:45] CLI version 2.0.1
PS D:\Site layout\_start_project\starting template gulp4>

• Вопрос задан более двух лет назад
• 1585 просмотров

Добрый день!
После установки при проверке
> gulp -v
CLI version: 2.2.0
Local version: Unknown

Источник