How JavaScript Work: What are Task Runners + Introduction to Gulp

This is post # 76 of the series, dedicated to exploring JavaScript and its building components. In the process of identifying and describing the core elements, we also share some rules of thumb we use when building SessionStack, a JavaScript application that needs to be robust and high-performing to help companies optimize the digital experience of their users.

Introduction

The job of web development involves the combination of many tasks like running a server, optimizing content, Deploying files to the server, minifying scripts and style sheets, and compressing images among others.

To make the job of web development faster and less difficult, web developers can make use of task runners to automate these tasks.

In this article, we’ll explore task runners, the advantages of making use of task runners, and then talk about Gulp task running tools. I am also going to use a quick example that you can follow to show how to make use of the Gulp tool.

What are Task Runners

Developing a web application involves some development tasks and processes such as a server running, caching, and content optimization among others. Most of these tasks require constant repetition, for example, each time you make a change in any of the files present in your project, you might be required to perform these tasks and this is quite time-consuming.

However, developers can make the execution of web development tasks faster and smoother by making use of Task runners. What are task runners? Task runners are simple tools that help web developers automatically run web development tasks that might require additional effort and time to run.

By making use of task runners you do not have to repeat web development tasks, they help you run these commands automatically.

Task runners can be used to do things like compile SCSS codes to CSS codes, and minify CSS codes for production among others.

Some good examples of task runners that we have are Webpack, Grunt, Rollup, and Gulp (which I am going to talk about in this article).

Web developers can also make use of npm scripts for task running purposes. NPM has several built-in scripts when it comes to tasks running and it can be used to run quite a large number of built-in tasks for developers. For example, you have the test script in package.json used for running tests in web applications. NPM also has the init script which is used for initializing a package.json file and the list continues.

In the next section, I am going to cover some of the advantages of using Task runners in your next project. This will help in inspiring you to include a task runner in your future projects or add it to your already existing projects.

Advantages of Using Task Runners

In this section, we’ll explore the advantages of using task runners in your application. And below are some of them:

Automate Web Development Tasks

The first advantage of using task runners is that they automate the tasks and processes involved in web development. with Task runners, developers will not have to worry about running commands that will involve tedious processes, as these tools are capable of running them for you.

For example, in building web application projects, developers might be required to manually compile SASS codes to CSS code, and also minify CSS codes each time there is a change in the code base of the project. But, if you make use of task runners you can prevent these tedious and time-consuming tasks, by using task runners to automatically run specified tasks whenever you make changes to your code base.

Ensure a Faster Web Development Process

Using task runners to automatically run web development tasks is important to ensure that web development processes do not take up a lot of time and eventually cost lots of money.

Since you don’t have to run most of the extra demanding tasks of web development, you get additional speed. Also, you get to prevent repeating particular kinds of tasks multiple times. So you can focus on less tedious and less repetitive tasks.

Most Task Runners Are Easy to Use and Understand

It is quite simple to use most task runners such as Gulp because they use JavaScript — a popular language for web development.

So, even though you have not used task runners before, you can learn how to use these tools quickly. And also, you can understand existing projects that use them.

Minification and Concatenation

Although the process of minification and concatenation may sound as a simple task to most developers, a simple mistake from these tasks may lead to breaking things up in your project. And this might result in time wasting and may be loss of money.

But the use of task runners guarantees to solve a greater part of this problem by automatically running the tasks that will involve the minification and concatenation of project codes.

Simple-to-use plugins

Some good task runners also have easy-to-use plugins that could be implemented to make task execution faster and easier.

You may not have to worry about how to use these plugins as most of them are quite user-friendly and can be applied to your web application project with ease.

So, these are the major advantages of making use of task runners. But we are yet to take a closer look at some of the good examples of task runners that we have, and as I mentioned earlier we have great task-running tools like Gulp, Webpack, Rollup, and even Grunt.

In the next section, I will cover the Gulp task running tool and show how you can use it in your projects. So let’s begin by learning about Gulp and then wrap things up with a quick demo.

What is Gulp

Gulp is an open-source JavaScript tool used by developers to automate web development tasks. So in simple words, you can say Gulp is a task runner.

As a task running tool, Gulp, uses Nodejs as its platform. So to use Gulp you have to download Nodejs on your machine and follow the necessary setup procedures to install it.

With Gulp, you can do the processes of minifying CSS, HTML, and JavaScript files automatically or convert SCSS files to CSS files automatically by setting up Gulp tasks.

In the next section, we will look at an example that will explain how Gulp works and how you can use it in your project or implement it in your old projects.

How to Use Gulp

In the previous section, I explained what the Gulp tool was and what it is used for. Now in this section, we will elaborate with an example that explains the usage of the Gulp tool. We will use Gulp to compile a SASS code to a CSS code.

Using SASS instead of vanilla CSS allows frontend developers to gain access to many great features such as writing cleaner codes with less CSS etc.

But most browsers do not have support for SASS codes, so to make use of SASS code, you first have to compile your code into a CSS file so that the browser can read and apply your stylesheet to your web pages.

In this section, let’s see how Gulp can help us compile our SASS codes into a CSS file and then apply our styles to our web page.

As I mentioned earlier, you need to have Nodejs in your machine because we will make use of NPM — a node package manager that gets installed together with Nodejs.

So if you do not have Nodejs in your machine, visit the official Node Js website here, and download the latest stable version. After that, open up the Nodejs file and run the necessary setup processes.

To check if you have properly installed Nodejs in your system, run the command below:

node -v

The command above will give you the version of Nodejs installed in your machine. But if you don’t have Nodejs on your machine, you will get an error message.

After installing Nodejs on your machine, install the Gulp CLI.

Note, this is important for us to actually install Gulp packages and also run Gulp tasks. So to install the Gulp CLI, run the command below:

npm install — global gulp-cli

You can verify if you installed the gulp-cli properly by running the command below:

gulp — version

This command will print out the version of gulp-cli installed in your machine, but for the local version of Gulp it will print unknown. And this is because we have not installed that just yet.

The next step is to actually create a folder for our project and then add some HTML and SASS files.

So create the project folder with the command below:

mkdir Gulp-tutorial

I decided to call my project folder Gulp-tutorial, but you can call it anything you like.

Now, navigate into the project folder with the command below:

cd Gulp-tutorial

Inside the project’s folder directory, you have to create a package.json file, this file will contain all our project details and all the packages that we are going to install. To create this file run the command below:

npm init

And you will be prompted with some questions, like the version of the project, the project’s name, the project’s description, etc. You can choose to skip through and leave everything as default by hitting the enter button.

You now have a package.json file, you can open the project folder in any code editor of your choice, by running:

code .

You should see the package.json file as the only file present. Now let’s add some HTML and SASS files. So create another file in the root of your project folder, and let’s call it index.html. But you can call it anything that you like.

This file will contain the HTML for our project, and I link it to the CSS file — for styling using the link tag.

So add the code below to your index.html file:

Next, we need to add the styles for our project. Create a folder named Sass and create a file ending with a .scss extension inside it. Now, add the following code to the .scss file:.

Go ahead and save the file. Open the application with a browser. You should see that your styling did not work. Thus they were not applied.

And this is because SASS is not recognized by the browser. So to use SASS codes in your projects, you first have to compile them to CSS codes, and this is where the use of Gulp comes in.

Now let’s install Gulp as a dev-dependency in our application. In the terminal, navigate to the project folder directory if you are no longer there and run the command below:

npm install — save-dev gulp

To confirm that you have Gulp installed, run the following command

gulp --version

This time you should see both the gulp-cli version and the local version of Gulp itself.

Alternatively, you can go into the package.json file and check under the devDependencies. And you will see the version of Gulp installed.

For our example, we need the gulp-sass package from npm. And to install this package run the command below:

npm install sass gulp-sass — save-dev

Note that this tutorial covers codes that are applicable for version 5 of gulp-sass and version 4.0.2 of gulp.

From version 5 of the gulp-sass package, you need to install a sass compiler to use gulp-sass. So the command above will help you install gulp-sass and a sass compiler.

The next step you need to take is to create a gulpfile.js file. And this is where all the tasks that we want to run will be added.

Also, note that you have to use the same name for this file because failure to do so will make it impossible for Gulp to find your gulpfile and this will lead to errors when you execute Gulp commands on the terminal.

Inside the gulpfile.js file add the following code to import Gulp, add a sass compiler and then add your task.

In line 1 we required Gulp into our project and passed it into a variable called Gulp. Then in line 2, we required the gulp-sass package that we installed using NPM. Lastly, we imported our sass compiler.

From lines 5 to 9 we created our task. On line 5 we created a task called sass and on line 6 we asked Gulp to take codes from our sass file which is in the sass folder. Notice that in the code above I made use of * followed by .scss. This simply tells Gulp to watch every file inside the sass folder with a .scss extension. You can also be very specific by removing the * and replace it with the name of the file you want instead, for example, style1.scss.

Now on line 7 we simply want to log out any error that might occur in the process of executing our command.

Finally, on line 8 we asked Gulp to compile our sass codes and store them in a .css file inside a CSS folder that we won’t create. But Gulp will help us create them automatically.

Now save the file and run

gulp sass

In the Command Line Interface, you should see an output like this:

If you look at the folder structure in your code editor, you should see a CSS folder with two CSS files: style1.css and style2.css as seen below:

Now, I want you to notice something: if you open the application in the browser again, you should see that all your styles have been applied. Great this is how Gulp and other task runners help us run web development tasks automatically while making our job as web developers easy and fast.

Conclusion

Web development involves the combination of time-consuming, important tasks that can break down an entire project if executed improperly.

Task runners as web development tools, were introduced for the sole purpose of making the job of running web development tasks smoother and a little bit less complex.

Modern web application bundlers such as Webpack can also be configured to run web development tasks automatically using NPM scripts.

In this article, I talked about what a task runner is, and the different types of task runners. Then I covered what Gulp is, and what it can be used for, and also I elaborated with an example that shows how a web developer can use Gulp in his/her next project — where we made use of the Gulp tool to compile a SASS file to CSS file to style our web page.

Task runners like Gulp make it much easier for software to have efficient and high-performing code. And since we all like to apply new technologies & upgrade our code so even if we feel we’ve tested everything before release, it’s always necessary to verify that our users have a great experience with our product.

A solution like SessionStack allows us to reply to customer journeys as videos, showing us how our customers actually experience our product. We can quickly determine whether our product is performing according to their expectations or not. In case we see that something is wrong, we can explore all of the technical details from the user’s browser such as the network, debug information, and everything about their environment so that we can easily understand the problem and resolve it. We can co-browse with users, segment them based on their behavior, analyze user journeys, and unlock new growth opportunities for our applications.

There is a free trial if you’d like to give SessionStack a try.

SessionStack replaying a session

Interested in more about JavaScript? Check out all “How JavaScript works” publications here.