How can I utilize Gulp.watch in Visual Studio 2015?

Question

I want to apply a Gulp watcher to my LESS files so Gulp will create css files whenever a LESS file gets saved.

How can I do this? It doesn't seem to be correct/sufficient to write something like this:

var gulp = require("gulp");
var moreLess = require("gulp-more-less");
var concatCss = require("gulp-concat-css");

var lessInFolder = "./Less/**/*.less";

gulp.task("less", function ()
{
  gulp.src(lessInFolder).pipe(moreless()).pipe(concatCss()).pipe(gulp.dest("./css"));
});

gulp.watch(lessInFolder, ["less"]);

Deenadeenya

Answer 1

Create a dedicated task for the watch function :

gulp.task('default', function () {
    gulp.watch(lessInFolder, ['less']);
});

then use the visual studio Task Runner Explorer to execute (or bind) that task.

Farahfarand

Is this a one-time thing, or will I have to do it every time I start Visual Studio? – Finch

no, this can be automated by binding the default task to project open. just go to the task runner and right click your task and select bindings > project open – Farahfarand

What if I want to run multiple watches at the same time? I can do this easily just by having one cmd window per watch task, but can I do this from VS? – Mouldon

this is ok but if you open the project more than once it starts up multiple watch tasks is there a gulp way to cancel the currently running watch before starting a new one? – Schuck