gulp js tutorial for beginners

Locating gulp

Locating and gathering information about node.js packages is very simple, thanks to the npm registry. The npm registry is a companion website that keeps track of all the published node.js modules, including gulp and gulp plugins. You can find this registry at http://npmjs.org. Take a moment to visit the npm registry and do a quick search for gulp.

The listing page for each node.js module will give you detailed information on each project, including the author, version number, and dependencies. Additionally, it also features a small snippet of command-line code that you can use to install the package along with readme information that will outline basic usage of the package and other useful information.

Recommended Angular 2 Tutorials

Installing gulp locally

Before we install gulp, make sure you are in your project’s root directory, gulp-book, using the cd and ls commands we learned earlier. If you ever need to brush up on any of the standard commands, feel free to take a moment to step back and review as we progress through the book.

To install packages with npm, we will follow a similar pattern to the ones we’ve used previously. You can also find this small snippet on the gulp page of the npm registry:

npm install gulp --save-dev

To break this down, let’s examine each piece of this command to better understand how npm works:

  • npm: This is the application we are running.
  • install: This is the action that we want the program to run. In this case, we are instructing npm to install something in our local folder.
  • gulp: This is the package we would like to install.
  • –save-dev: This is a flag that tells npm to add this module to our devDependencies list in our package.json file.

Tip

Additionally, npm has a –-save flag that saves the module to the list of devDependencies. These dependency lists are used to separate the modules that a project depends on to run, and the modules a project depends on when in development. Since we are using gulp to assist us in development, we will always use the --save-dev flag throughout the book.

So, this command will use npm to contact the npm registry, and it will install gulp to our local gulp-book directory. After using this command, you will notice that a new folder has been created that is named node_modules. The node_modules folder is where node.js and npm store all of the installed packages and dependencies of your project.

Recommended Tutorials to learn nodejs

  1. Learn Nodejs by building 12 Projects From Scratch

  2. Learn Nodejs programming from Scratch

Installing gulp globally

For many of the packages that we install, this will be all that is needed. With gulp, we must install it once again globally so that we can use gulp as a command-line application from anywhere in our file system in any of the projects that we use. To install gulp globally, use the following command:

npm install -g gulp

In this command, not much has changed compared to the original command where we installed gulp locally. We’ve only added a -g flag to the command, which instructs npm to install the package globally.

Tip

On Windows, your console window should be opened under an administrator account in order to install an npm package globally.


At first, this can be a little confusing, and for many packages it won’t apply. Similar build systems actually separate these usages into two different packages that must be installed separately; one that is installed globally for command-line use and another installed locally in your project.

Gulp was created so that both of these usages could be combined into a single package, and, based on where you install it, it could operate in different ways.


About the author

Deven Rathore

I'm Deven Rathore, a multidisciplinary & self-taught designer with 3 years of experience. I'm passionate about technology, music, coffee, traveling and everything visually stimulating. Constantly learning and experiencing new things.

Pin It on Pinterest

Shares