Compiling LESS to CSS in Gulp😍

In this section we will cover you how to compile LESS file to CSS file. Actually it extends the CSS language, adding features that create more maintainable, themeable and extendable CSS.

Installation Process of LESS and Autoprefixer

let’s install gulp-less and gulp-autoprefixer in our app by using cmd.

Note : You must download and install Node.js and Gulp locally

Install Gulp-less

npm install --save-dev gulp-less

Install Gulp-autoprefixer

npm install --save-dev gulp-autoprefixer

After installing this go ahead and check this out in package.json into a devdependency . If it is added.

Using LESS and Autoprefixer in our App

It’s time to create a task of gulp. Create a file name gulpfile.js (If it is not created). In this file type the given code

1  var gulp = require('gulp');
2  var gulpless = require('gulp-less');
3  var gulpautoprefixer = require('gulp-autoprefixer');
4 
5  //Creating a Style task that convert LESS to CSS
6
7  gulp.task('styles',function(){
8      var srcfile = './src/client/styles/styles.less';
9      var temp = './.tmp';
10         return gulp
11                 .src(srcfile)
12                 .pipe(gulpless())
13                 .pipe(gulpautoprefixer({browsers: ['last 2 versions','>5%']}))
14                 .pipe(gulp.dest(temp));
15  });

Now it’s time to explain our code. The first three lines we will require those packages in our gulpfile (that will be download previously) and handover to the variables. Now we create a first gulp.task() (that has two parameter the first parameter we need a task name and the second parameter we need a function()). Now in this function(){…} we create two variables the first variable name srcfile this will select a styles.less file and second is temp variable which is the directory of ‘./.tmp’ .

Now add the srcfile variable in .src() . In line 12 create a pipe() and execute gulpless(). In line 13 create a pipe() which is autoprefixer and define browsers of last 2 versions which is atleast 5% of the market. In the line 14 create a pipe() and send them out to the destination ./.tmp folder.

Run Styles Task

R u n  t h e  T a s k

To run this task simply open up your cmd and type this command

gulp styles

after you run this. You can see in your app tmp directory is created and you see your compiled CSS file.

Thanks 🍺