words | Gulp! Sass and browser reload

Gulp cup and straw logo

Make the browser auto reload when we make changes to our HTML and Sass, which we'll auto-prefix and minify at the same time

When I refer to "the command line", i'm using Terminal (Mac OS X)

Before we begin

We need to check two things

1. Do we have Node installed on our machine?

Gulp uses Node.js, so before we start our project let's first check to see if we have Node installed on our machine

Open a new Terminal window and find out. Type this command

node -v

-v is for version. If no version is found, we need to download the Node.js installer for our machine from the nodejs.org website.

Once we've downloaded and completed the install procedure, let's run the node -v command again and check we now have Node installed.

2. Do we have Gulp installed on our machine?

Let's check! Type this command

gulp -v

If no version is found, let's install Gulp globally. We can use the command line to do this, so in Terminal type this command

npm install gulp -g

Once Terminal has completed the Gulp install, we can run the gulp -v command again to double check we now have Gulp installed.

Everything o.k? Let's go

We have two walkthroughs to choose from. Pick one!

The detailed walkthrough or the no waffle walkthrough

The no waffle walkthrough is Terminal commands and copy/paste code only

The Detailed Walkthrough

The detailed walkthrough is as detailed as I can make it. I'm learning, too. Every step is deconstructed

Part 1 Setting up our first Gulp project directory

Part 2 Write tasks inside the gruntfile.js file

  • Set-up the gulpfile.js file
  • Write a Sass task
  • Run Gulp!
  • Do a little dance