Learning Path:Building Grunt-ified Web Application Workflows
4.2 (3 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
19 students enrolled
Wishlisted Wishlist

Please confirm that you want to add Learning Path:Building Grunt-ified Web Application Workflows to your Wishlist.

Add to Wishlist

Learning Path:Building Grunt-ified Web Application Workflows

Architect your automation workflow using the industry-standard tool—Grunt
4.2 (3 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
19 students enrolled
Created by Packt Publishing
Last updated 1/2017
Curiosity Sale
Current price: $10 Original price: $200 Discount: 95% off
30-Day Money-Back Guarantee
  • 4.5 hours on-demand video
  • 1 Supplemental Resource
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I Learn?
  • Create a development workflow in which you can lint and build your source files, run your unit tests, and preview your site in a web server, all from the command line
  • Make the most of Node.js to create scalable and real-time applications
  • Identify common issues and problems in Grunt and brush up your troubleshooting skills
  • Author, release, and publish your own Grunt plugin
  • Debug a Grunt configuration to detect possible conceptual issues
  • Clean up, optimize, and organize the Grunt configuration to get efficient workflows
View Curriculum
  • A core understanding of JavaScript is all that you require for you to take up this Learning Path.
  • This Video Learning Path is broken down into short and easy-to-follow videos, packed with detailed examples and a strong practical focus to achieve everything required to meet a single particular development goal at a time. You’ll be led through concrete use cases, from an efficient Grunt configuration to the development of your own Grunt tasks.

Don’t like having to use repetitive parts of a development workflow? If so, this Learning Path is for you.

Packt’s Video Learning Paths are a series of individual video products put together in a logical and step-wise manner such that each video builds on the skills learned in the video before it.

Why go with Grunt? Grunt, the JavaScript Task Runner written in Node.js, is the industry-standard tool to perform important repetitive tasks such as minification, compilation, and unit testing. Its wealth of free plugins available online empowers you to reduce the development time and minimize human errors—just what a developer wants.

This Learning Path will start by helping you build your workflow from installing and using Grunt to a basic degree. You’ll move on to advanced configurations, creating your own plugins, and building high-quality applications and sites.

The goal of this Learning Path is to make you a Grunt expert—from complex configuration to plugin authoring.

About The Author

Dan Wellman

Dan Wellman is a JavaScript developer based in the UK. He has a decade of hard-earned experience working for companies big and small including local boutique design agencies, and more recently, the Skype division of Microsoft.

Dan has written and co-written nine books for Packt, mostly centered on jQuery and jQuery UI, and he regularly creates immersive video tutorials for various websites and companies.

Bertrand Chevrier

Bertrand Chevrier is a professional JavaScript developer with 10 years of experience in large-scale software development and architecture. He uses Grunt every day for his professional and personal projects. As a Grunt plugin author, he’s part of the Grunt community and his work is widely used. He also used to teach Grunt to his team mates and speaks about Grunt in conferences and user groups.

He's also a strong believer and advocate of free and open source software. By day he works for OAT SA, the company behind TAO, the open source e-testing platform, where he’s in charge of front-end development and architecture, and by night he contributes to open source software.

Who is the target audience?
  • If you’re a JavaScript developer looking at managing and automating complex workflows for large-scale applications, this Learning Path is for you.
Students Who Viewed This Course Also Viewed
Curriculum For This Course
55 Lectures
Learning Grunt
27 Lectures 02:29:20

See what you'll learn throughout the course.

Preview 03:20

Install the necessary software and create a folder for the examples to reside in. 

Preview 04:58

Configure Grunt so that you can run tasks. 

Basic Configuration

Learn how to create and run tasks, which are the fundamental building blocks of any Grunt workflow. 

Creating Tasks

See how to provide a configuration for tasks, a key skill for using Grunt. 

Configuring Tasks

Understand the different ways of passing files to tasks, a very common requirement. 

Working with Files

Consume data from the package.json file inside the configuration. 


Check your code automatically for syntax errors and potential bad practices. 

Running Static Analysis

Compile CoffeeScript files into JavaScript files ready for minification. 

Transcompiling CoffeeScript

Compile Sass files into CSS files ready for minification. 

Preprocessing with SASS

Minify the JavaScript and CSS files ready for production. 

Minfying Code – Uglify and CSSMin

Preview your latest changes in an actual browser by running the site through a local web server. 

Running the Site in a Web Server

Keep script files organized and modular with RequireJS. 

Developing with RequireJS

Run unit tests from the command line for automation and speed. 

Unit Testing with Jasmine and Karma

Understand how well your unit tests cover your code with coverage reports. 

Creating Coverage Reports

Use a source control management system to store project files and maintain a history of the project. Git is one of the best. 

Installing and Initialising Git

New or changed files must be added to Git's index before they can be saved in the repository. 

Adding New and Changed Files

In order for Git to track changes to files or save new changes, they need to be committed to the repository. 

Committing Changes

Changes made to a feature branch need to be brought back to the master branch, ready to be released. 

Rebasing on to Master

We can use the Grunt init plugin and the plugin template to quickly get started when creating a new plugin. 

Grunt init and the Plugin Template

Our plugin will need to perform a specific task. We can overwrite the example code added by the template. 

Creating the Plugin

All plugins require configuration. We'll need to access this configuration inside our plugin. 

Working with Configuration Options

We need to add unit tests to our plugin to ensure that it works the way that we expect. 

Testing the Plugin

Once we've created our plugin, we need to publish it on NPM so that we can install it just like other plugins that we've used in our workflow. 

Integrating with the Plugin

The Gruntfile can very quickly become extremely large and intimidating. It needs to be broken down into more manageable pieces. 

Breaking Down the Gruntfile

We need to know how to troubleshoot problems that can occur when using Grunt. 

Troubleshooting Common Problems

There is much more to learn about Grunt. Find out where additional information can be found. 

Additional Resources
Mastering Grunt
28 Lectures 02:07:46

This video will provide you an overview of entire course.

Preview 04:36

To work efficiently on our sample application with Grunt, we need to ensure that the environment is set up correctly. 

Setting Up and Installing the Project

In this video, we will get introduced to our sample application and its structure. 

Running Foodprint.io

What's Grunt? We will try to answer this question by introducing the underlying concepts and abstractions. 

Grunt Core Concepts

Let’s answer the question of the hour: how will Grunt help us in developing our application? 

Grunt in Foodprint.io

We are using ESLint to verify that our application source code complies with our coding guidelines and doesn’t contain problematic pieces of code. These checks are either manual, using a command line to run, or atomic, by checking only the current file within an IDE. Wouldn't it be excellent if we could just integrate the ESLint checks in our build process using Grunt? 

Adding Quality Checks with ESLint

Nowadays, unit and integration tests are a part of the development process. There are multiple ways to launch them and integrate them. We will use Grunt in order to run our application's unit tests in this video. 

Running the Tests

Generating a coverage report is never a simple task. We need to ensure first that the tests are running, and then run a complicated command and open the generated report in the browser. We will see how to automate that process using multiple Grunt tasks. We will compose them to build a “coverage” task. 

Generating a Test Coverage Report

The JavaScript code of our application that runs on the browser is written in ES2015, and it needs to be compiled to ES5 in order to run on most web browsers. We will use Grunt to not only compile the code but also create compressed bundles with an external source map for debugging. 

Bundling Client-side Modules

Web development usually involves a lot of manual steps between the writing of a line in the source code and the visualization of the change, especially if the source is compiled. Let’s see how Grunt can also be used during the development to increase our productivity. 

Productivity with a Toolchain

In continuation of the previous video, we would like to continue to improve the development productivity. We would like to run multiple tasks from different triggers and still have the result of our modification loaded in the browser. We will now see the tests that run while we develop. 

Real-time Testing

Compressing, optimizing assets is a good practice, but it’s often a slow and heavy computation process. We are going to set up asset optimization based on the application context, for example, letting the optimization run only in production. 

Context-based Optimization

An organization of tasks can become messy quickly: which tasks do what? In which order do we need to run them? We need to think about our automation tasks from the perspective of another developer and create a workflow that will seem obvious. 

Combining Tasks to Create a Workflow

Most of the time, there’s a Grunt plugin on npm that fits your needs more or less. But sometimes, you need to write your own plugin. Our sample application needs to frequently update its food facts database. This is a good use case to write a plugin to automate this task. 

Plugin Scaffolding

A Grunt plugin is an npm module, but how do we define a task inside this plugin? Grunt proposes us two methods in its API to define a task: registerTask and registerMultiTask. We will see when to use each one. 

registerTask Versus registerMultiTask

Our plugin’s purpose is to download data, place it in a folder, and transform it. We will now see how to use the Grunt APIs available in the tasks to achieve the second part of the task—the data transformation. 

Plugin Communication

Grunt executes tasks in a linear and synchronous way, but most of the time—and especially on the Node.js platform—the task content will rely on asynchronous actions. Hopefully, Grunt’s API comes with all the needed tools. We will start to integrate the logic in our task. 

Handling Asynchronous Tasks

The developer, the system administrator (the plugin consumer) interacts with a Grunt plugin using the command line and the feedback he/she receives is made through the output. Grunt has a rich API to log content out. We will see how to implement the logging best practices in the grunt-foodfact plugin. 

Verbose, Debug, Error – Best Practice Output

Grunt plugins are black boxes, where consumers parameterize using options from the configuration. But Grunt offers the possibility to emit events from the plugins in order to interact with them. 

Even More Pluggable with Events

How to test our Grunt plugin in order to guarantee its results? We will use the integration test way to verify our plugin behavior. 

Testing the Plugin with Mocha and Chai

When we solve a problem by creating a Grunt task, we might want to share the plugin to the Grunt community. How can we publish the Grunt plugin? Let’s check it out! 

Become Famous – Publish Your Plugin to the World

Grunt is really easy to use, thanks to its code-based plugin configuration, but one of the trade-offs is when the Gruntfile starts to become bigger. We will give some hints for writing Gruntfiles that are easiest to maintain. 

A Cleaner Gruntfile

Using JS variables to configure the Gruntfile is definitely fine, but there are some cases where it’s inconvenient, for example, in a property name. Grunt includes a simple search-and-replace template mechanism that helps us in such scenarios. 

Parameterizing the Configuration

Even if Grunt can run tasks for any kind of platform and language, it runs itself on Node.js and uses npm for dependency management. We will see how we can take advantage of that. 

Taking Advantage of Your Environment – Grunt with npm

Even with the previous hints, a Gruntfile.js becomes too large quickly. We will split the configuration in order to separate the concerns. 

Divide and Rule – Split Your Grunt Tasks

Grunt is an awesome tool but has a strongly oriented architecture to run tasks. If we don’t understand or comply with the requirements, there are bound to be some problems. We will highlight some of the usual and common mistakes, and try to explain what to do instead. 

Common Pitfalls with Grunt

In the landscape of task runners, Grunt has some peculiarities. For a successful implementation of Grunt, the best approach is to embrace the Grunt philosophy. We will explain these peculiarities in this video. 

Adopting the Grunt Way

To conclude the course, we will compare Grunt against other tools and discuss the future of Grunt. 

Task Runners
About the Instructor
Packt Publishing
3.9 Average rating
7,297 Reviews
52,153 Students
616 Courses
Tech Knowledge in Motion

Packt has been committed to developer learning since 2004. A lot has changed in software since then - but Packt has remained responsive to these changes, continuing to look forward at the trends and tools defining the way we work and live. And how to put them to work.

With an extensive library of content - more than 4000 books and video courses -Packt's mission is to help developers stay relevant in a rapidly changing world. From new web frameworks and programming languages, to cutting edge data analytics, and DevOps, Packt takes software professionals in every field to what's important to them now.

From skills that will help you to develop and future proof your career to immediate solutions to every day tech challenges, Packt is a go-to resource to make you a better, smarter developer.

Packt Udemy courses continue this tradition, bringing you comprehensive yet concise video courses straight from the experts.