Entity view (Content)

Less & Grunt for Drupal Noobs

By jtsang
May. 14, 2015

This tutorial is for how to set up Less and Grunt for your Drupal theming project.

Step 1. Get Node.js

Go to https://nodejs.org/download. As a mac user, just use the installer and click away.
This will allow you to use the npm command.

Step 2. Get Grunt.js

Open a terminal and run the command:
sudo npm install -g grunt
This will put the grunt command into your command path.

Step 3. Setup your theme

I like to put the the less files into a folder called “less” and the stylesheets into a folder called “css”. I normally start by creating a css/style.css and a less/style.less file.

Step 4. Setup Grunt into your theme

There are several ways of doing this, but the easiest way for me was to navigate to your theme in terminal and run the command:
npm init
Fill out the fields it asks. Remember the name of the main JS file, I named it Gruntfile.js. Once this is done the command will generate a file called package.json. This is basically the settings file that grunt needs to find what plugins to use and the location of this Gruntfile.js. The package.json should looks something like the code below, you can always modify this file to add more dependencies:

{
  "name": "code",
  "version": "1.0.0",
  "devDependencies": {
    "grunt": "~0.4.2",
    "grunt-contrib-less": "~0.8.2",
    "grunt-contrib-watch": "~0.6.1"
  },  
  "description": "Grunt support for my Drupal theme",
  "main": "Gruntfile.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

 

Step 5. Create the grunt.js file

Think of this as another config file where you can write a script. Here is an example of what I use.

module.exports = function(grunt) {
   grunt.initConfig({
       less: {
           development: {
               options: {
                   paths: ["css"]
               },
               files: {
                "css/style.css": "less/style.less"           
               }
           }
       },
       watch: {
          files: [ 'less/*'],
          tasks: ["less"]
      }         
   });
   grunt.loadNpmTasks('grunt-contrib-less');
   grunt.loadNpmTasks('grunt-contrib-watch');
   grunt.registerTask('default','watch');
};

 

Step 6. Get the additional grunt plugins/modules you need.

Install plugins by running the command:
npm install
If your package.json file is formatted correctly, this will basically download plugins into a folder called node_module. In the sample above this should download both grunt-contrib-less and grunt-contrib-watch plugins/modules.

Step 7. Run Grunt

In your terminal run the command:
grunt
This will run the plugin to watch your less file when it gets saved

Step 8. Profit

Start styling in your less folder and it will compile your css folder every time you save a less file. If you have used compass watch, this is basically the same thing.

Here is a sample file structure for a drupal theme.

Reference Material:

 

Post Tags: