Lesson Weekend

Your starter kit includes a file called Gulpfile.js. This is where we can give our Gulp dependency instructions on helping us out. In our case, we want Gulp to work with BrowserSync, so they can prepare our project to be previewed locally on our computer.

In this lesson we'll write a Gulp task that invokes BrowserSync, and starts a development server.

Requiring Dependencies in Files

First, we need to make sure this file has access to our Gulp dependency. Thankfully, that's easy! All we have to do is add a single line of code, like this:

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

This basically says "Hey, Gulpfile! Make sure to fetch that Gulp tool we just installed with npm. This file is going to need access to it."

Next, we need to make sure this specific file also has access to our BrowserSync dependency. We'll add a second, fairly similar line of code to the top of Gulpfile.js

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

In addition to fetching the dependency, this line of code also includes create(). This just helps BrowserSync initialize a new development server for us to test our project on. More on this in just a moment.

Writing Gulp Tasks

Alright, cool! Our Gulpfile.js now has access to the Gulp and BrowserSync dependencies we've installed.

Next, we'll tell Gulp how to use BrowserSync to benefit us. We can do this by creating a new Gulp task. A gulp task is exactly what it sounds like; a task we'd like our "apprentice" Gulp to complete to help us out.

A basic Gulp task looks something like this. Go ahead and add this code to your own Gulpfile.js now:

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

gulp.task('serve', function() {

});
  • Here, gulp.task simply tells Gulp we're about to describe a new task we'd like it to complete.

  • 'serve' is the nickname we've given this function. We can refer to this nickname later on when we want to trigger this task.

We've created a new task, but it doesn't yet include instructions about what Gulp should do to complete the 'serve' task. We'll add code inside this new task, like so:

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

gulp.task('serve', function() {
  browserSync.init({
    server: {
      baseDir: "./",
      index: "index.html"
    }
  });
});

Let's walk through what all this new code means:

  • browserSync.init simply initializes the BrowserSync dependency. Essentially like powering it on, so it may help us by loading our project in the browser.

  • server is simply a list of settings for the local development server BrowserSync will create for us when this Gulp task runs.

    • baseDir tells it what area of our project to load in the browser. By listing ./ we tell it to load everything.
    • index tells it what the "homepage" of our project should be. We point toward index.html where our basic HTML resides.

Running a Gulp Task

Excellent. Now that we've outlined a new task to Gulp, we can tell it to run this task at any time, and it will complete the steps we've outlined in the code above.

Return to your Terminal window. The one we previously navigated to our project directory in. Make sure you're still in the project directory by confirming the prompt states act-w-api-workshop-project-master somewhere in the prompt.

Then, type in the following command and press Enter:

gulp serve

This tells Gulp to run the task we've just created! Two things should happen as soon as we hit Enter:

First, the command line will respond with something that looks a bit like this:

[14:07:24] Using gulpfile ~/Desktop/act-w-api-workshop-project-master/Gulpfile.js
[14:07:24] Starting 'serve'...
[14:07:24] Finished 'serve' after 26 ms
[BS] Access URLs:
 -------------------------------------
       Local: http://localhost:3000
    External: http://10.46.17.230:3000
 -------------------------------------
          UI: http://localhost:3001
 UI External: http://10.46.17.230:3001
 -------------------------------------
[BS] Serving files from: ./

This is simply confirmation that the 'serve' task successfully ran, and our development server is up and running.

Secondly, our website should pop up in a new tab in the browser! If this didn't occur automatically, try visiting the URL http://localhost:3000/ in your browser. We should see a live version of our website.

Wow! Isn't this cool? So far we've learned about dependencies, installed a dependency manager with Node, installed individual dependencies using the npm package manager, and even wrote our own automated Gulp task! You're awesome!

Now that we have all our necessary tools up and running, we can begin querying the Act-W API in the next lesson. Get stoked!