AngularJs, Tutorial AngularJs - Custom Build mit Gulp erstellen

Custom Build mit Gulp erstellen und somit den Code für den Produktions Einsatz minimieren und durch uglify unlesbar machen.

Vorraussetzung:

AngularJs 1.5.x - link
NodeJs muss installiert sein - link

Downloads:

Beispiel

Vorwort

Dies ist ein Beispiel Custom Build Vorgang, der nur simpel veranschaulichen soll wie ein Production Build aussehen könnte.
Hierbei benutzen wir Gulp, welches ein Tool zum Automatisieren von zeitintensiven Tasks ist.
Gerade bei Javascript Applikationen kann es schnell zu vielen Script Imports in der index.html kommen.
Hier wird von einer einfachen App ausgegangen, die wie folgt aussehen könnte:

<html ng-app="app">
    <head>
        <title>Custom Build</title>
        <link rel="stylesheet" href="libs/bootstrap/bootstrap.min.css" />
    </head>
    <body>
        <div class="container">
            <ng-view></ng-view>
        </div>
    </body>

    <script src="libs/angular/angular.js"></script>
    <script src="libs/angular-route/angular-route.min.js"></script>
    <script src="app/app.js"></script>
    <script src="app/app.routes.js"></script>
    <script src="app/home/home.component.js"></script>

</html>

NodeJs App initialisieren

Eingabeauforderung im Root Verzeichnis der App öffnen und folgende Befehle ausführen
npm init
Hier kurz Fragen beantworten, die zum erstellen einer nodejs Applikation führen.

Dependencies installieren

Mit folgendem Befehl installieren wir Gulp und weitere Third Parties, die uns beim Erstellen des Custom Build unterstützen.
npm install --save gulp gulp-concat gulp-minify gulp-ng-annotate gulp-uglify run-sequence

Gulp Datei anlegen

Im Root Verzeichnis legen wir nun die Datei „gulpfile.js“ an. Diese wird automatisch aufgerufen sobald man in der Eingabeaufforderung „gulp“ eingibt. (da wir gulp als Dependency zum Projekt hinzugefügt haben)

Build Task definieren

Hiermit definieren wir den Main Task „build“, welchen wir beim Builden aufrufen möchten. Dieser ruft sequentiell weitere Tasks auf.

gulp.task('build', function () {
    inSequence('vendor:css', 'vendor:js', 'app:js', 'copy:views', function () {
        console.info("build done");
    });
});

Task zum Zusammenführen von Vendor CSS Dateien

Da wir in diesem Fall nur Bootstrap als CSS Datei haben, wird in dem Array nur diese angegeben. Hier können aber weitere Third Party CSS Dateien angegeben werden.

gulp.task('vendor:css', function () {
    return gulp.src([
        'src/libs/bootstrap/bootstrap.min.css'
    ])
    .pipe(concat('vendor.min.css'))
    .pipe(gulp.dest('./build/css'));
});

Task zum Zusammenführen von Vendor Js Dateien

An dieser Stelle werden alle Third Party Javascript Dateien angegeben. Hierbei sollte darauf geachtet werden, dass die .min Version eingetragen wird. (um einen weiteren minify Task zu vermeiden)

gulp.task('vendor:js', function () {
    return gulp.src([
        'src/libs/angular/angular.min.js',
        'src/libs/angular-route/angular-route.min.js'
    ])
    .pipe(concat('vendor.min.js'))
    .pipe(gulp.dest('./build/js'));
});

Task zum Zusammenführen von AppJs Dateien

Beim App Js Task benutzen wir zusätzlich „ng-annotate“, welches für das Hinzufügen und Entfernen von Angular Dependencies zuständig ist.
In dem src Array geben wir an erster Stelle unseren App Einstieg „app.js“ damit gewährleistet ist, dass dieser zuerst geladen wird.
Danach folgt ein src/app/**/*.js, welches dafür sorgt, dass in allen Ordnern unter angegebenem Pfad nach Dateien mit .js Endung geschaut wird.

gulp.task('app:js', function () {
    return gulp.src([
        'src/app/app.js',
        'src/app/**/*.js'
    ])
    .pipe(concat('app.min.js'))
    .pipe(ngAnnotate())
    .pipe(gulp.dest('./build/js'));
});

Task zum Kopieren der HTML Dateien

Final kopieren wir noch alle HTML Dateien aus unserem App Verzeichnis mit folgendem Task

gulp.task('copy:views', function () {
    return gulp.src(['src/**/*.html', '!src/index.html'])
    .pipe(gulp.dest('./build'));
});

Ziel Ordner anlegen

Im Root Verzeichnis erstellen wir einen Ordner mit der Bezeichnung „build“

minimalistische index.html in „build“ erstellen

Bei der minimalistischen Version der index.html werden nur noch die von gulp erstellten vendor.min.js, vendor.min.css und app.min.js geladen.

<html ng-app="app">
    <head>
        <title>Custom Build</title>
        <link rel="stylesheet" href="css/vendor.min.css" />
    </head>

    <body>
        <div class="container">
            <ng-view></ng-view>
        </div>
    </body>

    <script src="js/vendor.min.js"></script>
    <script src="js/app.min.js"></script>

</html>

Fazit

Durch ein Custom Build lassen sich saubere Deploys einer Applikation anfertigen.
Hierdurch wird die Anzahl an Dateien und auch die Dateigröße der kompletten App minimiert.

Weiteres

Der Build Vorgang lässt sich auch für den Debug Vorgang nutzen.
Hierbei nutzt man eine „watch“, welche dann den jeweiligen Task aufruft.

#angularjs #build #gulp #Production

Autor: Ardian Shala

Ersteller der Webseite MuchaDev. Selbstständiger IT Constultant für Frontend Technologien.

AngularJs – Custom Build mit Gulp erstellen

Tutorial AngularJs