Blessed Build Tools & Task Runners

Source: blog.qmo.io

Many of the tasks we have to do as developers are repetitive such as refreshing the browser when making a change, compressing the js and css file. In addition, we have to minimize our code to gain performance.

Task runners allows us to automate all those tasks in order to take advantage of the time in more productive activities. Time is the most valuable asset, and the more tasks we can automate, the more time we can focus on important things.

Gulp vs Grunt is the most popular dilemma. They both automate tasks, use Node.js, and they are both powerful and efficient.

On the other hand, Webpack is a bundler and it comes in handy when you need to pack multiple assets (images, fonts, etc.) together into a dependency graph. Webpack is often used in combination with Gulp.

Well, are you starting to see something useful in these tools? We are sure that if you tried them, you would fall in love. Let’s see each one with a little more detail.

What is Grunt?

As we have said before, grunt is a “task runner”, that is, a tool to automate repetitive tasks such as css compilation, test execution etc. In a JS file called Gruntfile.js we write the tasks that we want to automate and with we execute a simple command.

To install grunt, it is best to do it globally with npm install -g grunt-cli and then in our project we define the tasks in the grunt file. The best thing about this tool is that we already have many plugins and tasks created here http://gruntjs.com/plugins

Did you know that there are major companies using it? Some examples are the following (see image).

What is Gulp?

Gulp is an automated tasks tool and you have to run it with the console or command terminal. This means that Gulp doesn’t have a GUI and you have to config and install it without help. But, thanks to that, you can configure it as you wish and process tasks to improve performance, plus you have the possibility to adapt it to when you need it.

Npm is our friend, because it helps us to install Gulp. You have to write in the console npm -g install gulp-cli . Then you need a new file called package.json, that it’s a JSON file. When finish installing, you write gulp in the command terminal and a new window will open to see your website. You can find more information about the installation here.

The best things in this task runner are:

  • Flow control and more clarity of processes
  • More than 2770 plugins for different purposes among which each one is for a particular task
  • You need less code than Grunt
  • Faster because Gulp have a better stream usage and in-memory operations

Are you ready to use it?

Some of the sponsors are the next ones:

What is Webpack?

In the webpack web this is defined as a module bundler and basically what it does is help us with fragmentation. All the pages of our site do not need the same JS code, for example if we have a map in a section with enough functionality JS, we do not have to drag that code to the entire web. In this, webpack helps us.

To install it we just have to run npm install -g webpack.

Here is a post with more information:

https://medium.com/@dabit3/beginner-s-guide-to-webpack-b1f1a3638460#.lznacz56t

There are many organizations sponsoring webpack as for example:

As you can see, more and more developers are joining the use of these wonderful tools that save us a lot of time, which is better to invest in something more profitable. We hope you found our proposal interesting and that you get in on the automation cart!

Authors: Mónica Aguado and Aida Albarrán

https://medium.com/@MoniAguado

--

--

--

If something does not work, ACT. Yes, you! That’s why I’m now #Developer at @vmware . Formerly @kairos_ds .Constantly absorbing knowledge. Proud #Adalaber

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

When In Doubt, Add More Spans: A Tale of Tracing and Testing In Production — Honeycomb

A person snatches a disk from another persons hand and a car drives away

Story of YouTube’s Unfixable Ads Bypass

ECMAScript 2016 (ES7) proposal — the bind operator

JS Front End React Week 2 Interview Questions

To Infinity and Beyond with React Waypoint

Creating an Obfuscator for Javascript files

How to make a website with login from scratch in NodeJS and Mongoose (Advanced)

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Aida

Aida

If something does not work, ACT. Yes, you! That’s why I’m now #Developer at @vmware . Formerly @kairos_ds .Constantly absorbing knowledge. Proud #Adalaber

More from Medium

Introduction to GraphQL

Best Practices for Cookie Notifications

How to secure SPAs with Asgardeo

File Creation Automation with Plop