Grunt Cookbook

Grunt Cookbook

By : Jurie-Jan Botha

Buy this Book

Grunt Cookbook

By: Jurie-Jan Botha

Buy this Book

Overview of this book

<p>A web application can quickly turn into a complex orchestration of many smaller components, each one requiring its own bit of maintenance. Grunt allows you to automate all the repetitive tasks required to get everything working together by using JavaScript, the most popular programming language.</p> <p>Grunt Cookbook offers a host of easy-to-follow recipes for automating repetitive tasks in your web application's development, management, and deployment processes. This book will introduce you to methods that can be used to automate basic processes and your favorite tools. By following the recipes, you will soon be comfortable using Grunt to perform a wide array of advanced tasks in a range of different scenarios.</p>

Grunt Cookbook

Credits

About the Author

About the Reviewers

www.PacktPub.com

Preface

Free Chapter

Getting Started with Grunt

Introduction

Installing the Grunt CLI

Setting up Grunt in a project

Installing a plugin

Setting up a basic web server

Watching files for changes

Setting up LiveReload

Processing only changed files

Importing external data

File Management

Introduction

Copying files

Compressing files

Creating symbolic links

Concatenating files

Fetching a single URL

Fetching multiple URLs

Templating Engines

Introduction

Rendering Jade templates

Using data in a Jade template

Using custom filters in a Jade template

Compiling Jade templates

Compiling Handlebars templates

Compiling Underscore templates

Using partials in Handlebars templates

Wrapping Jade templates in AMD modules

Wrapping Handlebars templates in AMD modules

Wrapping Underscore templates in AMD modules

Wrapping Handlebars templates in CommonJS modules

Altering Jade templates before compilation

Altering Handlebars templates before compilation

Altering Underscore templates before compilation

Generating CSS and JavaScript

Introduction

Compiling LESS to CSS

Compiling Sass to CSS

Compiling Stylus to CSS

Compiling CoffeeScript to JavaScript

Compiling LiveScript to JavaScript

Generating source maps for LESS

Generating source maps for Sass

Generating source maps for CoffeeScript

Defining custom functions with LESS

Using Stylus plugins

Running Automated Tests

Introduction

Running Jasmine tests

Running QUnit tests

Running NodeUnit tests

Running Mocha client-side tests

Running Mocha server-side tests

Generating coverage reports for server-side code using Mocha and Blanket

Generating coverage reports for client-side code using Mocha and Blanket

Generating coverage reports for client-side code using QUnit and Istanbul

Deployment Preparations

Linting JavaScript code

Uglifying JavaScript Code

Setting up RequireJS

Deploying to the End User

Introduction

Deploying to Rackspace Cloud Files

Deploying to AWS S3

Deploying over FTP

Deploying over SFTP

Deploying to GitHub Pages

Invalidating an AWS CloudFront distribution

Running commands over SSH

Creating Custom Tasks

Introduction

Creating an alias task

Creating a basic task

Accessing project configuration

Checking for required configurations

Checking for the successful execution of other tasks

Running non-blocking code in a task

Failing a task

Using command-line parameters

Enqueuing tasks to run

Creating a multi-task

Using options in a task

Using files in a task

Authoring Plugins

Introduction

Finding plugins

Contributing to a plugin

Setting up a basic plugin project

Creating a plugin task

Writing tests for a plugin task

Adding documentation for a plugin

Publishing a plugin

Static Sites

Introduction

Setting up a basic site project

Adding a page to the site

Adding content to the site

Adding data to the site

Creating and using a site layout

Generating pages from a collection

Using a plugin

Index

Customer Reviews

5 star

4 star

3 star

2 star

1 star

Minifying CSS

In this recipe, we'll make use of the contrib-cssmin (0.10.0) plugin to decrease the size of some CSS documents by minifying them.

Getting ready

In this example, we'll work with the basic project structure we created in the Installing Grunt on a project recipe in Chapter 1, Getting Started with Grunt. Be sure to refer to it if you are not yet familiar with its contents.

How to do it...

The following steps take us through creating a sample CSS document and configuring a task that minifies it.

We'll start by installing the package that contains the contrib-cssmin plugin as per the instructions provided in the Installing a plugin recipe in Chapter 1, Getting Started with Grunt.
Then, we'll create a simple CSS document called style.css in the src directory, which we'd like to minify, and provide it with the following contents:
```
body { 
  /* Average body style */
  background-color: #ffffff; 
  color: #000000; /*! Black (Special) */
}
```
Now, we'll add the following cssmin task to our configuration...

Grunt Cookbook

By : Jurie-Jan Botha

Grunt Cookbook

By: Jurie-Jan Botha

Overview of this book

Related Content you might be interested in

Current Title:

Grunt Cookbook

Minifying CSS

Getting ready

How to do it...