Reading list Switch to dark mode

    Compiling less file with Gulp

    We are hoping that we all know about CSS then let’s start with CSS pre-processors.
    What do PreProcessor mean?
    In computers we can say pre-processor means a program that takes an input and produces an output that in return can be used as input for another program.

    so the Question is How do pre-processors relate to css what is the use of preprocessors in css and how do it works in css ..?
    There were always a need of a tool

    • that makes the messy code clean and structured.
    • that instead of writing same code again and again and can define some variables and reuse them.
    • that can extend another css class (Mixins) into base class or we can use less functions.

    if you are realy eager to learn Less You can visit their official site
    What actually happen is we have to compile less file into css .The easiest way to install Less on the server is by using npm . but npm package manager has a dependency with node.js
    We will see step by step

    Install Node

    You need to install Node.js package ecosystem from

    Install npm

    After you have downloaded node.js  you have open node js terminal and type

    Start your headless eCommerce
    Read More
    npm install npm -g

    on Windows for Linux users you can run same command from default terminal
    You can check if node and npm are installed or not by using

    node -v and npm -v
    Install less using npm
     npm install -g less

    less provide a compiler called lessc by using it we can compile less file into css as browser only reads or understand css

    lessc style.less style.css

    there are some other command as well like less watch you need to install less watcher as well before using it and clean css for creating minified css file

    Now the process is almost over but still we are not satisfied with it and we will use some other tool that will handle less

    we will now start using Gulp with less.

    Gulp is generally known as build tool where we define single or multiple tasks at a time which help us to perform multiple activities at a time

    There are thousands of npm packages available on npm one of the important package we will try to use today is GULP

    step by step :-

    We need to install node.js and then we will install npm after then follow these steps :-

    create a directory draft and inside it create another directory called dev in your localhost when you are inside directory dev

    install gulp

    npm install gulp -g

    this command will generate node_module folder globally

    now run

    npm init

    After executing this command terminal will ask some details about your project

    Screenshot from 2016-07-14 19:03:18

    Now execute command

    npm install gulp --save-dev

    This whole process will generate package.json file in parallel to your node_modules folder

    Screenshot from 2016-07-14 19:02:44

    After installing gulp you can also download packages which are required like gulp-less, browser-sync

    try using these commands on your terminal

    npm install gulp-less --save-dev
    npm install browser-sync --save-dev

    Screenshot from 2016-07-14 19:09:04

    Now all you need to do is setup you package.json file and create a gulpfile.js  file in same directory

    if you want change/update  your package.json file you can change the values

    Create required directories for your project

    We have divided project into two  directories one is your src and other is distro

    SRC :- Is the directory where your less file will be placed

    DISTRO :-  will be directory where your compiled css file will be generated (distro/css)

    Complete directory Structure is below :-

    Screenshot from 2016-07-14 19:38:57


    distro directory will consist of css and images directory and index.html file as shown below

    Screenshot from 2016-07-14 20:09:45

    Images directory will consist of required images for your project and css directory consist of your style.css file whereas src directory consist of only styles.less

    Now finally let’s define some task in gulpfile.js

    var gulp = require('gulp');
    var less = require('gulp-less'); 
    var browserSync = require('browser-sync').create();
    var reload      = browserSync.reload;
    /* Task to compile less */
    gulp.task('compile-less', function() {  
    /* Task to watch less changes */
    gulp.task('watch-less', function() {'./src/**/*.less' , ['compile-less']);
    gulp.task('serve', function () {
        // Serve files from the root of this project
            server: {
                baseDir: "./distro/"
        });"./src/*.less").on("change", reload);"./distro/*.html").on("change", reload);
    /* Task when running `gulp` from terminal */
    gulp.task('default', ['watch-less', 'serve']);

    we are actually defining task like watch-less and serve and required package are included at the top of the file

    gulp has 4 major functions :-

    • gulp.task
    • gulp.src
    • gulp.dest

    gulp.task :- basically defines the task and it takes 3 arguments Name of the task, Array of task, and callback function
    gulp.src :- it links to a files that user wants to use
    gulp.dest :- it links to a file where we want to generate the output :- is used for watching the changes on the files or directory. It uses eventemitter name change which help the files to update for changes
    As you can see the line gulp.task() we have an array of task (serve and watch-less) we can also pass a single task inside this method

    when less file is compiled and we have applied a watch for less file so that whenever there are some changes in less file then it will automatically compile less and update changes in css file

    Notice :- We have used browser sync package . The use of browser sync package of npm is that  we know css file is included in our project by using link tag . We have setup a task that whenever there will be a change in html and css file browser will automatically reloaded and changes will be reflected automatically on browser we don’t need to reload browser each time.

    Now we have also setup gulfile.js

    Run your gulp task


    Screenshot from 2016-07-14 20:05:16

    Once you have pressed


    You will browser will automatically reloaded for the changes

    Screenshot from 2016-07-14 20:56:22
    Thanks for reading hope so it will help you 🙂

    . . .
    Add a comment

    Leave a Comment

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


  • Edson
    Hi, nice article but I’m getting the following error message

    The following tasks did not complete: compile-less
    Did you forget to signal async completion?

    Did I miss something?

  • Markus

    Nice description that helped me. But I think you misspelled the name of the gulp file: Should the name be “gulpfile.js” instead of “gulpfile.js”?

    • Amit Chauhan (Moderator)
      Thanks for the correction. it is updated now 🙂
  • Back to Top
    Sumit was incredibly responsive and helpful to helping us set-up our system. I have never encountered such helpful and quick IT response before.
    Elizabeth Bennett-Parker
    Talk to Sales


    Live Chat

    Message Sent!

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

    Back to Home