Installing Node.js on Windows PC

Node.js is an open source JS runtime environment for executing JavaScript on the server side, used for creating server-side and networking web applications. To use Node.js we need some basic command-line instructions, this is not a program that can be pinned and launched from taskbar or app list.

Installing Node.js

  • Head over to the official website of Node.js
  • Download the executable file on your machine and double-click to install .msi file to install on your machine
  • Once you have completed your installation, restart your machine.

Updating Node.js

To install a new version of Node.js just head back to the official site of Node.js and download the new version of Node.js and install on your machine which will replace the older version.

Checking out Node.js installation

  • To make sure that Node is properly installed on your machine just open the command prompt and type the following command which will show the version number of Node like v6.9.*

    node -v

  • To make sure that NPM (Node.js Package Manager) is properly installed on your machine type the following command on command prompt which will show version number of npm like 3.10.*

    npm -v

  • To make sure that Node works properly,
    • create and save ‘hello.js’ file on a desired place on your computer with the following simple JavaScript code

      console.log("Node.js works"); // This will just echo the text on the console

    • Now navigate to the location where the hello.js file is located on your system using the command prompt (windows machine) and type the following command

      node hello.js

    • The above code will execute the JavaScript code exist on the file and results on the command prompt.

Capture

Uninstalling Node.js

  • Go to control panel -> Programs and Features
  • Double click the node.js  program to completely uninstall node.js on your computer

There are 470,000 free code packages are available in the npm registry to discover and use, head over to the npm site and to explore them.

Creating first Gulp project

Creating First Gulp Task

gulp-1

Welcome to the second article of Gulp for Beginners, in the previous article we have seen the way to install gulp in our local machine in this article we would create a Gulp project as well a gulp file with default task

Creating Project Root

We will create a folder on the desired location and name it as a project, this will serve the root folder for the project that we are going to create. Then navigate this folder on the command prompt, and type the following command.

npm init

This will prompt few details like project name, project version and a few more details about the project, it will create package.json which will contain information about the project. Once the package.json file is created we can install gulp to our project using the following command.

npm install gulp --save-dev

–save-dev flag is added with the npm command to install dev dependency. As of now, we have installed npm modules in our root folder. Next, we would set up a generic web app folder setup as follows.

A generic web app folder structure will look as follows,

|- app/
|- css/
|- fonts/
|- images/
|- index.html
|- js/
|- scss/
|- dist/
|- gulpfile.js
|- node_modules/
|- package.json

In this above folder structure, the app folder is intended for development purpose and dist folder is used to store optimized code for production. Now we will start to create gulpfile.js.

Creating gulpfile.js

gulpfile is simply a JavaScript file, open any text editor and create a gulpfile.js file and save at appropriate place as shown on the folder structure example above, add the following code on to the file and finally save.

var gulp = require('gulp');

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

require statement looks for gulp package on the node_modules folder and loads its contents if it found. On the second line of the above snippet, we are trying to create a gulp task which will just print the text hello. Head back to the terminal type gulp and hit enter, this will display the text hello on the command prompt.

Screenshot (230)

Note : The default task is the initial task that will executed when gulp
command is executed on the command prompt, if we name it as different
than default we should the name on command prompt.

eg: gulp function_name

We have created first simple gulp task but typically a gulp task would be bit complex than this, we will explore more gulp packages on upcoming articles.

Happy coding 🙂