Lesson Weekend

Goals

Let's learn how to actually use gulp. I promise that soon we'll be able to get back to the browser.

Installing Gulp

We already installed gulp with npm inside of our project folder using this command:

$ npm install gulp --save-dev

However, we will also need to install gulp globally to use it in the terminal. We do this by using a new flag: -g for "global".

$ npm install gulp -g

You'll only need to do this once on your own machine and shouldn't have to do this in the classroom. If you get permission errors when running this command, or any other npm install command that uses the global -g flag, you may need to run the command with sudo instead:

$ sudo npm install gulp -g

When do we need to use the global flag?

Anything that we use directly in the terminal (such as Git or npm) needs to be installed globally. When we run a command in the terminal that begins with the name of a program like git add . or git commit, the terminal has to understand the word git. We are saying: "Hey terminal, find git and make it do things for me." In the case of npm, we are saying: "Hey terminal, find npm and tell it to download things for me." Soon, we'll be saying: "Hey gulp, I need you to do stuff to my code!" That means we need to install it both globally with the -g flag and locally with the --save-dev flag as we did in the last lesson. This way it will be saved in our manifest file and will also be accessible to the command line.

Gulpfile

Gulp will be looking for a file called gulpfile.js in the top level of our project directory, so let's create that now.

gulpfile.js
var gulp = require('gulp');

//more dependencies will be added here.

We use the require function again (just as we did in our pingpong-interface.js file) in order to load the gulp package into a gulp variable that can be used in our code.

When using require, it's standard practice to have the variable name be the same as the package name, though technically the variable name could be anything.

Writing Gulp Tasks

Let's write our first gulp task! Just a small disclaimer: this is not actually a task we would need to write (as you can see, it only contains a console.log()!) It is merely an exercise to practice writing gulp tasks.

We'll add the following lines after the require line:

gulpfile.js

gulp.task('myTask', function(){
  console.log('hello gulp');
});

[...] 

Let's break this code down.

  • Here, we are calling the task method defined in the gulp package to create a task. This method takes two arguments:
    • The first is a string representing the name of the task, so we can refer to it later.
    • The second is the function to run when we tell gulp to run this task. In this case the task just prints "hello gulp" to the console.

We can run it with this simple command in the terminal (in the top level of your project directory):

$ gulp myTask

We can name our tasks whatever we want. We could have named this eatApplePie. However, we should use JavaScript lowerCamelCase naming convention and choose descriptive names because the gulpfile can get long very quickly. For this reason, it's also generally accepted that all require function calls go at the top of the file. This way the developer can see all dependencies at a glance.

Callback Functions

Finally, passing in a function definition as a parameter to another function is a common pattern, as we did above:

gulp.task(name, function(){
  // I am the inner anonymous function that is a parameter of gulp.task()!
});

This function that we are passing in is a callback function. A callback function is a function which is executed at a particular time, such as after a particular event completes. The callback function we used with our gulp task is executed when we run the task. We've also used callback functions with jQuery when we attached a click handler:

$( "#target" ).click(function() {
  alert( "Target clicked." );
});

In this example, we're passing in a callback function which is executed when the target has been clicked.

Terminology


  • Gulp: A JavaScript package that automates development tasks such as running browserify or concatenating JavaScript files.

  • Callback function: A function that is executed at a particular time; for example, after an event is completed (eg. click handlers in jQuery have callback functions that fire when a target is clicked)

Overview


To install gulp:

$ npm install gulp --save-dev
$ npm install gulp -g

Tips


  • While you can technically name gulp tasks whatever you'd like, use camelCase and descriptive names to keep things organized and easy to understand.

  • All require lines to import other files and node packages should reside at the top of the file. This is simply common practice, as it's easy to see all dependencies at a glance.