Gulp.js Practice

What is Gulp?
It is an open-source Javascript tool kit and task runner. It has a front-end build system and is built on Node.js and NPM. Used for time-consuming & repetitive tasks. It has hundreds of plugins available for different tasks. Some common tasks for Gulp are minification of scripts and styles, concatenation, cache busing, testing, linting & optimization, also for dev servers.

How Gulp Works?
Gulp is built on node streams. Streams are collections of data — just like arrays or strings. The difference is that streams might not be available all at once, and they don’t have to fit in memory. It also uses pipelines/ .pipe() operator and single-purpose plugins.

My practice with Gulp was installing the packages for gulp, creating tasks, adding sass to compile CSS. Also added auto vendor prefixes and made the server able to watch files, browser-sync, auto-reload, and automatically run tasks.

I also got to see how powerful minimizing files are with minifying CSS and HTML. By adding in code to create a new HTML file with content hash generating a random string of characters each time a certain task was completed quickly added a lot of code in our dist index.js file. So much code in fact that each time I reloaded the page the page would be visibility blank for a second because it was loading the information.

Overall I am seeing why Node is important for front-end developer, not just the server-side but for the tools and features Javascript alone doesn’t have.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Up ↑

%d bloggers like this: