If like me you’ve always had one foot in the open source development camp, then you’ll be really pleased by the recent changes in ASP.NET 5. Microsoft have stopped reinventing the wheel and accepted that the existing open source tools for client-side package management should be integrated into Visual Studio.
Gulp, Grunt, Bower, NPM – what’s the difference exactly?
I’ll start with a summary:
- NPM, is the package manager that installs the other package managers discussed in this post, as they all run on node.js locally.
The NPM and Bower package managers are smart enough to resolve all the dependencies required by a package, and make sure that we only download a single instance of a given dependency.
package.json file which has details of the package’s current version, dependencies, contact info and documentation, and scripts that should be run at specific points in its life-cycle.
Gulp is so named as it is based on piping streams through multiple commands until all the commands are complete. This piping means that Gulp takes more advantage of the asynchronous nature of node.js, and can give better performance.
The standard ASP.NET 5 project templates use Gulp as the default task runner, so if you create an ASP.NET 5 project with Visual Studio, Gulp will be available straight away. If you right-click on the
gulpfile.js in the Solution Explorer and then click the Task Runner Explorer, then you will be able to see all the individual tasks that are defined.
Tasks run code from modules that are required by the gulpfile to do things such as cleaning out your build directory. You would do this by requiring the
rimraf module and then calling it within a “clean” task, passing your build directory in as a parameter.
Gulp modules are installed using NPM.
Grunt is a Task Runner similar to Gulp, and also has integration in Visual Studio 2015. It takes more of a declarative approach to defining tasks: you require already available Grunt tasks, and specify parameters for them by using JSON. I won’t go into as much detail on Grunt here as I’m planning to stick with Gulp for task running in future.
Bower is a package manager for client-side code, it was created by the team behind Bootstrap to give people a standard way of obtaining updates to it. We require so much client side code from so many sources, each with their own dependencies, that it has become too much of a handful to just commit random snippets into version control and expect ourselves to manually keep everything up to date.
You can think of Bower as NuGet for the static third-party code that your web application requires. Rather than downloading packages from the web, including possibly resolving dependencies manually, it will take care of downloading everything we need for a particular package.
Yeoman is like Bower except it just generates projects from templates. It does the same job as the project templates that already exist within Visual Studio, so I’m not going to go into too much detail on it in this post.