Reading list Switch to dark mode

    Getting Started with LESS , Gruntjs and Magento2

    Updated 14 January 2016

    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

    Searching for an experienced
    Magento 2 Company ?
    Find out More

    Screenshot_8

     

    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

    Screenshot_9

    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

    . . .

    Leave a Comment

    Your email address will not be published. Required fields are marked*


    Be the first to comment.

    Back to Top

    Message Sent!

    If you have more details or questions, you can reply to the received confirmation email.

    Back to Home