Front-end Development using Gulp 4Ivy Pritz
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.
- Auto prefixing to write vendor-free CSS
What is 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 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: