Share
In der vorherigen Anleitung haben wir ein Projekt erstellt und mithilfe von Grunt Stylus und Jade automatisch kompiliert. In diesem Tutorial machen wir dasselbe, verwenden aber einen anderen Task Runner: Gulp.
Installieren Sie Gulp global mit:
[sudo] npm install gulp -g
Fügen Sie wie beim Grunt-Prozess Ihrem Projekt eine "package.json" -Datei hinzu npm init Befehl.
Installieren Sie Gulp in Ihrem Projekt und speichern Sie es als Entwicklungsabhängigkeit mit:
npm install gulp --save-dev
In einer Parallele zu Grunts "Gruntfile" verwendet Gulp ein "Gulpfile". Fügen Sie im Stammverzeichnis Ihres „Gulp-Projekts“ eine Datei mit dem Namen „gulpfile.js“ hinzu..
Um zu beginnen, geben wir der Datei Zugriff auf das soeben in Ihrem Ordner "node_modules" installierte "gulp" -Paket, indem Sie diese Zeile oben in Ihrem Gulpfile hinzufügen:
Accentsconagua
var gulp = required ('gulp');Genau genommen ist Gulp eigentlich nicht so brauchen Gulp-Plugins verwenden, da sie tatsächlich Vanilla-npm-Pakete verwenden können. Es gibt jedoch mehrere Plugins, die speziell für die Verwendung mit Gulp optimiert wurden. Wenn Sie mit dem Starten beginnen, werden Sie diese einfacher verwenden können.
Suchen Sie nach Gulp-Plugins unter: http://gulpjs.com/plugins/
Wir installieren diese Plugins:
Diese Plugins spielen im Wesentlichen die gleichen Rollen wie die von Grunt, mit einigen Unterschieden.
Erstens müssen wir kein „watch“ -Plugin installieren, da Gulp eines installiert hat.
Zweitens installieren wir das "gulp-concat" -Plugin, um alle unsere Dateien zusammenzuführen (verketten), bevor wir die gesamte Partie verkleinern. Danke an Dan für diesen Hinweis!
Hinweis: Wir verwenden ein Plugin namens "gulp-minify-css", aber es verwendet dasselbe "clean-css" -Paket, das Sie bisher verwendet haben.
Führen Sie jeden Ihrer Befehle aus, während Ihr Terminal auf Ihren Ordner "Gulp Project" zeigt:
npm install gulp-stylus --save-dev
npm install gulp-autoprefixer --save-dev
npm install gulp-minify-css --save-dev
npm install gulp-jade --save-dev
npm install gulp-uglify --save-dev
npm install gulp-concat --save-dev
Wenn Sie fertig sind, sollten Sie diese Ordner im Ordner "node_modules" Ihres Projekts sehen:
Mehr oder weniger… Genau wie bei Grunt müssen wir jedes Plugin aktivieren, diesmal in unserer Gulpfile. Anstelle von Grunts Methode grunt.loadNpmTasks, wir werden die verwenden benötigen Funktion nativ zu NodeJS.
Fügen Sie diese Zeilen zu Ihrer Gulpfile unter der bereits hinzugefügten Zeile hinzu.
var stylus = required ('gulp-stylus'); var autoprefixer = required ('gulp-autoprefixer'); var minifyCSS = erfordern ('gulp-minify-css'); var jade = erfordern ('gulp-jade'); var uglify = required ('gulp-uglify'); var umbenennen = erfordern ('gulp-umbenennen'); var concat = erfordern ('gulp-concat');Dieser Ansatz unterscheidet sich von Grunt dahingehend, dass wir noch keine Befehle registriert haben, die zu diesem Zeitpunkt ausgeführt werden können. Wir haben nur JavaScript-Variablen erstellt, die jeweils unsere Plugins darstellen, die wir später in unserer Gulpfile verwenden können.
Einer der Hauptunterschiede zwischen Grunt und Gulp besteht darin, dass Sie mit Gulp keine Aufgabe für jedes Plugin, das Sie in Ihrem Projekt verwenden, individuell konfigurieren müssen. Stattdessen konfigurieren Sie nur Aufgaben für das Ist Befehle du willst rennen.
In unserer Gruntfile haben wir zuvor eine eigene Aufgabe für Stylus, Autoprefixer und clean-css eingerichtet. In unserem Gulpfile müssen wir das nicht tun. Wir wissen, dass wir jedes Mal, wenn wir unseren Stylus-Code kompilieren, möchten, dass das resultierende CSS automatisch korrigiert und minimiert wird. Stattdessen erstellen wir eine einzige Aufgabe, um all diese Dinge auf einmal zu erledigen.
Fügen Sie diesen Code am Ende Ihrer Gulpfile hinzu:
gulp.task ('css', function () gulp.src ('source / stylus / main.styl') .pipe (stylus (compress: false, pfade: ['source / stylus']) (autoprefixer ()) .pipe (minifyCSS ()) .pipe (umbenennen ('style.css')) .pipe (gulp.dest ('build')));Lassen Sie uns zusammenbrechen, was wir getan haben.
Erstens verwenden wir gulp.task () um eine neue Aufgabe mit dem Namen css, und etwas Platz für eine JavaScript-Funktion schaffen, die bei jeder Ausführung des Befehls ausgeführt wird Schluck Css:
gulp.task ('css', function () );Als nächstes verwenden wir gulp.src () um die zu verarbeitende Quelldatei auf "source / stylus / main.styl" zu setzen:
gulp.task ('css', function () gulp.src ('source / stylus / main.styl'));Dann beginnen wir mit Gulp Rohr() Funktion, um jedes unserer Plugins aufzurufen. Der WegRohr() funktioniert wie eine physische Rohrleitung, bei der Sie etwas in die erste Rohrleitung einführen und diese dann durch jede verbundene Rohrleitung passieren.
Unsere erste "Pipe" fügt die Stylus-Kompilierung hinzu und verwendet dieselbe komprimieren und Pfade Optionen wie zuvor bei Grunt:
gulp.task ('css', function () gulp.src ('source / stylus / main.styl') .pipe (stylus (compress: false, pfade: ['source / stylus'])) ;Wir verbinden dann eine zweite Pipe, die den kompilierten Code übernimmt und Autoprefixing hinzufügt:
gulp.task ('css', function () gulp.src ('source / stylus / main.styl') .pipe (stylus (compress: false, pfade: ['source / stylus']) (Autoprefixer ()));Wir verbinden eine dritte Pipe, nehmen unser vorangestelltes CSS und säubern es:
gulp.task ('css', function () gulp.src ('source / stylus / main.styl') .pipe (stylus (compress: false, pfade: ['source / stylus']) (autoprefixer ()) .pipe (minifyCSS ()));Wenn wir an diesem Punkt eine CSS-Datei ausgeben würden, würde sie "main.css" heißen, um der Quelldatei "main.styl" zu entsprechen, mit der wir begonnen haben. Wir verbinden also eine vierte Pipe, um die Datei umzubenennen, die wir mit "style.css" beenden werden:
gulp.task ('css', function () gulp.src ('source / stylus / main.styl') .pipe (stylus (compress: false, pfade: ['source / stylus']) (autoprefixer ()) .pipe (minifyCSS ()) .pipe (umbenennen ('style.css')));Zum Schluss verbinden wir unsere fünfte und letzte Pipe, um unsere fertige CSS-Datei mit zu senden gulp.dest () um unseren Ausgabeordner als "Build" festzulegen.
gulp.task ('css', function () gulp.src ('source / stylus / main.styl') .pipe (stylus (compress: false, pfade: ['source / stylus']) (autoprefixer ()) .pipe (minifyCSS ()) .pipe (umbenennen ('style.css')) .pipe (gulp.dest ('build')));Jetzt die css Aufgabe, die Sie gerade erstellt haben, ist bereit zu gehen. Führen Sie in Ihrem Projektstammordner Folgendes aus:
Schluck Css
… Und Ihre Stylus-Datei wird kompiliert, automatisch korrigiert und bereinigt und dann als „style.css“ in Ihrem „build“ -Ordner ausgegeben.
Wir werden denselben Vorgang erneut verwenden, um unsere Aufgabe für die Jade-Kompilierung festzulegen. Wir erstellen eine Aufgabe mit dem Namen html, Legen Sie fest, dass alle ".jade" -Dateien im Ordner "source / jade" als Quelle verwendet werden, die Jade-Kompilierung durchläuft, und senden Sie die resultierenden HTML-Dateien in unseren "build" -Ordner.
Fügen Sie diesen Code unter dem hinzu css Aufgabe, die Sie gerade erstellt haben:
gulp.task ('html', function () gulp.src ('source / jade / *. jade') .pipe (jade ()) .pipe (gulp.dest ('build')));Führen Sie Ihre neue Aufgabe mit dem Befehl aus:
gulp html
… Und Sie sehen jede Ihrer Jade-Dateien in Ihrem HTML-Ordner in entsprechende HTML-Dateien kompiliert.
Jetzt werden wir denselben Ansatz noch einmal verwenden und eine Aufgabe mit dem Namen "Einrichten" einrichten js Um die jQuery- und Modernizr-Dateien aus unserem Ordner „bower_components“ zu übernehmen, haken Sie sie (verketten und minimieren) ab und geben Sie den Code als Datei mit dem Namen „output.min.js“ in unseren Ordner „build“ aus.
gulp.task ('js', function () gulp.src (['bower_components / jquery / dist / jquery.js', 'bower_components / modernizr / modernizr.js']) .pipe ('output.min. js ')) // concat zieht alle unsere Dateien zusammen, bevor diese minimiert werden .pipe (uglify ()) .pipe (gulp.dest (' build ')));Hinweis: In diesem Fall möchten wir zwei Quelldateien angeben. Daher übergeben wir die beiden Dateinamen als Array, d. h. durch Kommas getrennte Werte zwischen eckigen Klammern.
Führen Sie Ihre js Aufgabe mit dem Befehl
Schluck js
… Und Sie sehen eine neue Datei mit dem Namen „output.min.js“ in Ihrem „build“ -Ordner, die jQuery und Modernizr in reduzierter Form enthält.
Jetzt haben wir unsere Gewohnheit css und html Tasks einrichten, können wir die eingebauten Gulp-Dateien verwendengulp.watch () Funktion, so dass sie automatisch für uns laufen.
Fügen Sie diesen Code am Ende Ihrer Gulpfile hinzu, um eine sehen Aufgabe:
gulp.task ('watch', function () gulp.watch ('source / stylus / *. styl', ['css']); gulp.watch ('source / jade / *. jade', ['html ']););Die erste Verwendung von gulp.watch () setzt die css Task, der ausgeführt wird, wenn eine .styl-Datei im Ordner „source / stylus“ geändert wird.
Die zweite Verwendung von gulp.watch () setzt die html Task, der ausgeführt wird, wenn eine ".jade" -Datei im Ordner "source / jade" geändert wird.
Führen Sie Ihre sehen Aufgabe mit dem Befehl
schluck zu sehen
… Und wann immer Sie Änderungen an einer Ihrer Stylus- oder Jade-Dateien speichern, wird Ihre Zusammenstellung automatisch behandelt.
Genau wie bei unserem Grunt-Projekt erstellen wir eine Standardaufgabe, die immer dann ausgeführt wird, wenn wir den Befehl verwenden Schluck von selbst.
Fügen Sie diese Zeile am Ende Ihrer Gulpfile hinzu:
gulp.task ('default', ['css', 'html', 'js']);Wir verwenden diese Aufgabe, um unser gesamtes Projekt, einschließlich JavaScript, zu erstellen, indem Sie das ausführen css, html und js Aufgaben.
Um Ihr gesamtes Projekt mit der Standardaufgabe zu erstellen, verwenden Sie den Befehl:
Schluck
Als Nächstes werden wir Ihrem Grunt- und Gulp-Projekt den letzten Schliff geben, der sie zu ultimativen Effizienzmaschinen macht und das Live-Laden und die Browsersynchronisierung.
Sie erfahren, wie Sie einen Befehl erstellen, mit dem Ihr Projekt in einer Vorschau für localhost gestartet wird, d. H. Sie können einen Webhost auf Ihrem lokalen Computer mit einem Computer simulieren http: // Protokoll statt einesDatei:// Protokoll, um eine Vorschau Ihrer Website anzuzeigen.
Während Ihre Projektquelldateien auf Änderungen überwacht und automatisch kompiliert werden, wird Ihre Vorschau für localhost automatisch neu geladen, so dass Sie die Änderungen sofort nach dem Speichern der Änderungen im Browser sehen.
Wir richten dann Ihre localhost-Vorschau so ein, dass jeder Browser, in dem Sie ihn anzeigen, synchronisiert wird, einschließlich Browser auf verschiedenen Geräten, die sich auf derselben Internetverbindung befinden, z. B. Tablets und Telefone. Öffnen Sie ein Menü in einem Browser und sehen Sie, wie es in jedem anderen Browser und Gerät gleichzeitig reagiert.
!
