Is there anyway to bind gulp tasks to Visual Studio 2017 build buttons?

Question

I have a typescript project in visual studio 2017 that has a gulpfile.js in it. I Want to run my tasks when i click on run, build or clean buttons. Is there anyway to do this?

I know i can do this by set tasks for before or after build, but i want to replace it, and add a task for run button.

Erie

Can't you just r+click on the task in task runner explorer and choose when you want the task to run? That just adds a comment to your gulpfile.js like this /// <binding BeforeBuild='my-task' /> – Outstare

@Barryman9000 can i stop the visual studio build after that? i don't want that visual studio regular build runs. sorry for my bad english. – Erie

You can stop the build after your tasks run. Are you looking for a gulp watch though? Something that continues to build your JS and CSS every time you save? – Outstare

@Barryman9000 how can i stop the default build? so after my task runs, nothing else happen. – Erie

By "default build" to you mean the solution, or do you mean your gulp build? Because both should stop after they run. If you gulp isn't stopping you might be running a gulp-watch command, or there's a problem with your gulp file. – Outstare

@Barryman9000 i mean the solution build. i want my gulp task run and after task finished, solution build complete. so when i click build, my task run and nothing else happen. – Erie

It really shouldn't matter when the solution build runs and when the gulp task runs. If you just want to run the gulp task you can call it from a command window instead of task runner explorer. If you click build in VS though, it's not going to just run the gulp task. Clicking build will build the solution, and you can have task runner explorer also run a gulp task – Outstare

Answer 1

A little bit later to answer this question, yet here is the summary of the answer combining comments on the original question and my experience so far

Visual Studio does contain Task runner, however, it does not recognize build in tasks defined in gulpfile.js.

In order to get this True integration with Visual Studio, we need to provide additional markup in the gulpfile.js by adding comment, that will populate task runner.

The one line we need is as follows:

/// <binding BeforeBuild='js,css' AfterBuild='move' Clean='cleanup' ProjectOpened='default' />

After adding the file your gulpgile.js should look like this:

/// <binding BeforeBuild='js,css' AfterBuild='move' Clean='cleanup' ProjectOpened='default' />

// Include gulp
var gulp = require('gulp');

If you add another line with additional definitions, it will not be recognized and only the top one is going to be used.

If you are a visual person you might want to to the Visual Studio. Nice guide for setting it up is populated here:

http://www.codedigest.com/quick-start/14/using-of-gulp-gulpfilejs-in-visual-studio-2017

UPDATED based on comments: How to run this the task runner

After you can click on the task in question and it will execute.

if you have added the binding described above, it will be automatically bound to your bound actions.

IE:

for triggering compile, just build the solution.

Riojas

what is the complete list for binding events? – Erie

@Erie in visual studio all of them are listed in my sample (BeforeBuild,AfterBuild,Clean,ProjectOpened) but in gulp you can have as many as you want – Riojas

I can add these with the task runner GUI too. Actually my question hasn't solution 😑 – Erie

@M6stafayou can add as many tasks you want but I presume the order will matter. just split them by comma. – Riojas

And what can i do for run button? – Erie

@M6stafa, I have updated my answer to add the information, hope it helps – Riojas