gulp-js-logo

Gulp

What is Gulp?

Gulp is a tool that helps you out with many Web Development tasks such as spinning up a Web Server, reloading the browser anytime a file is saved, compiling Sass to CSS  and Optimising assets like CSS, Images and JS. In the screenshot below, you can see that some Sass is being compiled but gulp has found an error with the $color variable. This is one of the benefits of Gulp, it can look for errors in your code. It even tells you that the error is on line 14 in the syle.scss file.

Before making any changes to any code, you should run the command gulp dev in the command line which tells Gulp to watch for changes. If I went to correct the error in the screenshot above, I would ensure gulp dev is running, then I would open the file style.scss, go to line 14 and add a variable to $color. When the file is saved, the command line would update accordingly and should not display any errors.

I used Gulp when creating the Numiko Dashboard. The page was styled using Sass and had to be compiled back to CSS for the browser to be able to read it. It helped me quickly find errors before the file was saved and pushed.

 

How is Gulp Installed?

To install Gulp, first you will need to have Node.js installed. You then need to open your command line and enter the following command:  npm install gulp -g or add sudo to the beginning if on Mac. npm install is a command that uses Node Package Manager to install Gulp. -g installs Gulp globally to your computer – meaning you can use it anywhere on your system.