Compiling automatically LESS with Grunt

Requirements

node.js/npm (read here for installing it)

Installing Grunt and LESS compiler module

1. Create a file called package.json in your project folder (the theme folder, if you use WordPress) and paste this code:

{
  "name": "your-project-name",
  "version": "1.0.0",
  "description": "Description for your project",
  "license": "MIT",
  "repository": "",
  "private": true,
  "author": "Netgloo web agency",
  "devDependencies": {
    "grunt": "latest",
    "grunt-contrib-less": "latest",
    "grunt-contrib-watch": "latest",
    "load-grunt-tasks": "latest"
}

This file contains the list of modules needed to install Grunt (the build tool) and other Grunt modules (such as the LESS compiler). You can extend the list by adding other modules.

Notice that the versions are set as latest, this means that Npm will downloads the latest version of each modules. This could be dangerous in production, so consider to replace with specific versions or ranges.

2. Open a terminal window, go to your project folder and launch the command: npm install (if you get errors about permissions don’t use sudo but fix the npm permissions. This command starts the download of the above modules from the npm repository. At the end, you will find a new folder in you project directory, called node_modules. Don’t remove that or you will die! And you don’t wanna die, right?

Configuring Grunt

Now create in your project folder a file called Gruntfile.js and paste in this code:


module.exports = function(grunt) {
  
  // Load automatically all tasks without using grunt.loadNpmTasks()
  // for each module
  require('load-grunt-tasks')(grunt);

  grunt.initConfig({
    
    /*
     * LESS task configuration
     */
    less: {
      dist: {
        files: {
          'assets/css/style.css': [ // <== Write here the path to the compiled CSS
            'assets/less/style.less' // <== Write here the path to the LESS file(s)
          ]
        },
        options: {
          compress: true // This option minimizes the CSS
        }
      }
    },
    
    /*
     * Watch task configuration
     */
    watch: {
      less: {
        files: [
          'assets/less/*.less' // <== Write here the files that Grunt must watches
        ],
        tasks: ['less']
      }
    }
  });


  /*
   * Registered tasks
   */
  grunt.registerTask('default', ['less']);

};

This file contains the configuration for Grunt and its modules, then remember to change the paths for LESS and CSS files adapting them for your project structure (check the comments).

Launch automatic compilation

Finally, launch grunt watch from your project folder et voilà! You will see that it remains in listening for changes to any LESS files, when it detects an edit it will automatically compiles to CSS. Don’t close the terminal window. For forcing a compilation launch just grunt from the terminal.

Categories

Category BootstrapCategory CoffeescriptCategory DrupalCategory GravCategory HTMLCategory JavascriptCategory JoomlaCategory jQueryCategory LaravelCategory MagentoCategory PHPCategory SharePointCategory SpringCategory ThymeleafCategory WordPressCategory Workflow

Comments

Developed and designed by Netgloo
© 2017 Netgloo