Installing Gulp on macOS Ventura – Intro guide to Gulp

Installing Gulp on macOS Ventura, macOS Monterey 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.

sudo npm install gulp-cli -g

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

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

neilg@[~/Desktop]: npm init
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.
See `npm help json` for definitive documentation on these fields
and exactly what they do.
Use `npm install <pkg> --save` afterwards to install a package and
save it as a dependency in the package.json file.
Press ^C at any time to quit.
name: (Desktop) my_project
version: (1.0.0) 0.0.1
description: my project example
entry point: (index.js) 
test command: 
git repository: 
keywords: 
author: Neil Gee
license: (ISC) 
About to write to /Users/neilg/Desktop/package.json:
{
"name": "my_project"
"version": "0.0.1"
"description": "my project example"
"main": "index.js"
"scripts": 
"test": "echo \"Error: no test specified\" && exit 1
}
"author": "Neil Gee"
"license": "ISC
}

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…

{
 "name": "my_project",
 "version": "0.0.1",
 "description": "my project example",
 "author": "Neil Gee"
}

Note the last comma is removed.

Permissions Issue with package.json file

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

npm update check failed                  │
│           Try running with sudo or get access            │
│           to the local update config store via           │
│ sudo chown -R $USER:$(id -gn $USER) /Users/{username}/.config

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

sudo chown -R $USER:$(id -gn $USER) /Users/{username}/.config

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

npm install gulp --save-dev

Now our package.json file will be like so…

{
 "name": "test_project",
 "version": "1.0.0",
 "description": "test",
 "author": "Neil Gee",
 "devDependencies": {
 "gulp": "^3.9.1"
 }
}

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…

npm install browser-sync --save-dev

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:

{
 "name": "test_project",
 "version": "1.0.0",
 "description": "test",
 "author": "Neil Gee",
 "devDependencies": {
"gulp": "^3.9.1",
"browser-sync": "^2.26.0"
 }
}

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…

var gulp = require('gulp');

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…

var gulp = require('gulp');
var browserSync = require('browser-sync').create();

gulp.task('sync', function() {
 browserSync.init({
 proxy: "my_project.dev",
 files: "*.css,*.php,css/*css"
});
});

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

gulp sync

This guide just preps the environment and shows what you need to get started – there are many gulp plugins available – check to see what they can do and improve your workflow and how you set these up in your gulpfile.js file, many of the plugins give you working examples on how to set up the tasks.