DEV Community

Cover image for How to automate your web developer's routine with Gulp
Stratakis Stavros
Stratakis Stavros

Posted on • Edited on

How to automate your web developer's routine with Gulp

I was on a complete mess while i was trying to minify CSS, JavaScript and image files in my daily routine at the office. I was mainly using software installed on PC and online tools per case!

I felt tired really soon as one tool was better in f.e image compression than the other one. Some others went offline etc. Then i realized that i should search for a better solution and found an open-source JavaScript toolkit named Gulp!
Ye, ye i have not discovered the wheel i know :) however it was important for me to simplify the repeated tasks and at the same time stay organized on the heavier ones.

That was the reason behind the creation of this Gulp tool!

All in one

What i tried is to implement a number of functionalities in one place. I will do a quick presentation below and quote the link on my GitHub for more details.

Export in WebP format

gulp exportWebp
Converting a WebP image file format from png, jpg and gif images was a complex process. That's exactly, it was!

Minify almost everything

This group of processes is so important in web performance sector nowadays. We have now a vary options of minifying images, CSS, JavaScript and html files! Amazing!

Beautify the files

We can beautify a file when it's already minified and we want to apply some changes. I know it's hard that's why this option was implemented!

Remove all files

gulp clean
This command will remove all the files.

My Gulp tool on Github

GitHub logo webgiftdev / gulp-project

Automate web developer's daily routine with Gulp

gulp-project

Automate web developer's daily routine with Gulp.

If you're a terminal nerd and a web developer this tool will help you increase your productivity!

Convert png, jpg and gif images to WebP, minify all these images' types (jpg, png, gif, webp and svg), minify and beautify CSS, JS, HTML are just the begging! Hope you'll love it as i do! Let's get started by Opening the terminal!

Install and configure

Clone the repository

git clone https://github.com/webgiftdev/gulp-project.git
Enter fullscreen mode Exit fullscreen mode

and then

cd gulp-project
Enter fullscreen mode Exit fullscreen mode

Check for node, npm, and npx

Follow these quick start tutorial from Gulp official website and verify if you have installed node, npm and npx.

Install the gulp command line utility

npm install --global gulp-cli
Enter fullscreen mode Exit fullscreen mode

Try sudo npm.. in case that you have privileges issues.

Synchronize your Gulp installation with the required dependencies

npm i -D gulp
Enter fullscreen mode Exit fullscreen mode

Thats it!

Usage

exportWebP

Copy png, jpg and gif images to…

Hope this tool help you.
Developed and used by webgift dev office.

Top comments (0)