Aurelia, Visual Studio 2015 and the Task Runner Explorer

I was left feeling a little out of sorts after the Aurelia tutorial. I had got it working but I had to drop to PowerShell too many times. I like all my things to be in the IDE when I am developing. As a result I took a short detour to figure out if I could do a build after the initial set up of jspm without resorting to PowerShell.

To my Powershell friends – it’s nothing against PowerShell.

I managed to do the job with just a few changes. Here is what I did:

Move everything source related into src

I created a src/less directory for my less files (and converted the styles.css to less via a rename to styles.less). I copied index.html and config.js into the src directory as well. This act left nothing in the wwwroot that couldn’t be re-generated.

Update my Gulpfile.js

The build process is now a four step process.

  1. Re-generate the jspm_packages directory
  2. Build the Javascript Files
  3. Build the HTML Files
  4. Build the CSS Files

My Gulpfile.js accomplishes all of these as individual tasks:

/// <binding BeforeBuild='_build' />
var gulp = require("gulp"),
    del = require("del"),
    exec = require('child_process').exec,
    babel = require("gulp-babel"),
    less = require("gulp-less"),
    sourcemaps = require("gulp-sourcemaps");

//#region Build Tasks
gulp.task('build:jspm', function (cb) {
    exec("jspm install", function(err, stdout, stderr) {

gulp.task('build:js', function () {
    // Copy everything but the config.js through the Babel transpiler with source modules
    return gulp.src(["src/**/*.js", "!src/config.js"])
        .pipe(babel({ modules: "system" }))
        .pipe(sourcemaps.write({ includeContent: false, sourceRoot: "/src/" }))

gulp.task('build:html', function () {
    // Copy all the HTML files plus the src/config.js file into place
    return gulp.src(["src/**/*.html"])

gulp.task('build:css', function () {
    // Pre-process the site less file through the LESS preprocessor
    return gulp.src("src/less/styles.less")
        .pipe(less({ paths: "src/less" }))
        .pipe(sourcemaps.write({ includeContent: false, sourceRoot: "/src/" }))

gulp.task("_build", ["build:jspm", "build:js", "build:css", "build:html"]);

//#region Clean-up Tasks
gulp.task("_clean", function (cb) {
    ], cb);

The only task here that should be new is the exec task. This is a core part of node and provides a mechanism for running a command line utility. In this case, I run jspm install to install the packages.

To support this gulp file, I needed to adjust the devDependencies in my package.json file:

  "devDependencies": {
    "gulp": "^3.8",
    "del": "^1.1",
    "gulp-babel": "^4.0",
    "gulp-less": "^3.0",
    "gulp-sourcemaps": "^1.5"

These are all packages I have used in prior posts.

Add wwwroot to Gitignore

I am hosting my project on GitHub, so I need to ensure that I don’t accidentally check in things that can be generated. My .gitignore in the project root looks like this:


I also needed to remove the wwwroot files by hand. I did this with a git rm -r -f command followed by the usual git commit / git push commands.

Link to the Before Build Bindings

I now have two gulp commands: _build and _clean. I put the underscore there so that they are listed first in the task list under the Task Runner Explorer of Visual Studio. I can run them individually and they will do the right thing. However, linking the _build task to the Before Build binding and the _clean task to the Clean binding will allow me to automate more – I can just press the IIS Express button on the toolbar to initiate a build, start the web server and link in the browser.

You can find the results of this work at my check-point T-7 on my GitHub Repository.

In the mean time, happy April Fools Day!