Blog Post

Compile less files in VS using gulp

Tuesday, June 28, 2016 2:21 PM

While working with VS 2015 I have heard about loads of new functionality coming in.

 

I wanted to compile less files in VS the faster way.

 

In order to be able to run gulp on my pc I need to have installed node.js

Installation Steps

  1. Download the Windows installer from the Nodes.js® web site.

  2. Run the installer (the .msi file you downloaded in the previous step.)

  3. Follow the prompts in the installer (Accept the license agreement, click the NEXT button a bunch of times and accept the default installation settings).

  4. Restart your computer. You won’t be able to run Node.js® until you restart your computer.

 

node installer

Node test

After installation we should be able to execute following command

node -v

Installation of GULP

Gulp is javascript task runner which runs on top of node.js

Lets install it as this is actually what we want to run as part of our visual studio solution.

Command

npm install -g gulp

command to install gulp

After installation of gulp

Solution configuration

create a new file in your solution called:

gulpfile.js

This file is storing our configuration for all tasks to be run

Now we need to define task runner to run our less configuration

In order to process less files we need to install less package that is not out of box installed on our pc/mac.

More about npm package: https://www.npmjs.com/package/gulp-less

 

 

npm install gulp-less --save-dev
var gulp       = require('gulp');  
var less       = require('gulp-less');

gulp.task('default', function() {  
  gulp.src('./Content/src/main.less')
    .pipe(less())
    .pipe(gulp.dest('./assets/dist/'));
});

Enhanced solution, with using watch

to use watch you need to install additional npm package:  https://www.npmjs.com/package/gulp-watch

$ npm install gulp-watch --save-dev

Now update your config to something as:

 

var gulp       = require('gulp');  
var less       = require('gulp-less');  
var watch      = require('gulp-watch');

/* Task to compile less */
gulp.task('compile-less', function() {  
  gulp.src('./assets/src/main.less')
    .pipe(less())
    .pipe(gulp.dest('./assets/dist/'));
});

/* Task to watch less changes */
gulp.task('watch-less', function() {  
  gulp.watch('./assets/src/**/*.less' , ['compile-less']);
});

/* Task when running `gulp` from terminal */
gulp.task('default', ['compile-less', 'watch-less']);  

After this we can execute it using task runner

This is final leg of our journey. We can see something like below, compiling data

On the screenshot above you will notice

Process terminated with code 0

 

This means that the process has failed, but the gulp process is running correctly.