Chapter 4
Build a Workflow

Modern web apps, especially ones with plentiful client-side code, have a lot of resources and dependencies. Grunt makes wrangling those much easier.

In this chapter we’ll create a simple Markdown editor with a live preview. The end result will look like the following figure.

---

Figure 2. Our Markdown editor

We’ll lean heavily on several technologies to make this work. We’ll use the Angular web framework to build the app, and we’ll use markdown.js to do the actual Markdown conversion. To make things more interesting, we’ll use Sass, a CSS preprocessor, and we’ll use CoffeeScript instead of JavaScript.

The focus of this exercise is to show how to use Grunt as a build tool for an application, and by using Angular, CoffeeScript, and Sass, we can explore how easy Grunt makes it to compile, combine, and minify assets while we work on the application. Even if you’ve never used Angular, Sass, or CoffeeScript before, you should have no problem following along.

To pull this off we’ll build up a Gruntfile that does the following:

1. Converts all of the CoffeeScript files into JavaScript and puts the resulting JavaScript in a temporary folder

2. Concatenates Angular and the Markdown library we’re using with the application logic we just converted from CoffeeScript to make a single app.js file

3. Minifies that app.js file, storing it in assets/app.js, which is where our web page will look for it

4. Adds support for Sass, the CSS preprocessor, by adding a file watcher and then doing a compilation similar to what we did with CoffeeScript

5. Sets things up so that any time we change a CoffeeScript or Sass file, the whole build process gets kicked off

6. Configures Grunt to reload our web browser when we make changes to any of our application files

We won’t be writing these Grunt tasks ourselves. Instead we’ll rely on several Grunt plug-ins to do all the heavy lifting. We’ll just need to configure the plug-ins to work together.

Let’s get started!