Guide to install Gulp on OSX 10.11 El Capitan


#1

It takes just a couple of minute to completely install Gulp into your Mac OS X 10.11 El Capitan.

Install Gulp globally

Run Terminal (Found in Applications/Utilities folder), then enter the following command line

npm install -g gulp

Install Gulp locally – package.json

Deal with local project, you have to setup 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 will generate 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…

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

Note: the last comma is removed

To make sure you are in your project directory and install gulp like, enter the following command line

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.11.1”
}
}

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

Thank coolestguidesontheplanet for this instruction.