Setup Gulp project step by step

By November 8, 2017 Gulp, Html, SASS No Comments
Setup Gulp project step by step

Getting started gulp with step by step.

Gulp is mostly used for front-end development, Gulp is a tool that perform several tasks when that really beneficial when you build any HTML. It is a task runner that uses Node.js as a platform.

“Automation – gulp is a toolkit that helps you automate painful or time-consuming tasks in your development workflow. Platform-agnostic – Integration are built into all major IDEs and people are using gulp with PHP, .NET, Node.js, Java, and other platforms.”

 

Why to use Gulp? or Advantages of Gulp.

  1.     Gulp Create a virtual server or web server for project.
  2.     Automatically reloading the browser whenever any changes detected in files.
  3.     You can user CSS Preprocessors like Sass or LESS
  4.     It Optimizing assets like CSS, JavaScript, and images.
  5.     Autoprefixer (gulp-autoprefixer)
  6.     Can Minify, Compressed or Uglify CSS
  7.     Clean files for a clean build
  8.     run tests and merge files
  9.     Minify HTML

Now after a quick understanding of gulp we can move to its installation steps. Create a new directory where you want to set up your gulp project and perform below steps.

Installing gulp Step by step. / Setting up a New Project

Step1:  install Node.js (Node)

As i mention above,  You need to install Node.js (Node) in to your system to run Gulp.  If you do not have Node installed already, you can download the Node package It,s official website.

https://nodejs.org/en/

Step2:  Create a package.json

package.json – this file holds various metadata relevant to the project. This file is used to give information to npm that allows it to identify the project as well as handle the project’s dependencies.

In your command line terminal give npm init to create package.json file. It  will ask some parameters like name, version etc.

After running npm init command package.json file created in your directory, and something looks like below

Step3:  Install gulp

After Installing Node JS, you can install Gulp by using the following command in the command line :

Step 4: Create a Gulp Configuration File gulpfile.js

Create a new empty JavaScript file and saved with name gulpfile.js on the root of project folder.
All Gulp configurations are  goes in gulpfile.js file.

I am showing you a very basic verion of gulpfile.js file, you can add a lot of declaration, configuraion and it’s task
in that file.

 

Simplified Version  gulpfile.js –

 

You can Download the Detailed version Gulpfile file here with complete configuration.

 

Step 5: Manage your projects file with gulp.

I recommend you to keep all of your project related files like js, css etc in a separate directory. Like i have created in src folder and according to it i have configure my gulpfile.js.

Gulp Folder Structure

 

 


About Badar Rashdi

Leave a Reply