Buy

Hey guys! Yes! In this tutorial, we get to play with Gulp! And that's got me excited for 3 reasons. First, it has an adorable name. Second, it's going to solve real problems - like processing SASS into CSS, minifying files and making you a delicious cup of coffee. Yes, I am lying about the coffee, unless your coffee machine has an API. Then I guess it would be possible. Ok, and third, Gulp is refreshing to work with... and just a lot of fun.

On the surface, Gulp is just a way to make command-line scripts. But its secret ingredient is a huge plugin community that'll give us free tools. The Gulp code you'll write will also be really hipster, since you'll write it all in Node.js. But remember, that just means it's JavaScript that's run on the server like PHP.

Laravel Elixir

The Laravel folks like Gulp so much, they created a tool on top of it called Elixir. If you check out its docs, Elixir lets you process SASS files, LESS files, CoffeeScript, minimize things and other frontend asset stuff. It's really cool.

The problem with Elixir is that, one, it's meant to only work with Laravel. And two, it's a little too magic for my taste. So in this tutorial, we're going to get all the sweetness of Elixir, but build it so that you understand what's going on. Then, you'll be able to bend and make it do whatever you want. Like, make you some coffee.

Installing the Gulp Command

So let's install our new toy: Gulp! Head to the terminal, and type sudo npm install -g gulp. The Node Package Manager - or npm - is the Composer of the Node.js world. If you get a "command not found", go install Node.js, it comes with npm and it's totally worth it.

This command will give us a gulp executable. Take this Node executable for a test-drive by typing gulp -v:

gulp -v

Bootstrapping package.json

We know that Composer works by reading a composer.json file and downloading everything into a vendor/ directory. Great news! npm does the same thing. It reads from a package.json and downloads everything into a node_modules directory. To get a shiny new package.json type npm init. Hit enter to get through the questions - they don't matter for us.

And there's the shiny new file I promised. Right now, it's boring:

15 lines package.json
{
"name": "gulp-knpu",
"version": "0.0.0",
"description": "",
"main": "index.js",
"dependencies": {
},
"devDependencies": {},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}

Installing Gulp into your Project

But now we can install Node packages into our project. The first, is gulp! So type, npm install gulp --save-dev. Wait, didn't we already install this? Well, the original command - with the -g gave us the global gulp executable. This time we're actually installing gulp into our project so other libraries can use it. Don't forget the --save-dev part. That says, "download this into my project AND add an entry into package.json for it."

Great! Flip back to your editor. The package.json has a new devDependencies section and we have a new node_modules directory with gulp in it:

17 lines package.json
{
"name": "gulp-knpu",
"version": "0.0.0",
... lines 4 - 7
"devDependencies": {
"gulp": "^3.8.11"
},
... lines 11 - 14
"license": "ISC"
}

In Composer terms, devDependencies is the require key in composer.json and node_modules is the vendor/ directory. Ok, we're rocking some Node!

Our First Gulp (Task)

Time to work. Create a new file - gulpfile.js - at the root of your project. Gulp looks for this. Next, flex your Node skills and say var gulp = require('gulp');. Below this, we'll define tasks. Let's create a task called default. The idea is simple. This says, when I execute the task called default, I want you to execute this function. Use the good ol' console.log to test things!

6 lines gulpfile.js
var gulp = require('gulp');
gulp.task('default', function() {
console.log('GULP THIS!');
});

Guys, these 5 lines are a fully-functional Gulp file. Head back to the command line and type gulp followed by the name of the task: default:

gulp default

It's alive! We can also just type gulp and get the same thing. The task called default is... well, the "default" task and runs if you don't include the name.

Now let's process some SASS files.

Leave a comment!

  • 2016-11-08 Victor Bocharsky

    Hey Terry,

    Yes, you can skip and install it locally, but it's not a much conveniently: you'll need to run Gulp with `$ ./node_modules/.bin/gulp` command. However in docs I see it should be installed globally, so probably the best practice is to do that ;)

    Cheers!

  • 2016-11-08 Victor Bocharsky

    Hey Terry,

    Yes, we are! But in these screencasts we have a light PhpStorm theme instead of usual dark one which is using in our latest tutorials ;)

    Cheers!

  • 2016-11-08 Terry Caliendo

    Are you using PHP Storm for your IDE in these videos?

  • 2016-11-08 Terry Caliendo

    Do you need to install gulp globally or can you skip that step and just install locally?

  • 2016-05-26 Dan Costinel

    My pleasure :)

  • 2016-05-25 weaverryan

    Thanks for sharing Dan - this looks very complete :)

  • 2016-05-23 Dan Costinel

    For me it didn't quite worked for the first time. That's maybe because I didn't had nodejs, npm, ruby and sass installed. So, for everyone experiencing the same as me, being on Ubuntu 14.04:

    1. Install NodeJS
    $ sudo apt-get update
    $ sudo apt-get install nodejs

    2. Install npm (Node Package Manager)
    $ sudo apt-get install npm

    3. Install gulp
    $ sudo npm install -g gulp

    Now create a symbolic link:
    $ sudo ln -s /usr/bin/nodejs /usr/bin/node

    If you don't know where nodejs is located:
    $ which nodejs

    Now verify gulp installation:
    $ gulp -v

    Should look something like this:
    [18:15:43] CLI version 3.9.1

    4. Install ruby with sass
    $ sudo apt-get install ruby-sass