Front-end Development using Gulp 4

Back to IT Blog - The latest and most important web solutions in information technology
Front-end Development using Gulp 4

Front-end Development using Gulp 4

In this Article “Front-end Development using Gulp 4” was written by Jii Saaduddin. We will setup a sample project and implement the following tasks which will help us in speeding up the development process.

  • Initializing the server.
  • Reloading the browser automatically when changes are made to a file.
  • Using Scss preprocessor to convert Scss file to CSS file.
  • Optimizing CSS, JavaScript and images.
  • Auto prefixing to write vendor-free CSS

What is Gulp?
Gulp is a JavaScript toolkit which helps you in implementing multiple front end tasks during web development, it can be used to do wide range of things which can help you in reducing the development time. You can create your own customized build process that suits your development needs.


Installing Gulp
Before we install gulp you need to have Node.js (Node) installed in your computer. If Node.js is not already installed in your computer, you can download the installer from Node’s website. Once we’re done with installing Node, you can install Gulp using the following code in the command line tool.

// for windows users npm install gulp -g 
// for mac users sudo npm install gulp -g

Note: Mac users should prepend the keyword sudo before the command in order for command to execute as administrator.

The npm install syntax used in the command specify to install Gulp onto your system using Node Package Manager (npm).

The -g flag specifies npm to install the Gulp package globally on your system, which will allow you to access the gulp command anywhere on your system.

Now that we have install Gulp, let’s create a project that uses Gulp.

Creating a Project
Firstly, let’s create a folder called Gulp4 to serve as our project root. Run the following command from inside the directory to initialize the project.

// Initialize the project npm init

The left command creates a file named package.json which stores all the information about the project, like the dependencies used in the project, scripts to execute particular command.

 

​​npm init will prompt you the following:​

After creation of package.json file, install gulp in your project using the following command.

 

 

​After the command execution is finished view your project folder, you will find a new folder name node_modules created. You will also find gulp folder inside node_modules.​

 

 

 

Now we’re ready to start working with the Gulp. Before we do so, let’s decide on how we are going to use the gulp in the project, and directory structure of the project.

 

Please comment down if you have any suggestions.

 


How useful was this post?

Click on a star to rate it!

Average rating / 5. Vote count:

As you found this post useful...

Follow us on social media!

Share this post

Back to IT Blog - The latest and most important web solutions in information technology