Installing Gulp

Note: When running npm commands on the terminal on a Mac, you may start getting permissions errors which require you to precede your commands with sudo sudo npm install --global gulp-cli for example. This is one way to do it. Many people are uncomfortable with this, for one reason or another (there are a ton of blog posts about it). I recommend checking out this StackOverflow post which gives you a few options to fix this..

Installing Gulp Step by Step

• Check for Node and npm

  • In the terminal type node --version

    This checks which version of Node you have installed. 'Node is an open-source, cross-platform JavaScript run-time environment that executes JavaScript code server-side.' Wikipedia. In our case this just means that it can run some really cool and helpful tools for us.

  • In the terminal type npm --version

    Same as above, only this is npm - node package manager. So Node has all these cool tools, but it can be a pain to keep track of them, update them, run them, organize them, etc. Npm gives us a way to handle all of that.

• Install the gulp command

  In the terminal type npm install --global gulp-cli

  Ok, let's break this one down.

  We are using npm, the package manager, to install.

  We are installing it globally (--global), that means it will be available on our whole computer, not just in our project folder.

  Now, note that it says we are installing the gulp command. We are installing this so that we can run gulp on our command line or terminal.

  Look at the end of this line of code, it doesn't just say 'gulp', it says 'gulp-cli'. CLI usually stands for Command Line Interface. So we are installing an interface with gulp on the command line.

• Create a package.json file

  You have multiple ways of doing this.

  • My preffered way: In the terminal, in the root of project's directory, type npm init It will ask you some questions, for now, you can just hit enter on each one. The defaults will work fine for you.
  • Via the terminal with no set-up: just type touch package.json
  • In your code editor, simply make a file called package.json

• Install gulp in your devDependencies

  If you wish to be able to follow along with the videos and not make any modifications, use this code for this: npm install --save-dev gulp

  Projects can have dependencies (things that they rely on in order to work) in various 'stages' of the project. This is usually divided into production, development, and testing. With --save-dev, we are telling npm that our project is dependent on gulp, but only while it is in development. The project will not need Gulp to run once it is online, thus having it there would be wasteful.

  The gulp@next tells npm to install a higher version. Currently installing gulp installs version 3.9.1. Installing gulp@next installs version 4.0.0

  npm install --save-dev gulp@next