Das JavaScript-Ökosystem in ASP.NET

Wer ASP.NET programmiert, egal ob WebForms oder MVC, hat es in Visual Studio mit nicht mehr ganz zeitgemäßen Vorlagen zu tun. Die mitgelieferten Skripte sind alt (Bootstrap 3.0.0, jQuery 1.10.2) und die Integration ist oft unzureichend, weil lediglich die finalen Dateien vorhanden sind. Optimierte Versionen mit einem reduzierten Umfang lassen sich so nicht erstellen.

Es ist deshalb empfehlenswert, den Pfad der Nuget-Pakete und des auf System.Web.Optimization basierenden Bundling zu verlassen und auf Node-basierte Umgebungen zu setzen. Nichtsdestotrotz können Sie problemlos mit ASP.NET weiter arbeiten.

Vorbereitung

Bevor Sie starten, prüfen Sie, ob die Node-Umgebung bereit ist. Dazu gehört:

NodeJs — ein Installer ist auf der Website zu finden
Git — der Installer kann hier heruntergeladen werden

Strip Down

Der erste Schritt besteht darin, alle Nuget-Pakete zu entfernen, die ersetzt werden sollen. Dazu öffnen Sie das betroffene Projekt und die Nuget Packet Manager Console. Geben Sie dann nacheinander und in dieser Reihenfolge folgende Kommandos ein:

Uninstall-Package bootstrap
Uninstall-Package Microsoft.jQuery.Unobtrusive.Validation
Uninstall-Package jQuery.Validation
Uninstall-Package jQuery
Uninstall-Package Microsoft.AspNet.Web.Optimization
Uninstall-Package WebGrease
Uninstall-Package Antlr
Uninstall-Package Modernizr
Uninstall-Package Respond

Falls es bei Microsoft.AspNet.Web.Optimization zu einer Fehlermeldung kommt, entfernen Sie zuerst das Sprachpaket Microsoft.AspNet.Web.Optimization.de und dann das Stammpaket.

Anpassungen im Projekt

Im Projekt fehlen nu Referenzen, die korrigiert bzw. deren Benutzung entfernt werden muss. Gehen Sie dazu systematisch folgendermaßen vor:

Löschen Sie die Datei App_Start\BundleConfig.cs aus dem Projekt
Entfernen Sie die Zeile using System.Web.Optimization; aus der Global.asax.cs (ca. Zeile 7)
Entfernen Sie den Aufruf BundleConfig.RegisterBundles(BundleTable.Bundles); aus der Global.asax.cs (ca. Zeile 17)

Öffnen Sie nun die zentrale web.config im Stammverzeichnis des Projekts. Entfernen Sie die Assembly Bindungen für System.Web.Optimization und WebGrease:

Öffnen Sie nun die web.config im Ordner Views. Entfernen Sie dort folgenden Eintrag:

Neubeginn

Nun werden die fehlenden Funktionen ja meist benötigt. Diesen Teil übernehmen nun serverseitige JavaScript, die dem Entwickler via NodeJs zur Verfügung stehen.

Zuerst wird Node mittels npm konfiguriert. Dazu fügen Sie eine Konfigurationsdatei im Stannverzeichnis des Projekts ein:

Add > New item > NPM Configuration File

Sollte die Projektvorlage nicht zur Verfügung stehen, dann öffnen sie die Kommandozeile, navigieren Sie den aktuellen Ordner zum Projektordner und geben Sie dann dort npm init ein. Folgen Sie den Anweisungen. Die Angaben sind nicht relevant im Moment, es geht nur um einen bequemen Weg zur Datei.

Nun wird Bower installiert. Dazu gehen Sie auf die Kommandozeile und geben folgendes ein:

npm install bower -g

Der Schalter -g sorgt dafür, dass dieses Werkzeug nun global für alle Projekte zur Verfügung steht.

Fügen Sie nun die Konfiguration für Bower hinzu. Bower ist die Quelle für Client-Skripte wie Bootstrap oder jQuery.

Add > New item > Bower Configuration File

Sollte die Projektvorlage nicht zur Verfügung stehen, dann öffnen sie die Kommandozeile, navigieren Sie den aktuellen Ordner zum Projektordner und geben Sie dann dort bower init ein. Folgen Sie den Anweisungen. Die Angaben sind nicht relevant im Moment, es geht nur um einen bequemen Weg zur Datei.

Fügen Sie nun die Konfiguration für Gulp hinzu. Gulp ist ein Task Runner, der Aufgaben automatisiert für den Entwickler ausführt. Damit werden die Dateien später, kopiert, minimiert, gebundelt usw.

Aktivieren Sie nun Gulp. Dazu öffnen sie die Datei package.json und damit die npm-Konfiguration. Tragen Sie folgendes ein:

{
  "name": "asp.net",
  "version": "1.0.0",
  "description": "",
  "author": "",
  "devDependencies": {
    "gulp": "^3.9.1",
    "gulp-concat": "^2.6.0",
    "gulp-uglify": "^1.5.3",
    "gulp-minify-css": "^1.2.3",
    "rimraf": "^2.5.2"
  }
}

Der Abschnitt devDependencies ist hier relevant. Nach dem Speichern lädt Visual Studio die Pakete herunter und platziert sie in dem Ordner node_modules. Der Ordner ist nicht Teil des Projekts und wird nicht eingecheckt.

Konnfigurieren Sie nun Bower. Dazu editieren Sie die Datei .bowerrc (beginnt mit Punkt). Diese sollte folgendermaßen aussehen:

{
  "directory": "bower_components"
}

Aktivieren Sie nun Bower. Dazu öffnen sie die Datei bower.json und damit die Bower-Konfiguration. Tragen Sie folgendes ein:

{
  "name": "ASP.NET",
  "private": true,
  "dependencies": {
    "bootstrap": "^3.3.6",
    "modernizr": "^3.3.1",
    "angularjs": "^1.5.0",
    "angular-route": "^1.5.0"
  }
}

Der Abschnitt dependencies ist hier relevant. Nach dem Speichern lädt Visual Studio die Pakete herunter und platziert sie in dem Ordner bower_components. Der Ordner ist nicht Teil des Projekts und wird nicht eingecheckt. Die gezeigten Pakete sind Beispiele, laden Sie was immer benötigt wird hier.

Bower lädt Quellen von Github. Aus diesen werden nun die finalen Skripte extrahiert und bereitgestellt.

Automation mit Gulp

Zuerst erstellen Sie eine weitere Konfigurationsdatei:

Add > New item > Gulp Configuration File

Sollte die Projektvorlage nicht zur Verfügung stehen, dann öffnen sie die Kommandozeile, navigieren Sie den aktuellen Ordner zum Projektordner und geben Sie dann dort gulp init ein. Folgen Sie den Anweisungen. Die Angaben sind nicht relevant im Moment, es geht nur um einen bequemen Weg zur Datei.

Eine typische Gulp-Datei mit ASP.NET-tauglichen Pfaden sieht nun folgendermaßen aus:

/// 
var gulp = require('gulp');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var cssmin = require('gulp-minify-css');
var rimraf = require('rimraf');

gulp.task('clean:js', function (cb) {
  rimraf('./Scripts/**/*.*', cb);
});

gulp.task('clean:css', function (cb) {
  rimraf('./Content/**/*.*', cb);
});

gulp.task('clean', ["clean:js", "clean:css"]);

gulp.task('copy:bootstrap', function () {
  return gulp
    .src("./bower_components/bootstrap/dist/**/*.*")
    .pipe(gulp.dest("./Content/"));
});
gulp.task('copy:jquery', function () {
  return gulp
    .src("./bower_components/jquery/dist/*.*")
    .pipe(gulp.dest("./Scripts/"));
});

gulp.task('copy', ['copy:bootstrap', 'copy:jquery']);

// minify js in target
gulp.task("min:js", function () {
  gulp.src(["./Scripts/*.js", "!./Scripts/*.min.js"], { base: "." })
      .pipe(concat("./Scripts/site.min.js"))
      .pipe(uglify())
      .pipe(gulp.dest("."));
});
// minify css in target
gulp.task("min:css", function () {
  gulp.src(["./Content/css/*.css", "!./Content/css/*.min.css"], { base: "." })
      .pipe(concat("./Content/site.min.css"))
      .pipe(cssmin())
      .pipe(gulp.dest("."));
});

gulp.task("min", ["copy", "min:js", "min:css"]);

gulp.task('default', ["clean", "copy", "min"]);

Wenn Sie nun ein Projekt bauen, wird die Aufgabe „min“ ausgeführt, die die Aufgaben „copy“, „min:js“ und „min:css“ umfasst.

Das Auslösen kann auch über den Task Runner Explorer erfolgen. Klicken Sie rechts auf das gulpfile.js und Sie finden die Option im Kontextmenü.

Das JavaScript-Ökosystem in ASP.NET