Book Image

Grunt Cookbook

By : Jurie-Jan Botha
Book Image

Grunt Cookbook

By: Jurie-Jan Botha

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>

Related Content you might be interested in

Current Title:

Small book image
Grunt Cookbook
Jurie-Jan Botha
Jun, 2015 | 286 pages
No titles found
Table of Contents (17 chapters)
Grunt Cookbook
Grunt Cookbook
Credits
Credits
About the Author
About the Author
About the Reviewers
About the Reviewers
www.PacktPub.com
www.PacktPub.com
Preface
Preface
Free Chapter
1
Getting Started with Grunt
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
2
File Management
File Management
Introduction
Copying files
Compressing files
Creating symbolic links
Concatenating files
Fetching a single URL
Fetching multiple URLs
3
Templating Engines
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
4
Generating CSS and JavaScript
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
5
Running Automated Tests
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
6
Deployment Preparations
Deployment Preparations
Introduction
Minifying HTML
Minifying CSS
Optimizing images
Linting JavaScript code
Uglifying JavaScript Code
Setting up RequireJS
7
Deploying to the End User
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
8
Creating Custom Tasks
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
9
Authoring Plugins
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
10
Static Sites
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
Index

Generating source maps for LESS

In this recipe, we'll make use of the contrib-less (0.11.4) plugin to generate source maps when compiling our LESS style sheets to CSS.

Getting ready

In this example, we'll work with the basic project structure that we created in the Compiling LESS to CSS recipe of this chapter. Be sure to refer to it if you are not yet familiar with its contents.

How to do it...

The following steps will take us through compiling our LESS style sheet to a CSS file, which contains both our source map and the source style sheet:

  1. First, we'll indicate that we'd like to generate a source map by setting the sourceMap option to true in our less task's configuration:

    less: {
  styles: {
    options: {
      sourceMap: true
    },
    src: 'styles.less',
    dest: 'styles.css'
  }
}

  2. Next, we'll indicate that we'd like to include the source of the generated CSS in the resulting file by setting the outputSourceFiles option to true in task's configuration:

    less: {
  styles: {
    options: {...
Previous Section
End of Section 8
Next Section