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>
Table of Contents (17 chapters)
Grunt Cookbook
Credits
About the Author
About the Reviewers
www.PacktPub.com
Preface
Index

Compiling LESS to CSS


In this recipe, we'll make use of the contrib-less (0.11.4) plugin to compile our LESS style sheets to CSS style sheets, which can be used by our web applications.

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 will take us through creating a simple LESS style sheet and compiling it to CSS:

  1. We'll start by installing the package that contains the contrib-less plugin, as per the instructions provided in the Installing a plugin recipe in Chapter 1, Getting Started with Grunt.

  2. Let's create a simple LESS file called styles.less in our project directory with the following contents:

    @first: #ffffff;
    @second: #000000;
    
    body {
      background-color: @first;
      background-image: url('../background.png');
      color: @second;
    }
  3. Now, we can add the following less task...