Menu Close
    Hire us Request quote Reading list Switch to dark mode

    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


     

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


    now from command line run following command

    npm Install 

    and grunt lib will be added

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


    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

    . . .

    Comment

    Add Your Comment

    Be the first to comment.

    Back to Top
    css.php
    Hire Us!
    Brief us about your requirements and we'll get back to you.
    Woo! Hooy!
    We have just received your message and our expert will get back to you shortly.
    Send Again
    Close