Menu Close
    Hire us Request quote 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 lesscss.org
    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 https://nodejs.org/en/

    Install npm

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

    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

    Now execute command

    npm install gulp --save-dev
    

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

    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

    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 :-

     

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

    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() {  
      gulp.src('./src/style.less')
        .pipe(less())
        .pipe(gulp.dest('./distro/css/'));
    }); 
    /* Task to watch less changes */
    gulp.task('watch-less', function() {  
      gulp.watch('./src/**/*.less' , ['compile-less']);
    });
    
    gulp.task('serve', function () {
    
        // Serve files from the root of this project
        browserSync.init({
            server: {
                baseDir: "./distro/"
            }
        }); 
        gulp.watch("./src/*.less").on("change", reload);
        gulp.watch("./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.watch

    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
    gulp.watch :- 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

    gulp

    Once you have pressed

    Ctrl+s

    You will browser will automatically reloaded for the changes


    Thanks for reading hope so it will help you 🙂

    . . .

    Comments (3)

    Add Your Comment

  • 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
    Hi!

    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
      Thanks for the correction. it is updated now 🙂
  • 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