Configuring Gulp With Less CSS Pre-Processor

Less is a CSS pre-processor allowing you to create variables, mixins, and functions in a effort to make your CSS more maintainable. In this article, we’ll discuss the process of getting less configured with gulp so that you can start using this CSS pre-processor today within your own projects.

In this article, I touch on the basics of configuring less with gulp. For more detailed information on the configuration options available read the documentation here.

Installation

First, let’s install gulp.

yarn add gulp

Next, we’ll install gulp-less

yarn add gulp-less

Configuration

Now that we have our packages installed, we’ll want to setup our gulpfile.js to use these new plugins.

1

2

3

4

5

6

7

vargulp=require('gulp');

varless=require('gulp-less');

gulp.task('default',function(){

});

Next, lets create our less file. We’ll store it in the path assets/less/custom.less.

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

@fontColor:#000101;

@priceColor:green;

.product{

background-color:#aaaaaa;

color:@fontColor;

&--featured{

background-color:#009998;

}

&__name{

color:@fontColor

}

&__price{

color:@priceColor;

}

}

Now that we have our example less file, lets go ahead and configure our gulp file to process it. Within our gulpfile.js default block we’ll want to add the following.

1

2

3

4

returngulp.src('./assets/less/*.less')

.pipe(less())

.pipe(gulp.dest('./build/css/'));

In the above example you’re passing the source first, and then passing those files to the less() function, and lastly letting gulp know where to put the output. In our example, we’re storing the output to a ./build/css/ directory.

Here’s the full contents to our gulpfile.js file for reference.

1

2

3

4

5

6

7

8

9

vargulp=require('gulp');

varless=require('gulp-less');

gulp.task('default',function(){

returngulp.src('./assets/less/*.less')

.pipe(less())

.pipe(gulp.dest('./build/css/'));

});

Testing

Now that we have everything setup, we’ll want to run our gulp command.

gulp

This should create a new file for custom.css within our ./build/css/ directory. I have included the contents of our custom.css, which was created during the gulp process for you to see how gulp transforms less into CSS.

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

.product{

background-color:#aaaaaa;

color:#000101;

}

.product--featured{

background-color:#009998;

}

.product__name{

color:#000101;

}

.product *__price{

color:green;

}

This tutorial was not setup to teach you less, but instead to teach you how to start using LESS with gulp. If you do want to learn more about LESS, then I’d suggest reading through the documentation for a detailed explanation here.

Tags

About This Blog

I'm writing this blog in order to share what I'm learning with the world. Since you learn best by teaching others and writing things down, I figured this would be the best way to really tackle any new technologies I plan on learning. I hope this blog will help you as much as it will benefit me.