Update (28/01/2015) : My team has just released a new nuget package that combine latest versions of node, nogit and npm. Don’t hesitate to try it.
What do we need to have today to build a web site? Here are common tasks you may need:
- Validate scripts with JSLint
- Run tests (unit/integration/e2e) with code coverage
- Run preprocessors for scripts (coffee, typescript) or styles (LESS, SASS)
- Follow WPO recommendations (minify, combine, optimize images…)
- Continuous testing and Continuous deployment
- Manage front-end components
- Run X, execute Y
So, what is exactly a front-end build process? An automated way to run one or more of these tasks in YOUR workflow to generate your production package.
Example front-end build process for an AngularJS application
Please note that asp.net Bundling & Minification is a perfect counter-example: it allows to combine & to minify styles and scripts (two important WPO recommendations) without having a build process. The current implementation is very clever but the scope is limited to these features. By the way, I will still use it for situations where I don’t need a “full control”.
About the process
Experienced & skilled developers know how important is automation. Most of VS extensions provide rich features and tools, like Web Essentials, but can rarely be used in an automated fashion. For sure, it could help a lot, but I don’t want this for many of my projects: I want something easily configurable, automated and fast.
Bower to manage front-end components
The important thing to note here is that Bower is just a package manager, and nothing else. it doesn’t offer the ability to concatenate or minify code, it doesn’t support a module system like AMD: its sole purpose is to manage packages for the web. Look at the search page, I’m sure you will recognize most of the available packages. Why bower and not nuget for my front-end dependencies ?
- Packages are often duplicates of others package managers/official sources
- Several packages contains too much files and you generally don’t have the full control
- Many packages are not up-to-date and most of the times they are maintained by external contributors
- When failing, Powershell scripts may break your project file.
But simply, this is not how work the vast majority of web developers. Bower is very popular tool and extremely simple to use.
Gulp/Grunt for the build process
Finally, Gulp.js or Grunt.js? It doesn’t really matter which tool you use, as long as it allows you to compose easily your own workflows. Here is an interesting post about Gulp vs Grunt.
Microsoft also embraces these new tools with a few extensions (see below) and even a new build process template for TFS released by MsOpenTech a few months ago.
How do I work with that tool chain inside Visual Studio?
Developing with that rich ecosystem often means to work with command line. Here are a few tools, extensions, packages that may help you inside Visual Studio.
SideWaffle Template Pack
A complete pack of Snippets, Project and Item Templates for Visual Studio.
More infos on the official web site http://sidewaffle.com/
Originally a plugin made to launch grunt tasks from inside Visual studio. It has now been extended with new functionalities (bower, gulp).
By using custom build assemblies, it’s even possible to run all your js tests during the build process (On premises or Visual Studio Online). All the details are explained in this post on the ALM blog.
Project is hosted here on codeplex.
Search for package directly in package.json/bower.json files. Very useful if you don’t like to use the command-line to manage your package.
More info on the VS gallery
TRX – Task Runner Explorer
This extension lets you execute any Grunt/Gulp task or target inside Visual Studio by adding a new Task Runner Explorer window. This is an early preview of the Grunt/Gulp support coming in Visual Studio “14”. It’s definitively another good step in the right direction.
Scott Hanselman blogged about this extension a few days ago.
I really like the smooth integration into VS, especially Before/After Build. The main disadvantage –in this version- is that this extension requires node.js runtime and global grunt/gulp packages. It won’t work on a workstation (or a build agent) without installing these prerequisites. Just for information, it’s not so strange to install node.js on a build agent: it’s already done for VSO agents. http://listofsoftwareontfshostedbuildserver.azurewebsites.net/
To illustrate all these concepts and tools, I created a repository on github. Warning, this can be considered as a dump of my thoughts. This sample is based on the popular todomvc repository. Mix an angular application and an asp.net web api in the same application may not be the best choice in terms of architecture, but it’s just to show that it’s possible to combine both in the same solution.
Points of interest
- Front-end dependencies are managed via Bower (bower.json)
- Portable nuget package (js, Npm, Bower, Grunt, …) created by whylee. So, I can run gulp/grunt tasks before build thanks to the custom wpp.targets.
- Works locally as well as on TFS and Visual Studio Online.
- Allow yourto use command line at the same time (>gulp tdd)
Does it fit into your needs? No ? That’s not a problem, just adapt it to your context, that’s the real advantage of these new tools. They are very close to developers and building a project no longer depends on a complex build template or service.