Share
Bislang haben Sie gelernt, wie man Code kompiliert, automatische Korrekturen vornimmt, reinigt, komprimiert und minimiert, indem Sie nur ein paar Wörter eingeben. Das ist großartig, aber was ist, wenn Sie ein Projekt haben, bei dem Sie mehrere dieser Befehle nacheinander ausführen müssen, bis Sie Ihre Arbeit abgeschlossen haben? Zum Beispiel:
Schon mit wenigen Wörtern pro Befehl wird es im Laufe eines typischen Site-Erstellungsprozesses schnell ermüdend.
Hier setzen „Task Runner“ ein, um den Tag zu retten. Mit Task-Läufern können Sie eine einzelne Datei in Ihrem Projekt einrichten, in der alle Aufgaben definiert sind, die Sie für Ihr Projekt ausführen müssen, sowie die Reihenfolge, in der sie ausgeführt werden müssen. In dieser Datei können Sie benutzerdefinierte Befehle definieren, mit denen Sie alle ausführen können Aufgaben einmal.
In diesem Lernprogramm erfahren Sie, wie Sie Task-Runner auf diese Weise einrichten. Außerdem erhalten Sie ein Beispiel für das Einfügen von Skripts aus Bower-Paketen zur effizienten Bereitstellung in Ihren Projekten.
Hinweis: In diesem Tutorial wird davon ausgegangen, dass Sie alle vorherigen Tutorials dieser Serie abgeschlossen haben. Wenn Sie das noch nicht getan haben, werden Sie es hilfreich finden, bevor Sie hier anfangen.
Momentan sind mehrere Task-Läufer verfügbar. In diesem Tutorial konzentrieren wir uns jedoch auf die beiden, die derzeit am beliebtesten sind: Grunt und Gulp.
Es gibt mehrere technische Unterschiede zwischen den beiden Projekten, auf die ich jetzt nicht eingehen möchte. Ich werde Ihnen auch nicht sagen, welche der beiden Sie verwenden sollten. Ich empfehle stattdessen, die folgenden Schritte auszuführen, um beide zu verwenden, und entscheiden Sie selbst, welche Sie bevorzugen.
Wir werden ein Projekt erstellen, das Stylus und Jade automatisch überwacht und automatisch kompiliert und CSS und JavaScript optimiert. Dies erreichen wir zuerst mit Grunt und dann (im nächsten Tutorial) mit Gulp.
Zunächst müssen wir ein Beispielprojekt mit einigen Dateien erstellen, die unser Task Runner ausführen kann. Erstellen Sie einen Ordner mit dem Namen "Grunt Project", fügen Sie dann einen Unterordner mit dem Namen "build" und einen Unterordner mit dem Namen "source" hinzu..
Fügen Sie im Ordner "source" zwei neue Unterordner mit den Namen "stylus", "jade" hinzu. Fügen Sie jedem Ordner einige Beispieldateien des entsprechenden Typs hinzu.
Die Dateien können beliebigen Code enthalten, sodass Sie den Kompilierungsprozess sehen können.
Spitze: Wenn Sie nicht sicher sind, welchen Code Sie hinzufügen möchten, versuchen Sie, Beispielcode von Codepen zu holen: mit Stift markierte Stifte, mit Jade markierte Stifte.
Zum Beispiel:
Wir werden dann auch das nutzen, was wir in einer früheren Lektion über Bower gelernt haben, und sich jQuery und Modernizr herunterladen, die wir später kombinieren und verbessern werden.
Führen Sie die Befehle aus:
bower install jquery --save
Bower installieren modernizr --save
Erstellen Sie nun ein Duplikat Ihres gesamten Projektordners und benennen Sie es in "Gulp-Projekt" um..
Auf diese Weise können Sie die Schritte zur Verwendung von Grunt in Ihrem Ordner "Grunt Project" und die Schritte zur Verwendung von Gulp in Ihrem Ordner "Gulp Project" befolgen.
Damit Grunt-Befehle funktionieren, müssen Sie ihre CLI (Command Line Interface) installieren. Installieren Sie es global mit:
[sudo] npm install -g grunt-cli
Jedes Projekt, das Grunt verwendet, benötigt eine "package.json" -Datei im Hauptordner.
Wir haben die Einrichtung einer "package.json" -Datei mit dem Befehl besprochen npm init im vorherigen Tutorial zu Taming 3rd Party Packages. Wenn Sie diesen Abschnitt noch nicht abgeschlossen haben, gehen Sie bitte zurück und folgen Sie ihm jetzt.
Installieren Sie Grunt in Ihrem Projekt und speichern Sie es als Entwicklungsabhängigkeit mit:
npm install grunt --save-dev
Jedes Grunt-Projekt muss auch das haben, was als a bezeichnet wird Gruntfile im Stammordner.
Eine Gruntfile ist eine Datei mit dem Namen "Gruntfile.js" oder "Gruntfile.coffee", wenn Sie lieber in CoffeeScript schreiben. In unserem Fall arbeiten wir mit JavaScript. Fügen Sie also eine Datei mit dem Namen „Gruntfile.js“ zu Ihrem Stammordner hinzu.
Wenn Sie Ihre Gruntfile ausfüllen, können Sie feststellen, welche Befehle die auszuführenden Aufgaben auslösen. Sie können beginnen, indem Sie einfach eine grundlegende Shell in Ihre Gruntfile einfügen. Wir werden später Ihren aktuellen Konfigurationscode einrichten.
Fügen Sie den folgenden Code zu Ihrer Gruntfile.js hinzu:
module.exports = Funktion (Grunzen) ;
Wenn Sie Pakete mit npm oder Bower verwenden möchten, müssen Sie an der richtigen Stelle suchen, um die für jedes System geeigneten Versionen zu erhalten.
Dasselbe gilt, wenn Pakete mit Grunt verwendet werden. Über Grunt können Sie auf ein Ökosystem von Plugins zugreifen, bei denen es sich im Wesentlichen um Vanilla-npm-Pakete handelt. Diese Plugins werden weiterhin über npm ausgeliefert, sind jedoch speziell für die Zusammenarbeit mit Grunt ausgestattet
Anstelle des npm-Pakets UglifyJS können Sie beispielsweise mit Grunt das Plugin "grunt-contrib-uglify" verwenden..
Sie können nach Grunt-Plugins unter http://gruntjs.com/plugins suchen
Für unser Projekt werden wir diese sechs Grunt-Plugins installieren:
Jeder wird im Unterordner "node_modules" Ihres Projektordners installiert und als Entwicklungsabhängigkeit gespeichert.
Führen Sie jeden dieser Befehle nacheinander aus, wobei Ihr Terminal auf Ihren Ordner "Grunt Project" zeigt:
npm install grunt-contrib-stylus --save-dev
npm install grunt-autoprefixer --save-dev
npm install grunt-contrib-cssmin --save-dev
npm install grunt-contrib-jade --save-dev
npm install grunt-contrib-uglify --save-dev
npm install grunt-contrib-watch --save-dev
Wenn Sie fertig sind, sollten Sie diese Ordner im Ordner "node_modules" Ihres Projekts sehen:
Jetzt benutzen wir die grunt.loadNpmTasks Methode, um unsere Plugins zu aktivieren.
In den geschweiften Klammern Ihrer vorhandenen Gruntfile fügen wir sechs Zeilen hinzu, eine, um jedes Grunt-Plugin zu aktivieren:
Accentsconagua
module.exports = Funktion (Grunzen) // Laden Sie Grunt-Plugins. grunt.loadNpmTasks ('grunt-contrib-stylus'); grunt.loadNpmTasks ('grunt-autoprefixer'); grunt.loadNpmTasks ('grunt-contrib-cssmin'); grunt.loadNpmTasks ('grunt-contrib-jade'); grunt.loadNpmTasks ('grunt-contrib-uglify'); grunt.loadNpmTasks ('grunt-contrib-watch'); ;Dieser Code registriert den Namen jedes Plugins als Grunt-Befehl, sodass wir diesen Befehl verwenden können, um das Plugin zur Ausführung einer Aufgabe zu veranlassen. Zum Beispiel würden wir den Befehl verwenden grunzen eine Stiftaufgabe ausführen,grunt Autoprefixer um eine Autoprefixer-Aufgabe auszuführen und so weiter.
Unsere Grunt-Plugins sind installiert und die zu verwendenden Befehle sind funktionsfähig. Wenn Sie sie jedoch jetzt verwenden würden, würden Sie nichts sehen. Der Grund ist, dass wir eine Konfiguration einrichten müssen, um zu bestimmen, was jede Aufgabe eigentlich tun soll.
Dies geschieht durch Hinzufügen von grunt.initConfig Methode an Ihre Gruntfile weiterleiten und dann Informationen durchleiten, die bestimmen, wie die einzelnen Aufgaben ausgeführt werden sollen.
Zuerst fügen wir das hinzu grunt.initConfig Methode über den Zeilen, die Sie gerade hinzugefügt haben, um Grunt-Plugins zu laden:
grunt.initConfig ();
Jetzt schaffen wir Platz für unsere Konfigurationsdaten. Fügen Sie geschweifte Klammern zum Öffnen und Schließen in die regulären Klammern ein, und fügen Sie zwischen ihnen eine leere Linie ein:
grunt.initConfig ();
Jetzt können wir die Konfiguration für jedes der installierten Plugins hinzufügen.
Jedes Plugin verfügt über einen eigenen Bereich von Einstellungen, die Sie verwenden können. Diese Optionen sind auf den im Abschnitt „Installieren von Grunt-Plugins“ verlinkten Seiten ausführlich beschrieben.
Ausführliche Informationen zum Konfigurieren von Grunt-Aufgaben finden Sie hier: http://gruntjs.com/configuring-tasks
Wir fangen mit dem Hinzufügen von Konfiguration für unsere an Stift Aufgabe.
Fügen Sie zwischen den geschweiften Klammern, die Sie gerade hinzugefügt haben, in der leeren Zeile den folgenden Code hinzu:
Stylus: compile: Optionen: compress: false, Pfade: ['source / stylus'], Dateien: 'build / style.css': 'source / stylus / main.styl',
Ihre Gruntfile sollte jetzt so aussehen:
module.exports = function (grunt) grunt.initConfig (stylus: compile: Optionen: compress: false), Pfade: ['source / stylus'], Dateien: 'build / style.css': ' source / stylus / main.styl ',); // Lade Grunt-Plugins. grunt.loadNpmTasks ('grunt-contrib-stylus'); grunt.loadNpmTasks ('grunt-autoprefixer'); grunt.loadNpmTasks ('grunt-contrib-cssmin'); grunt.loadNpmTasks ('grunt-contrib-jade'); grunt.loadNpmTasks ('grunt-contrib-uglify'); grunt.loadNpmTasks ('grunt-contrib-watch'); ; Lassen Sie uns eine Aufschlüsselung des hier hinzugefügten Codes durchgehen. Wir werden nicht jede Aufgabe aufschlüsseln, aber wenn Sie diese hier betrachten, sollten Sie einen Eindruck von der Art der Syntax erhalten, die bei der Konfiguration der Grunt-Task-Konfiguration verwendet wird.
Wie oben erwähnt, verfügt jedes Plugin über verschiedene Konfigurationsoptionen. Wenn Sie ein neues Plugin einsetzen, sollten Sie sich die darin enthaltenen Verwendungshinweise genau ansehen.
Das erste, was wir getan haben, ist, einen Eintrag in unsere Konfiguration für unsere hinzuzufügen Stift Aufgabe mit dem Code:
Stift: ,
Darin haben wir ein hinzugefügt kompilieren Eintrag, um zu steuern, was während des Kompilierens geschieht:
Stift: kompilieren: ,
In der kompilieren Aufgabe, die wir erstellt haben Optionen Bereich.
Wir haben diesen Bereich benutzt, um das einzustellen komprimieren Option zu falsch, weil wir später unsere Code-Optimierung durchführen werden.
Wir haben auch die eingestellt Pfade Option zu ['Quelle / Stift'] also wenn Stylus das sieht @einführen Während des Kompilierens sucht die Direktive nach Dateien, die im Ordner "source / stylus" des Projekts importiert werden sollen:
Stylus: compile: Optionen: compress: false, Pfade: ['source / stylus'],
Dann nach dem Optionen Bereich haben wir hinzugefügt Dateien Bereich, um das Ausgabeverzeichnis und den Dateinamen sowie das Eingabeverzeichnis und den Dateinamen zu steuern.
Als Ausgabeposition unserer kompilierten CSS-Datei haben wir festgelegt 'build / style.css', während die Stylus-Datei verarbeitet werden soll 'source / stylus / main.styl'.
Stylus: compile: Optionen: compress: false, Pfade: ['source / stylus'], Dateien: 'build / style.css': 'source / stylus / main.styl',
Wenn Ihr Terminal auf Ihren Hauptstammordner gerichtet ist, führen Sie den folgenden Befehl aus:
grunzen
Schauen Sie in Ihren "build" -Ordner und Sie sollten eine neu kompilierte "style.css" -Datei sehen.
Wir gehen jetzt ziemlich schnell durch die Konfiguration jeder verbleibenden Aufgabe. Fügen Sie jeden Block Konfigurationscode unmittelbar nach dem zuvor hinzugefügten ein.
Fügen Sie diesen Code hinzu:
Autoprefixer: kompilieren: Dateien: 'build / style.css': 'build / style.css',,,
Führen Sie die Autoprefixer-Aufgabe aus mit:
grunt Autoprefixer
Wenn Sie Ihre "build / style.css" -Datei überprüfen, sollten Sie jetzt ggf. Präfixe hinzufügen.
Fügen Sie diesen Code hinzu:
cssmin: clean: files: 'build / style.css': 'build / style.css',
Führen Sie die cssmin-Aufgabe aus mit:
grunzen cssmin
Wenn Sie sich jetzt noch einmal Ihre "build / style.css" ansehen, werden Sie feststellen, dass sie für Sie sauber gereinigt und komprimiert wurde.
Fügen Sie diesen Code hinzu:
jade: compile: files: [expand: true, cwd: "source / jade", src: "* .jade", dest: "build", ext: ".html"],
Führen Sie die Jade-Aufgabe aus mit:
Jade grunzen
Wenn Sie in Ihren "build" -Ordner schauen, sollten Sie jetzt eine HTML-Datei sehen, die jeder Jade-Datei entspricht, die Sie in Ihrem "source / jade" -Ordner hatten.
Fügen Sie diesen Code hinzu:
uglify: bower_js_files: files: 'build / output.min.js': ['bower_components / jquery / dist / jquery.js', 'bower_components / modernizr / modernizr.js'],
In diesem Beispiel verweisen wir auf die Positionen der zuvor installierten Bower-Komponenten.
Wir holen die vollständig erweiterten Versionen von jQuery und Modernizr aus unserem Ordner "bower_components", verketten und verkleinern sie in einer neuen Datei mit dem Namen "output.min.js". Dies ist eine großartige Möglichkeit, um mit Bower verwaltete Skripts bereitzustellen.
Führen Sie die uglify-Task aus mit:
grunzen
Sie sollten jetzt eine neue Datei „output.min.js“ in Ihrem Ordner „build“ sehen.
Bislang scheint es so, als ob wir nur einen Befehl ersetzt hätten, um eine bestimmte Aufgabe durch einen anderen Befehl zu erledigen, aber wir haben tatsächlich die Grundlagen dafür geschaffen, wo Grunt wirklich anfängt zu glänzen.
Der Schlüssel ist die Fähigkeit von Grunt, dass eine Aufgabe eine andere Aufgabe ausführt. Jetzt werden wir eine einrichten sehen Task, die bestimmte Dateien auf Änderungen überwacht, und führen Sie dann unsere aus Stift und Jade Aufgaben automatisch für uns.
Fügen Sie diesen Code hinzu:
watch: stylus: files: ['source / stylus / *. styl'], Aufgaben: ['stylus', 'autoprefixer', 'cssmin'], jade: files: ['source / jade / *. Jade '], Aufgaben: [' Jade '],
Wir haben zuerst unser hinzugefügt sehen Aufgabe, und dann haben wir einen Bereich für eingerichtet Stift und für Jade.
Das Dateien Option in jedem Satz, welche Dateien auf Änderungen überwacht werden sollen. Das Aufgaben Mit der Option wird festgelegt, welche Aufgaben ausgeführt werden sollen, wenn sich Änderungen in welcher Reihenfolge ergeben.
Zum Stift, Wir haben die Überwachungsaufgabe so eingestellt, dass alle ".styl" -Dateien im Ordner "source / stylus" überwacht werden, und wenn Änderungen angezeigt werden, wird das ausgeführt Stift, Autoprefixer und cssmin Aufgaben in dieser Reihenfolge.
Jetzt, wenn die Überwachungsaufgabe ausgeführt wird, müssen Sie lediglich Ihre Stylus-Dateien speichern, und Sie erhalten automatisch eine kompilierte, automatisch korrigierte und optimierte CSS-Datei, die in den „build“ -Ordner geschrieben wird.
Ebenso für Jade, Wir haben alle ".jade" -Dateien im Ordner "source / jade" für die Überwachung festgelegt Jade Task wird automatisch ausgeführt und kompiliert die entsprechende HTML-Datei im "build" .
Führen Sie die Überwachungsaufgabe aus mit:
grunzen beobachten
Stoppen Sie es erneut durch:
An dieser Stelle fragen Sie sich vielleicht, was ist mit der JavaScript-Aufgabe?
Der Grund, warum wir es nicht mit aufgenommen haben sehen Aufgabe ist, dass Sie keine Änderungen an den jQuery- und Modernizr-Dateien vornehmen, die von der uglify-Task verarbeitet werden. Also weil der sehen task antwortet nur auf Änderungen, die niemals ausgelöst werden würden, um Ihr JavaScript zu verarbeiten.
Stattdessen nutzen wir die Standard Aufgabe, die in Ihrer Gruntfile gesetzt werden kann. Dies ist die Aufgabe, die ausgeführt wird, wenn Sie den Befehl verwenden grunzen von selbst mit nichts angehängt.
Nach deinem letzten grunt.loadNpmTasks Linie, aber vor dem Schließen ; Fügen Sie in der Datei folgende Zeile hinzu:
grunt.registerTask ('default', [stylus ',' autoprefixer ',' cssmin ',' jade ',' uglify '])); Dies setzt die Standard Aufgabe ausführen Stift, Autoprefixer, cssmin, Jade und dann verunstalten.
Also jetzt, wenn Sie den Befehl ausführen grunzen Ohne etwas danach erstellt es Ihr gesamtes Projekt, einschließlich Ihres JavaScript.
Als Nächstes werden wir den soeben erlernten Vorgang wiederholen, indem wir Gulp verwenden, um unsere Aufgabe anstelle von Grunt auszuführen.
