How to make c# project to compile and watch with Rollup?

Question

I have VS project on ASP.NET Core 2.0 server side and Vue.js on client side. I bundle and compile Vue.js files using Rollup.

I want in my VisualStudio to make bundle and watch by Rollup on compile.

I use this code in MyProject.csproj

<Target Name="DebugRunRollup" BeforeTargets="Build" Condition=" '$(Configuration)' == 'Debug'">
    <Exec Command="rollup -c --environment NODE_ENV:dev" />
</Target>

And all work perfectly, it compile js files on build.
But I also need to watch them.
Trying this code, but it did not work, no compile now,no watch.

<Exec Command="rollup -c -w --environment NODE_ENV:dev" />

How to make VisualStudio project to compile and watch with rollup.

I want when I update client code to update it in browser, without recompiling full project.

Answer 1

I would suggest you to avoid having client-side tasks run during the server-side build process. This just couples those two sides although you are usually developing them quite individually.

Instead, I would suggest you to add a pre-publish step within the .csproj that just runs your client-side build once, so you can publish your application including the built client-side code. That could look like this:

<Target Name="PrepublishScript" BeforeTargets="PrepareForPublish">
  <Exec Command="npm install" />
  <Exec Command="rollup -c" />
</Target>

And then, you should consider having your client-side build process with its watcher run when you are opening the project in Visual Studio. That way, as soon as you start working on the project, you get a freshly compiled app and whenever you make changes to the client-side scripts, you can rely on your client-side build process to update the files properly.

You can make scripts automatically run when you open the project by using the Task Runner Explorer. If you are using a build tool like Gulp, then support is already built-in. Otherwise, you can also install the NPM Task Runner extension to pick up scripts from your package.json.

The tasks will then appear in the task runner window, and you can start them from there or bind them to the “Project Open” event for example to make them run automatically:

If you are using Visual Studio Code, then the client-side build tasks are also picked up by default, and you can use an extension like Blade Runner to automatically run these tasks when you open your project in Code.