html task runner

• Awards Season
• Big Stories
• Pop Culture
• Video Games
• Celebrities

How to Get Started with Website Design HTML CSS Code

Designing a website from scratch can be a daunting task, especially if you’re unfamiliar with the coding languages used to create it. HTML and CSS are two of the most important coding languages for website design, and understanding how to use them is essential for any aspiring web designer. This article will provide an overview of HTML and CSS and explain how to get started with these coding languages.

What is HTML?

HTML stands for HyperText Markup Language, and it is the language used to structure a web page. It is made up of elements that define the content and layout of a page, such as headings, paragraphs, images, lists, links, and more. HTML is the foundation of any website, and it is essential for any web designer to understand how to use it correctly.

What is CSS?

CSS stands for Cascading Style Sheets, and it is the language used to style a web page. It allows you to control the look and feel of your website by defining colors, fonts, layouts, sizes, and more. CSS works in conjunction with HTML to create a visually appealing website that looks great on any device.

Getting Started with HTML & CSS

The best way to get started with HTML & CSS is by taking an online course or tutorial. There are many free resources available online that can help you learn the basics of coding quickly and easily. Once you have a basic understanding of HTML & CSS, you can start building your own websites from scratch or using existing templates.

Learning how to use HTML & CSS can seem intimidating at first but with some practice and dedication it can become second nature. With a little bit of effort you can become an expert web designer in no time.

This text was generated using a large language model, and select text has been reviewed and moderated for purposes such as readability.

MORE FROM ASK.COM

• +1 619 815 7158
• [email protected]

5 Best Task Runner & Module Bundler Front-end Development Tools

Chetan chaand.

• May 26, 2020
• 6 Minute Read

As a front-end developer, you must be aware of the roles of task runner and module bundler tools. They run undercover automating and combining processes to make the final code seamless.

As the name implies, task runners automatically execute processes behind the scenes, saving both work and time, while module bundlers combine various files that can be executed together.

Both are practical front-end development tools that optimize performance by taking care of simple and repetitive processes. There are various task runner and module bundler tools to choose from. The question is, which ones are right for your needs?

Here’s a helpful guide to the most popular task runner and module bundler tools to choose from.

Five Popular Task Runner Tools

The Grunt ecosystem is massive. Many of the tasks developers need to automate are available as plug-ins. There are hundreds of these available already.

Chances are, there will be one to suit your needs. If there isn’t, then creating a plug-in with Grunt is simple and convenient.

Grunt’s key features are:

• You can automate repetitive tasks with minimum effort by simply creating a setup file. There are built-in tasks that extend functionality.
• It’s based on NodeJS and is very flexible. It includes tasks in JS and config in JSON.
• It allows developers to work with a new codebase as it has minimum infrastructure.
• Grunt is robust and can advantageously be used for big production sites.

Gulp lets you create efficient pipelines by taking advantage of the flexibility of JavaScript. It is supple, efficient, and provides you with speed and accuracy.

Gulp also has many community plug-ins, and there’s a good chance the process you need is already easily available.

Gulp’s key features are:

• Aspects such as file watching are built-in.
• Most plug-ins are simple and designed to do a single job.
• It uses the JavaScript configuration code, which is simple and flexible.
• It uses Node.js, so it can be faster.

Yarn has a reputation for being quick, secure, and reliable. In essence, what it does is to let you use and share JavaScript code with other developers from all over the globe.

You can report issues or add to development, too. When the problem is fixed, you can use Yarn to keep it all up to date.

Its key features are:

• It uses the Hadoop operating system, which means processes will be resilient and capable of distributing very large data sets.
• You can use the Hadoop cluster in a dynamic instead of static manner.
• There is a central controlling authority which, among other things, allows for immense scalability.
• It is highly compatible with existing Hadoop MapReduce applications.

4. Require JS

Require is a JavaScript file optimized for in-browser use. It can also be used in other JavaScript environments. It manages the dependencies between files and improves the speed and quality of code.

It is also stable and provides support for plug-ins. It can easily load more than one JavaScript file at a time.

The key features of Require are:

• It combines and streamlines modules into one script for optimal performance.
• In the case of large-sized applications, it can reduce code complexity.
• It can collect several JavaScript files from separate modules when compiling.
• With React, debugging is simpler as it loads files from plain script tags.

Brunch focuses on the production of a small number of files that can be deployed from a large number of separate development trees. This front-end development tool provides smooth and quick work experience.

Brunch works across frameworks, libraries, and programming languages, which makes it very useful and flexible.

• The commands are simple and easy to execute.
• There is support for node programs.
• You get source maps from the start.
• It has the ability to create fast-zero builds as well as incremental builds.

Five Popular Module Bundlers

Basically, Webpack is a static module bundler for the latest JavaScript applications. It works by building a dependency graph to map every module the project needs. In this way, it creates one or more handy bundles.

One of the main advantages of Webpack is that it is configurable to fit your specific needs.

• It generates output based on configurations. You can also define split points to create separate bundles within the project code itself.
• Its flexibility gives you control over how to treat different assets encountered.
• Webpack relies on loaders and plug-ins. Loaders operate on a module level, while plug-ins rely on hooks provided.
• There is a high learning curve, but Webpack’s advantages make this worth it.

Rollup compiles small pieces of JavaScript code into libraries or applications that can be large and complex.

Because it uses a standardized code format with ES modules, you can seamlessly combine useful individual functions from separate libraries.

• It can optimize ES modules for faster native loading in the latest browsers.
• It can “roll” and compress data into a single summary document for easy access.
• It offers more elasticity because queries can identify the most minor available interval and use that for their processing.

Also Read: Top Security Threats and Security Analysis Tools for Front-end Developers

Fusebox is a highly customizable front-end development tool and comes with frequent updates. It is simple to configure and has powerful features.

It allows you to build an application quickly and with ease of use. Plug-ins allow you to employ anything that the Fusebox core doesn’t handle.

• It uses a TypeScript compiler by default along with a powerful cache system.
• There is zero-configuration code-splitting, for a simple configuration syntax.
• It supports an integrated task runner for its extensive set of plug-ins.
• It has a built-in task runner, and the project automatically updates to reflect your changes.
• EMS dynamic imports are also supported.

Parcel is a speedy, zero-configuration web app bundler. It uses worker processes for multicore compilation. It also has a filesystem cache for fast rebuilds.

With its simple, out-of-the-box operability, it improves performance and minimizes hassles during configuration.

• You get support for JS, CSS, HTML, file assets, and more without plug-ins.
• With Babel, PostCSS, and PostHTML, code is automatically transformed.
• It splits output bundles, so you only load what is needed initially.
• It highlights code frames when it encounters errors, so you can pinpoint problems.

5. Browserify

Browserify lets you bundle dependencies in the browser. You can write code that uses ‘ require’ in the same way you would use it in Node.

It is simple, powerful, and easy to install. Its advantages are due to the ability to extend the Node ecosystem. It is flexible as it can be extended via plug-ins.

• It minimizes many pre-processing tasks with a transformative system.
• It solves the problems of asynchronous loading.
• It allows you to participate in the vast and growing NPM ecosystem.

The Uplers Advantage

At Uplers, we have a skilled and experienced team of developers with a thorough working knowledge of the most useful task runner and module bundler tools. We use these as well as other front-end development tools to create professional and immersive websites.

If you’re looking for front-end developers to manage your projects in the best way possible, do get in touch with us. Discover the Uplers advantage!

Similar Articles

Thank you for submitting the details!

We will keep your information safe. Feel free to contact us with any questions at [email protected]

Please check your email for next steps shared by Robert.

Similar Blogs

Pros And Cons of Hiring Remotely From India: An Ad Agency’s Guide on Offshore Hiring

• Raunak Jain
• November 27, 2023

2024 Latest Edition: Global Company’s Crash Course on Cross-cultural Effectiveness Before Onboarding Indian Remote Talents

• Aabha Tiwari
• November 17, 2023
• 5 Minute Read

What Are Your Options When Hiring Talents From Offshore Locations For Remote Positions?

• Nayantika Srivastava
• November 3, 2023
• 8 Minute Read

Subscribe to our Newsletter

We use cookies to make your experience better. OK

Privacy Overview

Getting Started

• Configuring Tasks
• Documentation

Why use a task runner?

In one word: automation. The less work you have to do when performing repetitive tasks like minification, compilation, unit testing, linting, etc, the easier your job becomes. After you've configured it through a Gruntfile , a task runner can do most of that mundane work for you—and your team—with basically zero effort.

Why use Grunt?

The Grunt ecosystem is huge and it's growing every day. With literally hundreds of plugins to choose from, you can use Grunt to automate just about anything with a minimum of effort. If someone hasn't already built what you need, authoring and publishing your own Grunt plugin to npm is a breeze. See how to get started .

Available Grunt plugins

Many of the tasks you need are already available as Grunt Plugins, and new plugins are published every day. While the plugin listing is more complete, here's a few you may have heard of.

Here's a preview!

While installing grunt is simple, it's slightly more involved to get it running on your project. To see what your effort will win you, take a look at this example output from running Grunt in a sample project .

Who uses Grunt?

These are just a few companies and projects that are using Grunt. See more here.

How do I get started?

Read the Getting Started guide for instructions on using Grunt in your projects. Once you've done that, check out a Sample Gruntfile and learn more about Configuring Tasks .

Grunt is an OpenJS Foundation project.

Latest Version

• Stable: v1.4.1 (npm)
• Development: HEAD (GitHub)

Latest News

• Grunt 1.4.0 released April 22, 2021
• Grunt 1.2.0 released July 03, 2020
• Grunt 1.1.0 released March 16, 2020

• Adam Simpson
• Jun 22, 2016

How To Harness The Machines: Being Productive With Task Runners

• 17 min read
• Mobile , JavaScript , Node.js
• Share on Twitter ,  LinkedIn

About The Author

Adam Simpson is a frontend developer working for Sparkbox in lovely Dayton, OH. He digs React.js, ancient text-editors, cookies, and his wife Christi (not … More about Adam ↬

Email Newsletter

Weekly tips on front-end & UX . Trusted by 200,000+ folks.

Task runners are the heroes (or villains, depending on your point of view) that quietly toil behind most web and mobile applications. Task runners provide value through the automation of numerous development tasks such as concatenating files, spinning up development servers and compiling code. In this article, we’ll cover Grunt, Gulp, Webpack and npm scripts. We’ll also provide some examples of each one to get you started. Near the end, I’ll throw out some easy wins and tips for integrating ideas from this post into your application.

There is a sentiment that task runners, and JavaScript advances in general, are over-complicating the front-end landscape. I agree that spending the entire day tweaking build scripts isn’t always the best use of your time, but task runners have some benefits when used properly and in moderation. That’s our goal in this article, to quickly cover the basics of the most popular task runners and to provide solid examples to kickstart your imagination regarding how these tools can fit in your workflow.

A Note On The Command Line

Task runners and build tools are primarily command-line tools. Throughout this article, I’ll assume a decent level of experience and competence in working with the command line. If you understand how to use common commands like cd , ls , cp and mv , then you should be all right as we go through the various examples. If you don’t feel comfortable using these commands, a great introductory post is available on Smashing Magazine. Let’s kick things off with the granddaddy of them all: Grunt.

Grunt was the first popular JavaScript-based task runner. I’ve been using Grunt in some form since 2012. The basic idea behind Grunt is that you use a special JavaScript file, Gruntfile.js , to configure various plugins to accomplish tasks. It has a vast ecosystem of plugins and is a very mature and stable tool. Grunt has a fantastic web directory that indexes the majority of plugins (about 5,500 currently). The simple genius of Grunt is its combination of JavaScript and the idea of a common configuration file (like a makefile), which has allowed many more developers to contribute to and use Grunt in their projects. It also means that Grunt can be placed under the same version control system as the rest of the project.

Grunt is battle-tested and stable. Around the time of writing, version 1.0.0 was released , which is a huge accomplishment for the Grunt team. Because Grunt largely configures various plugins to work together, it can get tangled (i.e. messy and confusing to modify) pretty quickly. However, with a little care and organization (breaking tasks into logical files!), you can get it to do wonders for any project.

In the rare case that a plugin isn’t available to accomplish the task you need, Grunt provides documentation on how to write your own plugin . All you need to know to create your own plugin is JavaScript and the Grunt API . You’ll almost never have to create your own plugin, so let’s look at how to use Grunt with a pretty popular and useful plugin!

Let’s look at how Grunt actually works. Running grunt in the command line will trigger the Grunt command-line program that looks for Gruntfile.js in the root of the directory. The Gruntfile.js contains the configuration that controls what Grunt will do. In this sense, Gruntfile.js can be seen as a kind of cookbook that the cook (i.e. Grunt, the program) follows; and, like any good cookbook, Gruntfile.js will contain many recipes (i.e. tasks).

We’re going to put Grunt through the paces by using the Grunticon plugin to generate icons for a hypothetical web app. Grunticon takes in a directory of SVGs and spits out several assets:

• a CSS file with the SVGs base-64-encoded as background images;
• a CSS file with PNG versions of the SVGs base-64-encoded as background images;
• a CSS file that references an individual PNG file for each icon.

The three different files represent the various capabilities of browsers and mobile devices. Modern devices will receive the high-resolution SVGs as a single request (i.e. a single CSS file). Browsers that don’t handle SVGs but handle base-64-encoded assets will get the base-64 PNG style sheet. Finally, any browsers that can’t handle those two scenarios will get the “traditional” style sheet that references PNGs. All this from a single directory of SVGs!

The configuration of this task looks like this:

Let’s walk through the various steps here:

• You must have Grunt installed globally .
• Create the Gruntfile.js file in the root of the project. It’s best to also install Grunt as an npm dependency in your package.json file along with Grunticon via npm i grunt grunt-grunticon --save-dev .
• Create a directory of SVGs and a destination directory (where the built assets will go).
• Place a small script in the head of your HTML, which will determine what icons to load.

Here is what your directory should look like before you run the Grunticon task:

Once those things are installed and created, you can copy the code snippet above into Gruntfile.js . You should then be able to run grunt grunticon from the command line and see your task execute.

The snippet above does a few things:

• adds a new config object to Grunt on line 32 named grunticon ;
• fills out the various options and parameters for Grunticon in the icons object;
• finally, pulls in the Grunticon plugin via loadNPMTasks .

Here is what your directory should look like post-Grunticon:

There you go — finished! In a few lines of configuration and a couple of package installations, we’ve automated the generation of our icon assets! Hopefully, this begins to illustrate the power of task runners: reliability, efficiency and portability.

Gulp: LEGO Blocks For Your Build System

Gulp emerged sometime after Grunt and aspired to be a build tool that wasn’t all configuration but actual code. The idea behind code over configuration is that code is much more expressive and flexible than the modification of endless config files. The hurdle with Gulp is that it requires more technical knowledge than Grunt. You will need to be familiar with the Node.js streaming API and be comfortable writing basic JavaScript.

Gulp’s use of Node.js streams is the main reason it’s faster than Grunt. Using streams means that, instead of using the file system as the “database” for file transformations, Gulp uses in-memory transformations. For more information on streams, check out the Node.js streams API documentation , along with the stream handbook.

As in the Grunt section, we’re going to put Gulp through the paces with a straightforward example: concatenating our JavaScript modules into a single app file.

Running Gulp is the same as running Grunt. The gulp command-line program will look for the cookbook of recipes (i.e. Gulpfile.js ) in the directory in which it’s run.

Limiting the number of requests each page makes is considered a web performance best practice (especially on mobile). Yet collaborating with other developers is much easier if functionality is split into multiple files. Enter task runners. We can use Gulp to combine the multiple files of JavaScript for our application so that mobile clients have to load a single file, instead of many.

Gulp has the same massive ecosystem of plugins as Grunt. So, to make this task easy, we’re going to lean on the gulp-concat plugin . Let’s say our project’s structure looks like this:

Two JavaScript files are in our src directory, and we want to combine them into one file, app.js , in our dist/ directory. We can use the following Gulp task to accomplish this.

The important bits are in the gulp.task callback. There, we use the gulp.src API to get all of the files that end with .js in our src directory. The gulp.src API returns a stream of those files, which we can then pass (via the pipe API ) to the gulp-concat plugin. The plugin then concatenates all of the files in the stream and passes it on to the gulp.dest function. The gulp-dest function simply writes the input it receives to disk.

You can see how Gulp uses streams to give us “building blocks” or “chains” for our tasks. A typical Gulp workflow looks like this:

• Get all files of a certain type.
• Pass those files to a plugin (concat!), or do some transformation.
• Pass those transformed files to another block (in our case, the dest block, which ends our chain).

As in the Grunt example, simply running gulp from the root of our project directory will trigger the default task defined in the Gulpfile.js file. This task concatenates our files and let’s us get on with developing our app or website.

The newest addition to the JavaScript task runner club is Webpack . Webpack bills itself as a “module bundler,” which means it can dynamically build a bundle of JavaScript code from multiple separate files using module patterns such as the CommonJS pattern. Webpack also has plugins, which it calls loaders.

Webpack is still fairly young and has rather dense and confusing documentation. Therefore, I’d recommend Pete Hunt’s Webpack repository as a great starting point before diving into the official documentation. I also wouldn’t recommend Webpack if you are new to task runners or don’t feel proficient in JavaScript. Those issues aside, it’s still a more specific tool than the general broadness of Grunt and Gulp. Many people use Webpack alongside Grunt or Gulp for this very reason, letting Webpack excel at bundling modules and letting Grunt or Gulp handle more generic tasks.

Webpack ultimately lets us write Node.js-style code for the browser, a great win for productivity and making a clean separation of concerns in our code via modules. Let’s use Webpack to achieve the same result as we did with the Gulp example, combining multiple JavaScript files into one app file.

Webpack is often used with Babel to transpile ES6 code to ES5. Transpiling code from ES6 to ES5 lets developers use the emerging ES6 standard while serving up ES5 to browsers or environments that don’t fully support ES6 yet. However, in this example, we’ll focus on building a simple bundle of our two files from the Gulp example. To begin, we need to install Webpack and create a config file, webpack.config.js . Here’s what our file looks like:

In this example, we’re pointing Webpack to our src/foo.js file to begin its work of walking our dependency graph. We’ve also updated our foo.js file to look like this:

And we’ve updated our bar.js file to look like this:

This is a very basic CommonJS example. You’ll notice that these files now “export” a function. Essentially, CommonJS and Webpack allow us to begin organizing our code into self-contained modules that can be imported and exported throughout our application. Webpack is smart enough to follow the import and export keywords and to bundle everything into one file, dist/app.js . We no longer need to maintain a concatenation task, and we simply need to adhere to a structure for our code instead. Much better!

Webpack is akin to Gulp in that “It’s just JavaScript.” It can be extended to do other task runner tasks via its loader system. For instance, you can use css-loader and sass-loader to compile Sass into CSS and even to use the Sass in your JavaScript by overloading the require CommonJS pattern ! However, I typically advocate for using Webpack solely to build JavaScript modules and for using another more general-purpose approach for task running (for example, Webpack and npm scripts or Webpack and Gulp to handle everything else).

npm Scripts

npm scripts are the latest hipster craze, and for good reason. As we’ve seen with all of these tools, the number of dependencies they might introduce to a project could eventually spin out of control. The first post I saw advocating for npm scripts as the entry point for a build process was by James Halliday. His post perfectly sums up the ignored power of npm scripts (emphasis mine):

"There are some fancy tools for doing build automation on JavaScript projects that I’ve never felt the appeal of because the lesser-known npm run command has been perfectly adequate for everything I’ve needed to do while maintaining a very tiny configuration footprint" .

Did you catch that last bit at the end? The primary appeal of npm scripts is that they have a “very tiny configuration footprint.” This is one of the main reasons why npm scripts have started to catch on (almost four years later, sadly). With Grunt, Gulp and even Webpack, one eventually begins to drown in plugins that wrap binaries and double the number of dependencies in a project.

Keith Cirkel has the go-to tutorial on using npm to replace Grunt or Gulp. He provides the blueprint for how to fully leverage the power of npm scripts, and he’s introduced an essential plugin, Parallel Shell (and a host of others just like it).

In our section about Grunt, we took the popular module Grunticon and created SVG icons (with PNG fallbacks) in a Grunt task. This used to be the one pain point with npm scripts for me. For a while, I would keep Grunt installed for projects just to use Grunticon. I would literally “shell out” to Grunt in my npm task to achieve task-runner inception (or, as we started calling it at work, a build-tool turducken). Thankfully, The Filament Group , the fantastic group behind Grunticon, released a standalone (i.e. Grunt-free) version of their tool, Grunticon-Lib . So, let’s use it to create some icons with npm scripts!

This example is a little more advanced than a typical npm script task. A typical npm script task is a call to a command-line tool, with the appropriate flags or config file. Here’s a more typical task that compiles our Sass to CSS:

See how it’s just one line with various options? No task file needed, no build tool to spin up — just npm run sass from the command line, and you’re Sass is now CSS. One really nice feature of npm scripts is how you can chain script tasks together. For instance, say we want to run some task before our Sass task runs. We would create a new script entry like this:

That’s right: npm understands the pre- prefix. It also understands the post- prefix. Any script entry with the same name as another script entry with a pre- or post- prefix will run before or after that entry.

Converting our icons will require an actual Node.js file. It’s not too serious, though. Just create a tasks directory, and create a new file named grunticon.js or icons.js or whatever makes sense to those working on the project. Once the file is created, we can write some JavaScript to fire off our Grunticon process.

Note: All of these examples use ES6, so we’re going to use babel-node to run our task. You can easily use ES5 and Node.js, if that’s more comfortable.

Let’s get into the code and figure out what’s going on.

• We import (i.e. require) two libraries, grunticon-lib and globby . Globby is one of my favorite tools, and it makes working with files and globs so easy. Globby enhances Node.js Glob (select all JavaScript files via ./*.js ) with Promise support. In this case, we’re using it to get all files in the src/icons directory.
• the icon files,
• the destination,
• the options.The library takes over and chews away on those icons and eventually creates the SVGs and PNG versions in the directory we want.
• We’re almost done. Remember that this is in a separate file, and we need to add a “hook” to call this file from our npm script, like this: "icons": "babel-node tasks/icons.js" .
• Now we can run npm run icons , and our icons will get created every time.

npm scripts offer a similar level of power and flexibility as other task runners, without the plugin debt.

Breakdown Of Task Runners Covered Here

Some easy wins.

All of these examples and task runners might seem overwhelming, so let’s break it down. First, I hope you don’t take away from this article that whatever task runner or build system you are currently using needs to be instantly replaced with one mentioned here. Replacing important systems like this shouldn’t be done without much consideration. Here’s my advice for upgrading an existing system: Do it incrementally.

Wrapper Scripts!

One incremental approach is to look at writing a few “wrapper” npm scripts around your existing task runners to provide a common vocabulary for build steps that is outside of the actual task runner used. A wrapper script could be as simple as this:

Many projects utilize the start and test npm script blocks to help new developers get acclimatized quickly. A wrapper script does introduce another layer of abstraction to your task runner build chain, yet I think it’s worth being able to standardize around the npm primitives (e.g. test ). The npm commands have better longevitiy than an individual tool.

Sprinkle In A Little Webpack

If you or your team are feeling the pain of maintaining a brittle “bundle order” for your JavaScript, or you’re looking to upgrade to ES6, consider this an opportunity to introduce Webpack to your existing task-running system. Webpack is great in that you can use as much or as little of it as you want and yet still derive value from it. Start just by having it bundle your application code, and then add babel-loader to the mix. Webpack has such a depth of features that it’ll be able to accommodate just about any additions or new features for quite some time.

Easily Use PostCSS With npm Scripts

PostCSS is a great collection of plugins that transform and enhance CSS once it’s written and preprocessed. In other words, it’s a post-processor. It’s easy enough to leverage PostCSS using npm scripts. Say we have a Sass script like in our previous example:

We can use npm script’s lifecycle keywords to add a script to run automatically after the Sass task:

This script will run every time the Sass script is run. The postcss-cli package is great, because you can specify configuration in a separate file. Notice that in this example, we add another script entry to accomplish a new task; this is a common pattern when using npm scripts. You can create a workflow that accomplishes all of the various tasks your app needs.

Task runners can solve real problems. I’ve used task runners to compile different builds of a JavaScript application, depending on whether the target was production or local development. I’ve also used task runners to compile Handlebars templates, to deploy a website to production and to automatically add vendor prefixes that are missed in my Sass. These are not trivial tasks, but once they are wrapped up in a task runner, they became effortless.

Task runners are constantly evolving and changing. I’ve tried to cover the most used ones in the current zeitgeist. However, there are others that I haven’t even mentioned, such as Broccoli , Brunch and Harp . Remember that these are just tools: Use them only if they solve a particular problem, not because everyone else is using them. Happy task running!

Further Reading

• Become A Command-Line Power User With Oh-My-ZSH And Z
• An Introduction To PostCSS
• Get Up And Running With Grunt
• Building With Gulp
• Accessible Target Sizes Cheatsheet

Smashing Newsletter

Tips on front-end & UX, delivered weekly in your inbox. Just the things you can actually use.

Front-End & UX Workshops, Online

With practical takeaways, live sessions, video recordings and a friendly Q&A.

TypeScript in 50 Lessons

Everything TypeScript, with code walkthroughs and examples. And other printed books.

What is a JavaScript task runner?

Get the Learn to Code Starter Pack

Break into tech with the logic & computer science skills you’d learn in a bootcamp or university — at a fraction of the cost. Educative's Learn to Code Starter Pack is perfect for new learners hoping to launch a career in tech.

A JavaScript task runner is a tool or framework that facilitates the automation of repetitive tasks in a JavaScript project.

It offers a means to specify and execute repetitive, numerous tasks like:

Code compilation: Compiling SASS files into CSS files, making them browser-friendly by developers.

File optimization: Minifying JavaScript and CSS files and reducing the lines of code to optimize the file.

Test execution: Combining multiple individual assets, such as JavaScript files, CSS files, images, and other resources, into a single file.

Asset bundling: Running the test scripts against the software system under test to observe and verify its behavior.

Task runners aim to simplify the development workflow by reducing manual effort and improving efficiency.

Available JavaScript task runners

Many task runners are available in the industry, i.e., webpack, npm scripts, Brunch, and Parcel. However, we will focus on the most widely used and efficient ones for developing JavaScript projects.

Gulp is a well-known JavaScript task runner. It lets you define tasks using JavaScript code, specifying source files and destination paths. These tasks can then be executed to perform the defined actions. Moreover, Gulp uses a streaming build system, which operates on data streams rather than manipulating individual files.

Grunt is another renowned task runner. It mainly employs a configuration-based approach with a predefined collection of plugins and jobs. Moreover, it enables you to configure and execute tasks by defining the desired actions, source files, and destination path in a Gruntfile.js file.

Grunt is known for its flexibility and vast customization options. It helps streamline and automate development tasks, making it easier to manage and maintain JavaScript projects for developers.

Let's see how a task runner like Grunt operates by installing it on our system.

Installing Grunt

To install Grunt.js on Linux, you can follow these steps:

Ensure you have Node.js and npm (Node Package Manager) installed on your Linux system. You can verify this by running the following commands in your terminal:

Now install Grunt on your system using this command on the terminal:

You can verify its installation by checking its version:

Once you have Grunt installed, open your terminal and navigate to your project directory.

Create a package.json file for your project by running the following command:

You will be prompted to enter various details about your project. You can press the Enter to accept the default values or provide your own.

Next, install Grunt locally in your project by running the following command:

After the installation is complete, create a Gruntfile.js file in your project directory. This file will contain your Grunt configuration and tasks. You can create it using a text editor or by running the command in the terminal:

Open the Gruntfile.js file and define your Grunt tasks and configuration according to your project. For your ease and understanding, we are adding two tasks, run and sleep .

Once you’ve defined the tasks in Gruntfile.js , you can run Grunt commands in your terminal. For example, to run the default task defined in your Gruntfile.js , use the following command on your terminal:

grunt all runs both tasks simultaneously. By running all these commands on your terminal, you will see how a task runner operates and automates the repetitive tasks as written in the Gruntfile.js .

To summarize, a task runner is a valuable tool for automating repetitive processes in JavaScript projects. Task runners make the development process easier and more efficient by bundling and minifying assets, performing tests, enhancing code, and managing dependencies. Furthermore, they give developers a mechanism to quickly create, set up, and complete tasks, which saves them a lot of time and effort.

RELATED TAGS

CONTRIBUTOR

Learn in-demand tech skills in half the time

Skill Paths

Assessments

Learn to Code

Interview Preparation

Data Science & ML

GitHub Students Scholarship

Early Access Courses

Explore Catalog

For Individuals

Try for Free

Become an Author

Become an Affiliate

Earn Referral Credits

Frequently Asked Questions

Privacy Policy

Cookie Policy

Terms of Service

Business Terms of Service

Data Processing Agreement

Copyright © 2023 Educative, Inc. All rights reserved.

Your Docusaurus site did not load properly.

A very common reason is a wrong site baseUrl configuration .

Current configured baseUrl = / (default value)

We suggest trying baseUrl =

A toolkit to automate & enhance your workflow

Leverage gulp and the flexibility of JavaScript to automate slow, repetitive workflows and compose them into efficient build pipelines.

• TypeScript Develop in any language
• PNG Create assets with any tool
• Markdown Write using any format
• JavaScript Get compiled code
• WebP Get optimized images
• HTML Get rendered content

Using code over configuration, utilize all of JavaScript to create your gulpfile—where tasks can be written using your own code or chained single purpose plugins.

Write individual, focused tasks and compose them into larger operations, providing you with speed and accuracy while reducing repetition.

By using gulp streams, you can apply many transformations to your files while in memory before anything is written to the disk—significantly speeding up your build process.

Connecting plugins

Using community-built plugins is a quick way to get started with gulp. Each plugin does a small amount of work, so you can connect them like building blocks. Chain together plugins from a variety of technologies to reach your desired result.

Browse the community plugins to see what’s available!

Individual backers

Since 2013, gulp has been the toolkit of choice for developers and designers alike. Not only do we have communities who’ve relied on us since the beginning, but there’s also a constant flow of new users who find out how great their workflow can be with gulp.

Gulp needs your help! We want to continue expanding our team and find even more contributors from every discipline to maintain and improve the project you love!

$2 each month

Thanks for supporting us. Every contribution helps us maintain and improve gulp!

$5 each month

We'll rotate your avatar through the individual contributors banner below.

$10 each month

We'll thank you on Twitter and rotate your avatar through the individual contributors banner below.

Advisory boards aren’t only for executives. Join the LogRocket Content Advisory Board today →

• Product Management
• Solve User-Reported Issues
• Find Issues Faster
• Optimize Conversion and Adoption
• Start Monitoring for Free

Node.js task runners vs. module bundlers

Editor’s note: This post was updated on 2 December 2021 to include a more robust comparison of task runners and module bundlers, as the latter have risen significantly in usage and popularity since this post’s original publication in 2019. We have also updated several sections to include new information about recent versions of the libraries and tools discussed in this post.

This post will cover the following topics:

• The history and philosophy behind Node.js
• Benefits of using a task runner

Grunt vs. Gulp: A task runner comparison

Task runners vs. bundlers, task runner alternatives, a brief history of node.js.

The tooling ecosystem for JavaScript is incredible. You’ll be hard pressed to find any other language with as much tooling or as many different users contributing to this tooling. From its humble beginnings as a language originally designed in 10 days to its C10K-achieving foothold in the server space, you will not find another language as malleable as this one.

Node.js , the popular server-side implementation of JavaScript, was first introduced in 2009. This platform allowed frontend developers to quickly become viable as backend developers nearly overnight, unblocking frontend teams everywhere. Its success warranted a tool for easily distributing source code and, in 2010, this need was satisfied by npm.

Node.js is heralded as being fast, approachable, and — perhaps most alluring of all — simple. It quickly began siphoning users from other platforms like PHP , a language created to generate dynamic websites. PHP has perhaps thousands of global functions available at any time and requires a stack of configuration files.

Node.js allowed developers to migrate to the platform and get a fresh start. Being so new, it hadn’t yet developed the “batteries included” frameworks of other languages. One of the guiding principles of Node.js is to keep the core simple. You won’t find inbuilt tools for connecting to MySQL, generating a UUID, or calculating Levenshtein distance.

At this same time, the JavaScript language was transforming as well. Some features are backwards compatible thanks to user-land “polyfills”, but in order for a language to advance, it simply must add the occasional new syntax. Developers yearn for new syntax, yet old browsers are the reality, which led to the development of transpilers.

The simplicity of working with Node.js was eventually dwarfed in importance by the fact that code is written in JavaScript, the lingua franca of the web. Node.js gained more and more traction as a tool for transforming frontend assets from one representation, such as ES7 or SASS, to another representation, such as ES5 or CSS.

There was just one catch, though: JavaScript engineers typically want to keep writing JavaScript. This led to the development of task runners, specialized Node.js tools designed to run other tools.

The rise of the task runner

As we know, there are essentially three technologies required to construct a website, each of which is consumed directly by the browser:

• HTML, which controls the structure of a webpage
• CSS, controlling the appearance of a webpage
• JavaScript, which is used for programming website interactivity

For simpler websites or small teams, working with these languages directly is usually a fine approach. However, with complex websites or apps that run on the browser that are built by teams of engineers — each of whom have their own specializations — working directly with these basic languages can start to fall short.

What are the benefits of using a task runner?

Consider, for example, when the branding for a corporate website changes. A hexadecimal color code used in several different style files may need to be changed. With raw CSS, this operation would require orchestrated changes across a few teams. With SASS, such a change could be made in a single line.

Similar concepts apply to HTML, where we generate markup using templating tools like Mustache or virtual DOMs like React. They also apply to JavaScript, where an engineer may write code using the async/await ES2017 syntax that then gets transpiled into a complex ES5 switch statement with callbacks.

At this point, we may have a site which needs to have SASS compiled into CSS, ES2015 code which needs to be transpiled into ES5, and React/JSX templates that need to be converted into raw JavaScript. Other operations are also beneficial, such as minifying compiled code and compressing PNG images into their smallest representation.

Each one of these tasks needs to be run in a particular order when a website is being built. Depending on the context of a particular website build  —  such as it being built for development/debugging purposes or production — some tasks must be altered or skipped entirely. Such complexity has inspired the creation of task runner tools.

Two popular Node.js task runners came to the rescue. The first is Grunt , with a first commit made in September 2011. This tool takes an imperative approach to configuring different tasks, building out deeply nested objects and calling a few methods.

The second one is Gulp , having an initial commit in July 2013. This tool takes a different approach, more functional in nature, piping the output of one function into the input of another function, streaming the results around.

Let’s consider a simple web application we’d like to mockup using a subset of these technologies. This application depends on multiple SASS and JS files. We’d like to convert the SASS files into CSS, concatenating the result.

For sake of brevity, we’ll also simply concatenate the JS files together, and assume the module pattern , instead of using CommonJS require statements. Let’s see how such a configuration might look using these different task runners.

The Grunt config file

This approach requires the following modules be installed:

• grunt-contrib-sass
• grunt-contrib-concat
• grunt-contrib-clean

With this approach, we can run grunt style , grunt script , or grunt build to do the work of both.

Over 200k developers use LogRocket to create better digital experiences

The Gulp config file

The equivalent Gulp version of the previous example is as follows. This requires we have gulp , gulp-sass , gulp-concat , and node-sass installed. With this approach, we can run gulp style , gulp script , or gulp build to do the work of both.

As you can see, the Gulp example is a little more terse than the Grunt example because configuring a Gulp file can take comparatively less time than configuring a Grunt file. But, Grunt files are more readable. So, it depends on you which approach you want to take.

Philosophically, the two tools take different approaches to implementing runnable tasks, but ultimately they allow you to do similar things. Again, Grunt was introduced before Gulp. They’ve both have had comparable popularity throughout their lifespans:

Both projects are highly modular, allowing developers to create specialized plugins. These plugins allow an external tool, such as eslint , sass , or browserify to easily integrate into the task runner. We actually have an example of this in the code we looked at earlier: the popular SASS tool has both a grunt-contrib-sass module, and a gulp-sass module available.

These two tools may be essentially “done.” As of this writing, Grunt’s last publish was made in May 2021, and Gulp’s was last released in 2019.

What does it mean to be “done,” a word that is both literally and figuratively a four-letter word in the JavaScript community? Well, in this case, it probably means the core task runner modules do everything they need to do and that any additional functionality can be added via plugin.

In the 2021 frontend development ecosystem, task runners are getting less popular, and module bundlers are taking their place .

A module bundler is a tool for frontend developers to bundle all the JavaScript modules into a single JavaScript file that can be executed in the browser. The biggest names in module bundlers are webpack, Rollup, and Parcel. We’ll talk about each of them below.

The web.dev blog has created a website called Tooling.Report , where they compare the best bundlers available, and currently, only four module bundlers are compared by them: webpack, Browserify, Parcel, and Rollup. According to their results, in November 2021, Parcel passed the most amount of tests (93 percent). Webpack comes in second, with a passing mark of 90 percent.

Webpack is a newer tool that can also be used to take source files, combine them in various ways, and output them into single files. Webpack can be configured in a manner similar to Grunt and Gulp using a file called webpack.config.js .

It is also highly modular and we can achieve similar results using plugins like sass-loader . It has its own philosophical differences from Grunt and Gulp, but, it’s still similar in the sense that a Node-based process ultimately transforms assets and is configured via a JavaScript file.

However, it’s different enough that it wouldn’t be fair to compare it directly against Grunt and Gulp. It is primarily a tool for transforming JavaScript, based on require statements and a hierarchy of dependencies — it’s not essentially a task runner. It is a module bundler.

The first commit to webpack happened in March 2012, between the first commits to Grunt and Gulp, and it is still under active development, as it is used heavily around the world. It is the most popular module bundler, with over 15 million weekly downloads.

Whereas Grunt and Gulp help perform many types of generic tasks, webpack is specifically more interested in building frontend assets. But, it is not only limited to that — webpack can also be useful in Node.js development as well.

Rollup is another module bundler for JavaScript that compiles small pieces of code into more extensive and complex code. Rollup’s configuration is similar to webpack’s, and those who are familiar with webpack will find Rollup’s configuration similar and easy to set up.

Developers often like Rollup because of their more straightforward API and design, making writing plugins easy. The Rollup documentation is also excellent.

Parcel is gaining massive popularity because of its zero-configuration approach. It is also very lightweight, and adding Parcel to a project is straightforward.

Parcel doesn’t use any config files; passing the entry file through the CLI is enough to get started with it. It does the rest of the work itself. Though, now, webpack 4 also has a zero-configuration approach, it is limited to the features compared to what Parcel offers.

Parcel can be an excellent option to start when building a small to medium-sized application.

Browserify has always been a close competitor to webpack, but in recent years, webpack has grown a lot faster than Browserify.

Browserify is not a module bundler. Instead, it brings the power of Node.js to the browser. This package lets you use many Node.js packages in the browser for your frontend packages.

For the most complex of build systems, it makes total sense to use a Node.js task runner. There’s a tipping point where it just doesn’t make sense to maintain the build process in a language other than the one the application is written in because it’s become so complex.

However, for many projects, these task runners end up being overkill. They are an additional tool that we need to add to a project and keep up-to-date. The complexity of task runners is easy to overlook when they’re so readily available via npm install .

With the previous examples we looked at, we needed 32MB of disk space to use Grunt and 40MB of space to use Gulp. These simple build commands — concatenate two JavaScript files and compile/concatenate two SASS files — takes 250ms with Grunt and 370ms with Gulp.

Using Bash scripts as a task runner alternative

Gulp’s approach of taking outputs from one operation and piping them into another operation should sound familiar. The same piping system is also available to us via the command line, which we can automate by use of Bash scripts. Such scripting features are already available to users of macOS and Linux computers ( WSL can help with Windows).

We can use the following three Bash scripts to achieve what our Grunt and Gulp examples are doing:

When we use this approach, we’ll only need a 2.5MB sass binary (executable). The time it takes to perform the entire build operation is also lessened: on my machine the operation only takes 25ms. This means we’re using about ~1/12 the disk space to run 10x faster. The difference will likely be even higher with more complex build steps.

This approach can even be inlined inside of your package.json file. Then, commands can be executed via npm run style , npm run script , and npm run build .

This is, of course, a trade-off. The biggest difference is that Bash is a shell scripting language with a syntax completely unlike JavaScript . It may be difficult for some engineers who work on a JavaScript project to write the appropriate scripts required to build a complex application.

Another shortcoming is that Bash scripts require that some sort of executable is available for each operation we want to incorporate. Luckily for us, they usually are.

Browserify and Babel , the go-to transpiler, each offers an executable. Sass, Less, Coffeescript, and JSX also each has an executable available. If one isn’t available, we can write it ourselves; however, once we reach that point, we might want to consider just using a task runner.

The command line scripting capabilities of our machines are very powerful. It’s easy to overlook them, especially when we spend so much time in a higher level language like JavaScript.

As we’ve seen, they are often powerful enough to complete many of our frontend asset-building tasks and can often do so faster. Consider using these tools when you start your next project, and only switch to a heavier solution like a task runner if you reach a limitation with Bash scripting.

200s only Monitor failed and slow network requests in production

Deploying a Node-based web app or website is the easy part. Making sure your Node instance continues to serve resources to your app is where things get tougher. If you’re interested in ensuring requests to the backend or third-party services are successful, try LogRocket .

LogRocket is like a DVR for web and mobile apps, recording literally everything that happens while a user interacts with your app. Instead of guessing why problems happen, you can aggregate and report on problematic network requests to quickly understand the root cause.

LogRocket instruments your app to record baseline performance timings such as page load time, time to first byte, slow network requests, and also logs Redux, NgRx, and Vuex actions/state. Start monitoring for free .

Share this:

• Click to share on Twitter (Opens in new window)
• Click to share on Reddit (Opens in new window)
• Click to share on LinkedIn (Opens in new window)
• Click to share on Facebook (Opens in new window)

Stop guessing about your digital experience with LogRocket

Recent posts:.

Nesting web components in vanilla JavaScript

Web components are underrated for the performance and ergonomic benefits they provide in vanilla JS. Learn how to nest them in this post.

Using defer in Angular 17 to implement lazy loading

Angular’s new defer feature, introduced in Angular 17, can help us optimize the delivery of our apps to end users.

Using ElectricSQL to build a local-first application

ElectricSQL is a cool piece of software with immense potential. It gives developers the ability to build a true local-first application.

Using Rust and Leptos to build beautiful, declarative UIs

Leptos is an amazing Rust web frontend framework that makes it easier to build scalable, performant apps with beautiful, declarative UIs.

Leave a Reply Cancel reply

Search code, repositories, users, issues, pull requests...

Provide feedback.

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly.

To see all available qualifiers, see our documentation .

task-runner

Here are 605 public repositories matching this topic..., celery / celery.

Distributed Task Queue (development branch)

• Updated Dec 5, 2023

cosmtrek / air

☁️ Live reload for Go apps

• Updated Dec 3, 2023

go-task / task

A task runner / simpler Make alternative written in Go

• Updated Dec 4, 2023

NomicFoundation / hardhat

Hardhat is a development environment to compile, deploy, test, and debug your Ethereum software.

• Updated Dec 6, 2023

oxequa / realize

Realize is the #1 Golang Task Runner which enhance your workflow by automating the most common tasks and using the best performing Golang live reloading.

• Updated May 14, 2021

Bogdanp / dramatiq

A fast and reliable background task processing library for Python 3.

• Updated Nov 6, 2023

lukeed / taskr

A fast, concurrency-focused task automation tool.

• Updated Dec 21, 2020

moonrepo / moon

A task runner and repo management tool for the web ecosystem, written in Rust.

sagiegurari / cargo-make

Rust task runner and build tool.

welaika / wordmove

Multi-stage command line deploy/mirroring and task runner for Wordpress

• Updated Oct 18, 2022

pydoit / doit

task management & automation tool

• Updated Oct 21, 2023

google / marl

A hybrid thread / fiber task scheduler written in C++ 11

• Updated Nov 29, 2023

Modern Make

• Updated Jul 1, 2023

nat-n / poethepoet

A task runner that works well with poetry.

• Updated Nov 19, 2023

dagu-dev / dagu

Yet another cron alternative with a Web UI, but with much more capabilities. It aims to solve greater problems.

jacobdeichert / mask

🎭 A CLI task runner defined by a simple markdown file

• Updated Oct 16, 2023

joerdav / xc

Markdown defined task runner.

REBELinBLUE / deployer

Deployer is a free and open source deployment tool.

• Updated Nov 30, 2021

logeshpaul / Frontend-Cheat-Sheets

Collection of cheat sheets(HTML, CSS, JS, Git, Gulp, etc.,) for your frontend development needs & reference

• Updated Nov 7, 2022

RyanZim / awesome-npm-scripts

Everything awesome related to npm scripts and using npm as a build tool.

• Updated Oct 8, 2022

Improve this page

Add a description, image, and links to the task-runner topic page so that developers can more easily learn about it.

Curate this topic

Add this topic to your repo

To associate your repository with the task-runner topic, visit your repo's landing page and select "manage topics."

Advanced Basics: Using Task Runner in Visual Studio

If the world is running on javascript, why not automate your client-side tasks through visual studio's task runner.

Content Update

There is an updated post on this category found at Task Runner Gulp Update in Visual Studio .

With JavaScript as currently the primary language for developers , it made sense when Microsoft released Visual Studio 2019 (or more recently Visual Studio 2022) to include client-side tools to simplify the JavaScript development process.

One of those tools was a Task Runner. 

When the Task Runner was introduced, developers of the C# community never even knew what it was or how it worked (including me).

Now, since I've dug into it, it proves it's another great tool in the DevOps toolbelt.

What is a Task Runner

A Task Runner is a tool to automate repetitive client-side tasks.

The tool runs off of a configuration file (either Gulp or Grunt) to execute on any number of static assets in a directory.

For this post, we'll focus on using Gulp with a gulpfile.js .

Setting up the Task Runner

In Visual Studio 2019 (or 2022), confirm you are running the latest Node version.

• Download the latest version of Node and install it normally.
• In Visual Studio, go to Tools, Options.
• Expand the Projects and Solutions, Web Package Management, then External Web Tools.
• Confirm $(PATH) is at the top of your "location of external tools"

If you installed NodeJs properly, it will be in your system path. The $(PATH) will point to that when a build process occurs.

Next, since a Task Runner uses Node for it's engine, we need a populated package.json file to hold the installed packages used in our Task Runner.

For starters, let's install our Gulp package.

• Open the Package Manager Console (View / Windows / Package Manager Console)
• Change into the directory containing the root of your solution.
• Type: npm install -g gulp

Examine the package.json file in the directory. It should contain a gulp entry:

Once we have our package installed, we can use it in our test.

Testing Gulp

One of the best ways to test it out is to create a simple task. Think of it like a "Hello World" for our Task Runner.

• Create a gulpfile.js in the root of your project with the following contents. var   gulp   =   require ( 'gulp' ); gulp . task ( 'testTask' ,   function   ( done )   {      console . log ( 'Hello World! We finished a task!' );      done (); });
• Save the file.
• Open your Task Runner Explorer.
• Right-click on your testTask and run it. 

You should see it executed to the right in the output window.

Troubleshooting

One of the issues I kept running into with the Task Runner was it kept saying "No Task Runner Configurations were found."

If you see this and you have a valid configuration file , click on the refresh button on the left and it should reappear.

The trick is if you make any changes to the gulpfile.js , it will unload from the Task Runner.

Click the refresh button to gain it back. NOTE: This has been fixed in Visual Studio 2022.

If you don't have a valid configuration file , check your Output Window ( View / Output Window ) and set your "Show Output From:" to Task Runner Output.

This will tell you where the error resides.  

Structure of a gulpfile.js

While every gulpfile is considered a "snowflake," the one structured pattern I see the most contains the following:

• Packages defined at the top
• Tasks (processing and cleanup)
• Global default and cleanup tasks

The packages at the top are the modules installed through your "npm installs" 

For every automated concept in a gulpfile.js, there should be two tasks: a processing task and a cleanup task.

The processing task is meant to achieve what we want automated.

The cleanup task is meant to delete the created or processed files.

All of the examples below will contain this type of structure so you can reuse these tasks in your own projects.

Creating Tasks

For most tasks, you don't want to get confused by the various paths for each files which is why I create a source and destination object for my assets.

Now, the most used tasks for Task Runners are bundling and minifying. These two tasks are what makes websites fast.

I've always said speed is what keeps your audience on your site. If you create code small enough and relevant to a particular page, shove them into small chunks, and shrink down to their minimal size, you'll create websites that outperform 95% of your competition.

With that said, we'll focus on JavaScript and CSS.

Bundling/Minifying CSS

Whether it's SASS or LESS , bundling CSS is a necessity when building fast websites.

If you have a solid way of organizing your CSS , using Task Runners to bundle up stylesheets is an easy task. In our example, we'll be using SASS.

You want your tasks to be as quick as possible.

Notice at the bottom. I have a global 'default' and 'cleanup' where you can have an array of tasks to cleanup and process your static files.

The gp_sass package eliminates two tasks with one method. It converts our stylesheets into plain CSS and compresses ("bundles") them into one. The last step adds a suffix of '.min' to the end of the file.

Minifying JavaScript

Ahh, the 400-pound gorilla in the room.

With JavaScript, it's only a matter of selecting the right libraries to perform the bundling and minifying of the project's scripts.

Again, if you have a method of organizing your scripts into a concise folder structure, the process will flow easier.

This gives you a simple way of minifying your JavaScript and placing it into a run-time folder.

In today's post, we took a simple tool and automated tasks to make our life a little easier.

While bundling and minifying are the basics when using a Task Runner, there are a ton of other tasks available including minifying HTML or optimizing your images to make them smaller and load faster.

Always be mindful when automating your tasks to find the right balance between fast tasks and useful client-side tasks.

If Visual Studio Code is your editor of choice, refer to this post on Microsoft's site.

Do you have a favorite Gulp or Grunt task? How many tasks run through your Task Runner? Post your comments below and let's discuss.  

Other Visual Studio Task Runner Posts

• Visual Studio 2015 Front-end Tooling - Gulp and Grunt
• Creating a Dynamic Dialog System with Bootstrap and ASP.NET 5
• Quick Tip: Creating Multiple JavaScript Files using Gulp

Did you like this content? Show your support by buying me a coffee.

Jonathan Danylko is a web architect and entrepreneur who's been programming for over 25 years. He's developed websites for small, medium, and Fortune 500 companies since 1996.

He currently works at Insight Enterprises as an Principal Software Engineer  Architect.

When asked what he likes to do in his spare time, he replies, "I like to write and I like to code. I also like to write about code."

DEV Community

Posted on Jul 27, 2020

Implementing javascript task runner

Introduction..

Hi, I would be writing on how to(I would) implement a task runner in javascript. I assume you already have a bit of programming experience. While the language used in this article is javascript, the algorithm is pretty simple and can be easily replicated in any other programming language. Also this is my first technical article and I am still learning the ropes of technical writing but I will try to explain the thought process as simple as I can. At the end of this article we should have a small javascript task runner library that can create a task and also run one or more task in any order. I would also include the link to the full source code on GitHub at the end of this article.

I believe you would find this article interesting if you are interested in how task runners work internally, build systems or just interested in algorithms.

What is a task runner?

A task runners is basically what the name implies, its a piece of code that runs specified task(s) based on a certain criteria. Examples of a task would include copying a file, pre-processing a file or it could be a simple computation. Apart from running a specified task, the task runner is also able to run sequence of task based on a specified order, so this way you can combine and run multiple tasks in different order as we would see shortly.

Where can I use a task runner?

Task runners are usually used in build systems to automate repetitive processes. An example where this could work is when you want to customize bootstrap in your frontend project; typically you would have to specify tasks like clear ; to clean up build directory, build:sass , build:jquery and copy:css ; to copy compiled sass output to an output(build) directory etc. A task runner would be handy in this case and can be used to specify the tasks in the order you want them executed which also saves you development time. Gulp and Grunt are examples of very popular javascript task runner and are used mostly for javascript build system.

To Implement a Task runner

So far, from what we know above, our runner library would need two important methods;

• One for defining the task.
• Another for running our task(s)

And in the rest of this article we would incrementally build upon this knowledge.

#Step 1: Define the data structure

Define the data structure for saving our task. The first thing we need to do is to decide how best to save our data(tasks), and to do that we would use a dictionary(objects). The reason for using the dictionary data structure is because it is really fast to lookup and insert data. This would mean that we don't spend so much time in our program looking up and updating data, which would end up slowing down our library.

#Step 2: Implement task function

The next step is to implement the task function. This is an important part of the task runner because this is how we are able to create task which we can run later. Our task function would require two parameters; the first parameter taskName defines the name of the task. This parameter is important because we would require it to run a particular task later. The second parameter cb ; a function, defines the task and it could be passed arguments at runtime.

So in the above snippet for our task function, we check that the parameters are of the right types, string for the task name and function for the tasks. We also considered some edge cases such as task names should be unique, meaning tasks are only created if their task names don't already exist.

#Step 3: Implement the run function

The last thing we would consider for our library would be the ability to run the task we create, to do this, we would be implementing our run function.

We can consider some edge cases like the ability to pass arguments to the tasks at run time and also the ability to run one or more task with one or more optional callback . The callback(s) in the run function can be used to signify the end of all the tasks. The order of the callback(s) are relative to the task and are considered to be arbitrary.

The run functions accepts one or more taskName and optionally a callback . The tasks are executed in the order they are written and task arguments could be passed to the task using a colon in front of the taskName . So for a task name copy , you can pass an argument to the task like this copy:foo where foo is the argument passed at runtime.

Here are some example snippets on using our task runner library.

In conclusion we discussed what a task runner is and where we can use them. We also learnt about the the basic methods of a task runner and how we can implement our own task runner.

Also I hope you found this helpful. Don't forget to leave a comment, share or follow me on twitter.

You can find a complete version of our task runner here.

iamebuka / laufjs

A javascript task runner

Banner photo by Sai Kiran Anagani

Top comments (1)

Templates let you quickly answer FAQs or store snippets for re-use.

• Location Paderborn
• Work Software developer at Two-Pillars GmbH
• Joined Feb 18, 2020

Nice read...

Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment's permalink .

Hide child comments as well

For further actions, you may consider blocking this person and/or reporting abuse

How to connect Supabase to Payload CMS

Petipois - Nov 30

[Client] Auth with Next.js 14 & Supabase

CodewithGuillaume - Nov 20

📚 RTK Query: Understanding useQuery Hook

Raynaldo Sutisna - Nov 29

Code Challenges pt. 1

Ben - Nov 29

Once suspended, iamebuka will not be able to comment or publish posts until their suspension is removed.

Once unsuspended, iamebuka will be able to comment and publish posts again.

Once unpublished, all posts by iamebuka will become hidden and only accessible to themselves.

If iamebuka is not suspended, they can still re-publish their posts from their dashboard.

Once unpublished, this post will become invisible to the public and only accessible to Obukwelu Ebuka.

They can still re-publish the post if they are not suspended.

Thanks for keeping DEV Community safe. Here is what you can do to flag iamebuka:

iamebuka consistently posts content that violates DEV Community's code of conduct because it is harassing, offensive or spammy.

Unflagging iamebuka will restore default visibility to their posts.

We're a place where coders share, stay up-to-date and grow their careers.