Getting Started with LESS , Gruntjs and Magento2

Getting Started with LESS , Gruntjs and Magento2 – Magento contains strong set of tech stacks specially for front end developers . with a little introduction i will explain how to setup grunt and compile less files using gruntjs  .I will not explain much in details about LESS or Gruntjs but will explain more on setup and running and exeuting less files on grunt . As magento2 officially support less and grunt its inevitable to have strong knowledge in both of them .

GruntJs is a task runner and useful in various task including compiling css preprocessors (LESS/SCSS files) ,  minification , compression and many more . NPM need to be installed to install grunt or grunt plugins

Install Grunt as per the guide provided by standard

npm install -g grunt-cli

as for sample run you need to manage  your CSS and LESS folder , e.g

as you can i have created three folder grunt , css and less .

css – here the css will be generated

less – source location for less files

grunt – i have created folder to store gruntjs file with package.json file and plugins which will be downloaded via package.json . Example

now add the following code in your Gruntfile.js file

module.exports = function(grunt) {
         grunt.initConfig({

             less: {
                production: {
                     options: {
                         paths: "",
                         cleancss: true
                     },
                       files: {"../css/style.css": "../less/style.less"} 
                 }
             }
         });
         grunt.loadNpmTasks('grunt-contrib-less');
         grunt.registerTask('default', ['less']);
     };

now create package.json file and add following code in it

  {
         "name": "firstgrunt",
         "version": "0.1.0",
         "devDependencies": {
             "grunt": "~0.4.2",
             "grunt-contrib-less": "~0.8.2"
         }
     }

now from command line run following command

npm Install 

and grunt lib will be added

lets add style.less file in less/style.less

@base: #f938ab;

.box-shadow(@style, @c) when (iscolor(@c)) {
  -webkit-box-shadow: @style @c;
  box-shadow:         @style @c;
}
.box-shadow(@style, @alpha: 50%) when (isnumber(@alpha)) {
  .box-shadow(@style, rgba(0, 0, 0, @alpha));
}
.box {
  color: saturate(@base, 5%);
  border-color: lighten(@base, 30%);
  div { .box-shadow(0 0 5px, 30%) }
}

now run the command from terminal

grunt less

and check the style.css under css folder

You will see grunt compiled less file and css output is in the css file