Compiling LESS to CSS using gulp
LESS in one the most widely used CSS Pre-processor. It makes writing and managing CSS a breeze.
Bootstrap (upto v3) also uses LESS. Here We will have a look at compiling LESS to CSS using gulp.
- Create a
First, we need to install gulp globally by running the following command
Next, we need to add gulp to
devDependencies of one of your projects. Make sure you have a
package.json file, either created manually or by typing
npm init. Once you have a
package.json file, run the following command:
And finally, we need a
gulpfile.js file, where we can define our tasks. Make sure you have this file in the root of your project and add the following code to it.
var gulp = require"gulp"less = require"gulp-less";gulptask"default"gulpsrc"./src/**/*.less"pipelesspipe"./dist/css";;
Now create a folder named
src and add any less file in it. For sake of this example, let us add a
test.less with following content.
gulp command in your terminal and you must see something similar to this.
You'll see that
dist/css/test.css is created, with following contents:
You can add more files as per requirements and they will be converted and outputed to