Introduction to Grunt

A real world introduction to Grunt. Learn how to quickly get up and running using Grunt to perform tasks against your HTML web application.
Course info
Rating
(332)
Level
Intermediate
Updated
Jul 31, 2014
Duration
2h 13m
Table of contents
Description
Course info
Rating
(332)
Level
Intermediate
Updated
Jul 31, 2014
Duration
2h 13m
Description

Take a real world look at how to use Grunt to manipulate your HTML, CSS, and JavaScript files for your web application. We will explore each of these concepts in depth, along with how to create and deploy custom Grunt Packages to the NPM repository.

About the author
About the author

Derik Whittaker is a Software Architect who specializes in all things .Net who has been building enterprise systems for over 12 years and along the way has picked up a thing or two about building create killer systems. He is a 5 time C# MVP and blogs at http://devlicio.us.

More from the author
HTML for the XAML Developer
Intermediate
2h 52m
May 2, 2013
Section Introduction Transcripts
Section Introduction Transcripts

Working With JavaScript
Hello and welcome to module two of introduction of Grunt JS. I'm your host Derik Whittaker. This is the module that really gets the ball rolling in showing you how to use Grunt JS with your web application. This module is going to focus on showing you how to use Grunt to work with JavaScript. By the end of this module you should be able to hit the ground running and know how to set up Grunt to compile, validate, and compress your JavaScript files. In this module we are going to focus on four different areas. The first thing we're going to do is learn how to compile our TypeScript file down to raw JavaScript in order for them to be used within a web project. Once we have our JavaScript files we are ready to roll. We're going to spend some time learning how to work with these files and Grunt. We'll start off by learning how we can use the JSHint plugin to validate our JavaScript. We will want to start here because this plugin will help us detect errors and potential problems within our JavaScript. We will then learn how we can use the uglify plugin to compress and minify our JavaScript in order to improve our site performance as well as provide a layer of obfuscation. We'll enter time with JavaScript by learning how to use a contrib-clean plugin to clean out our environment to ensure better success when building our projects. Throughout this course we're going to use Grunt to modify and build a sample web application seen here on the screen. This is a very simple task reminder application. I point this out because we'll be looking at this site and the underlying code from time to time during the remainder of our course. Let's kick the tires and start learning how to Grunt in our project.

Working With HTML and CSS in Grunt
Hello and welcome to module three of introduction to Grunt JS. I'm your host Derik Whittaker. In the previous module we spent time learning how to manipulate the JavaScript in our application with Grunt. In this module we're going to focus on how to work with HTML and CSS files within our project. By the end of this module you should be able to hit the ground running and know how to use Grunt to validate and compress your HTML as well as how to validate and transform for CSS files. This module will be focused on learning how to work with our HTML and CSS files. The first thing that we're going to learn about is how to use a contrib-HtmlMin task to minify and compress our HTML files. By compressing our HTML we're going to reduce the size of our file being pushed to the browser, thus speeding up our page load times. We will then learn how to validate our HTML as being semantically correct by using the HTML hint task. Having the ability to validate our HTML as being semantically correct will help ensure that our HTML will work across a broader array of browsers. Now that we're done working with our HTML we're going to move on to working with our CSS file. We'll start off our efforts by learning by how to convert our less files to CSS using the contrib-less task. Once we've converted our files from less to CCS we're going to lint our converted files to make sure they are indeed valid. To perform this linting we're going to use a CSS lint grunt task. By performing this validation on our CSS we can better ensure our users will have the experience we expect when using our site. We will wrap up this module by learning how to compress our transform and validated CSS. We're going to use a contrib-CSS min project to perform this minification. Minifying our CSS is just another step to ensure our site will be as fast and responsive as possible. Let's kick the tires and start learning how to work with HTML and CSS files via Grunt.

Advanced Grunt - Custom Tasks and Plugins
Hello and welcome to module four of introduction to Grunt JS. I'm your host Derik Whittaker. In the previous modules we have spent time and energy learning how to manipulate the JavaScript, HTML, and CSS in our web application with Grunt. In this module we're going to crank it up to 11 and learn how to quick start our Grunt projects with the Grunt scaffolding and learn how to create custom Grunt plugins. This module will be focused on three core features, scaffolding, inline tasks, and custom Grunt plugins. We're going to start off this module by learning how to use a Grunt-init scaffolding to quick start any project using Grunt. The Grunt-init is a scaffolding tool used to automate project creation. It will build an entire directory structure based on the current environment and will ask you a few questions to answer. The exact files and contents created depend on the template chosen along with the answers to the questions asked. Once we have mastered how to use the project scaffolding we're going to transition to writing code. In fact, for the first time in this course we're going to get our hands duty and create some custom JavaScript. We're going to learn how we can create custom inline tasks for our Grunt project to perform various tasks. Next we're going to learn how to transition from creating inline code to new, reusable, node package manager modules, which can be used by multiple projects and even uploaded to the NPM repository if desired. The first feature we will focus on when we're learning how to create custom plugins is how to use the Grunt-init plugin scaffolding to get up and running quickly. The plugin scaffolding is a quick way to set up your project with all the needed files and folders in order to create your Grunt plugins. Next we'll learn how to create our Grunt plugin. When creating our plugin we'll learn how to either create a single task plugin or a multitask plugin. We'll learn how to create each of these because they are just different enough that they warrant their own time and energy. Finally we'll end this module by learning how to publish our newly created npm packages to the NPM repository. Publishing our packages means others are able to consume the code we created and use this in their own projects. Let's kick the tires and start learning how to create custom tasks and plugins in with Grunt.