With this course, not only will you be able to set up and use Grunt in your projects, you’ll also learn about the Grunt internals and its philosophy. The goal is to prepare you to become a Grunt expert—from complex configuration to plugin authoring.
Using a real application as a leading thread, called Foodprint.io, we will automate most of the repetitive tasks in its workflow such as compiling SASS files, running unit tests, and bundling ES2015 code to ES5. We will start with an advanced configuration and customization of the Grunt environment, focusing on practical examples of creating a customized Grunt environment that will support large-scale web development.
Next, we will discover one of the most powerful aspects of Grunt—using live tasks to run the application in development mode. We'll talk about LiveReload, Test Automation, Modular configuration, and combining tasks. Another crucial part of the course is dedicated to creating a Grunt plugin from scratch, and we'll cover how to scaffold plugins using Grunt init and Yeoman, how to test them with Mocha and Chai, and how to publish them so others can use them. We finally end our journey with a dedicated focus on best practices and troubleshooting.
Full of advice, best practices, and real-life examples, the course isn’t just a combination of different Grunt configurations, it will give you all you need to architect your automation workflow, debug existing ones, and implement Grunt successfully in large and complex applications.
About The Author
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.
To work efficiently on our sample application with Grunt, we need to ensure that the environment is set up correctly.
In this video, we will get introduced to our sample application and its structure.
What's Grunt? We will try to answer this question by introducing the underlying concepts and abstractions.
Let’s answer the question of the hour: how will Grunt help us in developing our application?
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?
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
How to test our Grunt plugin in order to guarantee its results? We will use the integration test way to verify our plugin behavior.
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!
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.
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.
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.
Even with the previous hints, a Gruntfile.js becomes too large quickly. We will split the configuration in order to separate the concerns.
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.
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.
To conclude the course, we will compare Grunt against other tools and discuss the future of Grunt.
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.