Tooling: NPM scripts in Task Runner Explorer

Created on 8 Mar 2016  路  7Comments  路  Source: aspnet/Tooling

This should be a core part of the Visual Studio web tooling.

NPM scripts are a tool that is available for everybody using node. It's not as opinionated as using grunt or gulp.

Including grunt and gulp in your project just to be able to call tasks that have a cli and their own config files seems like a lot of layers of unnecessary technological burden.

For example you want to run a webpack watch when you open your project, and you already set up your webpack.config.js:

You have to include grunt as a dependency, grunt-webpack as a dependency, learn and understand the gruntfile syntax, require the webpack config in grunt, feed the config to the grunt webpack task, modify your config to watch, and create a grunt task for it.

Then you can select the project open binding in the task runner explorer.

With npm this looks like this in your package.json (which will exist anyway):

scripts: {
    "watch:webpack": "webpack -w"
}

No plumbing, no concepts like grunt tasks or gulp pipelines. Just the command you want to call.

I have very rarely seen cases when something was easier to code or understand in grunt than in plain npm scripts. You look at the npm script and know what it does in a blink.

Although it's simple (provides aliases for running commands), it's not that difficult or tedious to do all your build, test, publish, watch, etc scripts in npm,

You can easily search for blog posts about how to use npm as your primary build tool, like this one. The official documentation is quite short about this since there are no difficult concepts to understand.

There are special scripts like build, publish, test, start. I don't really care about meaningfully support them, but specific bindings could be automatically added in task runner explorer for them, or they could just be ignored and the user could still bind them manually.

There are concepts like pre* and post* scripts but invoking an npm script invokes the related post and pre scripts automatically, so supporting them requires no extra work as far as I can see.

Shipping without this functionality is a serious oversight in my personal opinion.

Of course Mads Kristensen has an extension for it by the way:
https://github.com/madskristensen/NpmTaskRunner


Edit: And even if you for some task need gulp in your project, and even if task runner only supported npm, you could write your gulpfile just like now, and just add one npm script, and you could use that:

scripts: {
    "gulp:fancy-task": "gulp fancy-task"
}

VS could support any other node task runner apart from gulp or grunt this way without implementing anything specific for them.

Issue Tracker Notification Posted TFS Tracked

Most helpful comment

We're rolling in my extension at some point, so please start using it and report any bugs or feature requests directly to its GitHub issue tracker

All 7 comments

We're rolling in my extension at some point, so please start using it and report any bugs or feature requests directly to its GitHub issue tracker

I already do. Basic functionality works without noticable problems.

Pre* and post* scripts work fine. A relatively small but useful improvement would be to list them hierarchically, in the following fashion:

  • package.json

    • Scripts

    • watch



      • prewatch


      • postwatch



    • test



      • pretest



    • apple

    • banana

    • cantaloupe



      • postcantaloupe



TFS Bug#231167

The GitHub Issue Tracker for the aspnet/Tooling repo is being deprecated in favor of Visual Studio's Report a Problem tool.

If this issue is still a problem with the RTW release of Visual Studio 2017, please report a new issue using the Report a Problem tool. While you can still use .NET Core and ASP.NET Preview tools with Visual Studio 2015, Visual Studio 2017 is now the officially supported tool for developing .NET Core and ASP.NET Core projects.

By using the Report a Problem tool (available in both VS 2017 and VS 2015), you can collect detailed information about the problem, and send it to Microsoft with just a few button clicks. See Visual Studio's Talk to Us page for more details.

Please use the discussion topic here for feedback and questions on the deprecation of this issue tracker. Thanks!

@madskristensen Is this tool still being rolled into VS2017? Seems like a huge oversite that NPM Scripts weren't supported already.

@BenRedmond In VS2017 you still need this extension. We haven't had time to roll it in yet and no concrete schedule for when we do

Sorry for necroposting. But is there any updates on if we can expect the built in task runner in vs2019 to work with npm scripts any time soon?

Was this page helpful?
0 / 5 - 0 ratings