Nachdem ich ja im letzten Post beschrieben habe, wie man mit Hilfe von node und bower sich JavaScript Bibliotheken für seine Anwendung einbinden kann, will ich nun noch etwas mehr zeigen, was einem Node so zu bieten hat.
Typische Aufgabe während der Entwicklung ist ja, dass die HTML und JavaScript-Dateien vom lokalen Rechner auf einen Web-Server kopiert werden müssen. Dazu müssen zunächst alle Dateien, die auf den Server kopiert werden müssen identifiziert und dann kopiert werden.
In reinen .Net Projekten würde ich für das Deployment vielleicht zu MSBuild greifen – das hilft mir aber in meinem Fall nicht so wirklich weiter.
Mit gulp gibt es ein Buildsystem als Node-Module in JavaScript.
npm install gulp -g
installiert gulp und stellt es global zur Verfügung. Nun kann ich in meinem Projekt ein gulpfile.js
erstellen.
Ein einfaches Buildfile kann z.B. so aussehen:
var gulp = require('gulp'); gulp.task('copy', function(){ return gulp.src('app/*.html') .pipe(gulp.dest('dist/')); })
Dabei werden alle *.html
Dateien aus dem Verzeichnis app
in das Verzeichnis dist
kopiert. Existiert das Verzeichnis dist
noch nicht, wird es zuvor erstellt. Dieses Beispiel ist natürlich sehr einfach. Mittels gulp copy
kann nun die neue copy-Task von einer Konsole ausgeführt werden:
D:\projects\html_app>gulp copy [14:25:01] Using gulpfile D:\projects\html_app\gulpfile.js [14:25:01] Starting 'copy'... [14:25:01] Finished 'copy' after 17 ms
Ein etwas fortgeschritteneres Buildfile könnte wie folgt aussehen:
var gulp = require('gulp'), uglify = require('gulp-uglify'); gulp.task('html', function () { return gulp.src('app/*.html') .pipe(gulp.dest('dist')); }) gulp.task('js', function () { return gulp.src('app/*.js') .pipe(uglify()) .pipe(gulp.dest('dist')); }) gulp.task('default', ['html', 'js'], function () { })
Die Task default
wird dabei automatisch aufgerufen, wenn man gulp
von der Kommandozeile startet. Als zweiter Parameter der Task werden die abhängigen Tasks angegeben. Diese werden also automatisch zuvor ausgeführt.
D:\projects\html_app>gulp [14:26:15] Using gulpfile D:\projects\html_app\gulpfile.js [14:26:15] Starting 'html'... [14:26:15] Starting 'js'... [14:26:15] Finished 'js' after 39 ms [14:26:15] Finished 'html' after 49 ms [14:26:15] Starting 'default'... [14:26:15] Finished 'default' after 12 μs
In diesem Fall werden alle *.js
Datei aus dem Verzeichnis app
mit dem uglify-Package minimiert und dann nach dist
geschrieben. Somit kann man also in dem app-Verzeichnis die Anwendung entwickeln und in dist erhält man immer alle Dateien, die man auf den Server kopieren muss.