Lesson Weekend

Now that we've successfully initialized npm in our project, we can use it to install and manage dependencies! In this lesson we'll discuss each of the dependencies our project will use, and walk through installing them in our project. Then, in the next lesson we'll start writing code to use these dependencies!

Gulp

Gulp is a tool that runs "tasks" for us during the coding process. Remember our wooden box analogy? Let's say we, as an amateur carpenter, decide to start turning out boxes, chests, and birdhouses as a little side hustle. The neighbor kid shows visible interest and curiosity in our work. We want to encourage and foster her curiosity, and think it'd be great to mentor her as she hones her own woodworking skills. We also need a hand with our small business anyway. So, we hire her as an apprentice!

Along with practicing her newfound love of carpentry, we also pay her to help prep our workstation, sweep wood shavings, prepare materials, and maybe run errands down to pick up more nails and other items.

Gulp is a bit like our young apprentice. We employ it in our projects to do basic tasks that help our coding go quicker and smoother. We'll see what this looks like in the next lesson. For now, let's simply install it into our project.

Installing Gulp

Now that we have npm, and understand the basics of using the command line, installing Gulp is super simple!

In the last lesson, we navigated to our project directory in the Terminal, and asked you to keep this window open, because we'd use it to run commands in our project directory. Return to this window, ensure you're still located in the project directory. (You should see the text act-w-api-workshop-project-master somewhere in the command line prompt. This means you're correctly located in our project folder).

Type the following command into the command line, and press Enter:

npm install gulp --save-dev

This tells npm to fetch the Gulp dependency for us, and install it into our project. The --save-dev part also instructs npm that this dependency is specifically one we'll use during development (that is, while we're actively coding our project).

We'll also need to install Gulp globally, so our computer will recognize the Gulp commands we'll run in the command line in an upcoming step. For Mac users, we can do this by running the following command:

sudo npm install gulp-cli -g

For Windows users, we'll run the following:

npm install gulp-cli -g

Great! After running this command, return to Atom. Click on your project manifest file (the one named package.json). You should notice that npm automatically added the Gulp to our list of dependencies! Check it out:

package.json
{
  "name": "act-w-api-workshop-project-master",
  "version": "1.0.0",
  "description": "",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {   // This is new! 
    "gulp": "^3.9.1"            // This is also new! 
  }
}

That means our installation was successful! Let's follow a similar installation process for our remaining required dependencies.

BrowserSync

BrowserSync is a tool that creates a local development server for us. This is just a fancy way of saying it allows us to run our web application locally on our own computer instead of having to publish it online (like an actual website) to test it out.

Installing BrowserSync

To install BrowserSync, we'll simply type the following into our command line, and press Enter:

npm install browser-sync --save-dev

Again, we should see a new entry appear in our package.json file.

package.json
{
  "name": "act-w-api-workshop-project-master",
  "version": "1.0.0",
  "description": "",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "browser-sync": "^2.18.12",   //Our command just added this! 
    "gulp": "^3.9.1"
  }
}

Radical! We're crushing it. Our dependencies are installed and ready to go. In the next lesson we'll learn more about both Gulp and Browserify as we program them to work together.