Am 14. September 2017 haben wir eine überarbeitete Fassung unserer Datenschutzrichtlinie veröffentlicht. Wenn Sie video2brain.com weiterhin nutzen, erklären Sie sich mit diesem überarbeiteten Dokument einverstanden. Bitte lesen Sie es deshalb sorgfältig durch.

Cross-Plattform-Apps mit Cordova, Ionic, TypeScript und Visual Studio

Views mit Gulp in das korrekte Verzeichnis kopieren

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Der Task-Runner Gulp erlaubt die komfortable Automatisierung lästiger Routineaufgaben. Eine solche Routineaufgabe, nämlich das Kopieren von Dateien, wird in diesem Film gelöst.
05:10

Transkript

Da ich in meinen Apps immer gerne alle Dateien, also alle Code-Dateien und alle HTML-Dateien, die zu einem Feature gehören, an einer Stelle habe, zum Beispiel wie hier im Ordner "home", deswegen habe ich auch die Datei "home.html" im Ordner "app" - "home" angelegt. Das Ganze ist allerdings nur ein Entwicklungsordner. Bedeutet: Dieser Ordner wird später überhaupt nicht auf das Gerät kopiert, sondern nur der Inhalt des Ordners "www" wird kopiert. Jetzt schaut es so aus, dass meine Controller-Datei, also meine TypeScript-Datei, automatisch im Ordner "js" - "home" landet. Das liegt daran, dass es hier in diesem Gulp-File, und Gulp ist ein Task-Runner für JavaScript, und in dieser Datei gibt es eben einen Task, nämlich den Task "tsc" für TypeScript compile. Und dieser Task, der kompiliert TypeScript und kopiert es anschließend an die entsprechende Stelle. Nun möchte ich was Ähnliches für meine Views anlegen. Dazu gucke ich mir einmal hier oben die Variable "paths" an. In dieser Variablen sind sämtliche Pfade gespeichert, die wir benötigen. Und ich lege mir jetzt hier einen neuen Pfad an. Den nenne ich einmal "viewsSrc" für "Quelle meiner Views". Und das Ganze lege ich als Array an, auch wenn im Moment nur ein Eintrag enthalten ist. Und dieser Eintrag, der lautet "./app/", und im Ordner "app" ist das "**", das bedeutet soviel wie "alle Unterordner von app", und hier möchte ich alle Dateien mit der Endung "html" ganz gerne selektieren. Das Ganze soll dann später in einen Destinations-Ordner kopiert werden. Und dieser Destinations-Ordner, der lautet jetzt "./www", also der Ordner "www", und hier ist das der Ordner "views". Hier nehme ich nur einen einfachen String, denn ich kann tatsächlich das Ganze nur an eine Stelle später kopieren. Als nächstes benötige ich einen weiteren Task. Und so einen Gulp-Task, den schreibt man, indem man die Funktion "task" am Gulp-Objekt aufruft. Und zunächst einmal gebe ich diesem Task einen Namen, zum Beispiel "copy.html", weil ich HTML kopieren möchte, beziehungsweise, ich nehme einen Doppelpunkt, denn das ist so die Gulp-Konvention, dass man mit Doppelpunkten trennt. Als nächstes übergebe ich eine anonyme Funktion. Und in dieser anonymen Funktion mache ich nun Folgendes: Ich gebe zurück den Aufruf "gulp.src". Damit kann ich jetzt etwas selektieren. Und was ich selektieren möchte, ist mein Eintrag "paths.viewsSrc". Und alles, was darin ist, das möchte ich weitergeben. Dazu kann ich "pipe" aufrufen. Und ich gebe es weiter, an den Gulp-Task "dest". Und mit "dest" kopiere ich an eine Ausgabestelle, und zwar an die "viewsDest". Jetzt fehlt hier noch ein Semikolon, und hier fehlt auch noch eines. Und das war jetzt schon mein Task zum Kopieren von HTML. Jetzt muss ich dafür noch Sorge tragen, dass dieser Task auch aufgerufen wird, und zwar am besten immer dann, wenn kompiliert wird. Kompiliert wird nämlich, wenn ich die App debuggen möchte, wenn ich die App verteile. Also, ich kann die App niemals starten, ohne sie zu kompilieren. Und wenn wir oben mal schauen, dann sehen wir, dass es hier ein Binding an den BeforeBuild-Step gibt. Also, bevor kompiliert wird, wird der Task "default" aufgerufen. Und der hat aktuell eine Abhängigkeit an die Tasks "sass" und "tsc". Und hier packen wir als weitere Abhängigkeit unseren neuen Task "copy:html" herein. Wenn ich jetzt hingehe und einmal das Ganze kompiliere, dann werden wir gleich sehen, dass ich im Ordner "www" einen Unterordner "views" erhalten werde. Und in diesem Unterordner "views" wird es dann einen Unterordner "home" geben. Und da ist dann tatsächlich unser HomeView enthalten. Und hier ist er auch schon: "views", "home". Und hier haben wir die home.html. Heißt also: Wir können sehr schön zur Entwicklungszeit ganz konzentriert unsere verschiedenen Dateien je Feature in einem separaten Entwicklungsordner halten und können dann über Gulp-Tasks, so wie über diesen, den wir gerade eben hier geschrieben haben, über solche Gulp-Tasks können wir dann also Dateien zum Beispiel kopieren oder irgendwie auch noch anders modifizieren.

Cross-Plattform-Apps mit Cordova, Ionic, TypeScript und Visual Studio

Steigen Sie in die App-Programmierung ein und kombinieren Sie die praktischen Tools.

2 Std. 45 min (23 Videos)
Derzeit sind keine Feedbacks vorhanden...
 
Exklusiv für Abo-Kunden
Ihr(e) Trainer:
Erscheinungsdatum:14.11.2016
Laufzeit:2 Std. 45 min (23 Videos)

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!