Verwendung von Grunt zur Automatisierung Ihres Workflows [Tutorials]

Ich bin ein großer Befürworter der Automatisierung weil es das Leben so viel einfacher macht. Warum sollten Sie sich mit niederträchtigen, monotonen Aufgaben beschäftigen, die Ihre Lebenskraft direkt ausnutzen, wenn Sie einen Computer haben, der Dinge für Sie erledigt? Dies gilt insbesondere für die Webentwicklung.

Viele Entwicklungsaufgaben können mühsam sein. Während der Entwicklung möchten Sie möglicherweise Code kompilieren. Wenn Sie eine Entwicklungsversion pushen, können Sie Dateien verketten und minimieren, nur Entwicklungsressourcen entfernen und so weiter. Auch relativ unkomplizierte Dateien wie das Löschen mehrerer Dateien oder das Umbenennen von Ordnern kann einen großen Teil unserer Zeit in Anspruch nehmen.

In diesem Artikel zeige ich Ihnen, wie Sie Ihr Leben einfacher machen können, indem Sie die hervorragende Funktionalität von Grunt, einem Javascript-Läufer, nutzen. Ich werde Sie durch den gesamten Prozess führen, also keine Sorge, auch wenn Sie kein Javascript-Assistent sind!

Mehr auf Hongkiat.com:

• CSSMatic macht CSS für Webdesigner einfach
• Automatisieren von Aufgaben auf dem Mac mit Ordneraktionen
• Automatisieren Sie Ihre Dropbox-Dateien mit Aktionen
• 10 Apps zur Automatisierung von Aufgaben auf Ihrem Android-Gerät
• So sichern Sie Ihre Website (automatisch) in Dropbox

Grunt installieren

Die Installation von Grunt ist ziemlich einfach, da der Knotenpaket-Manager verwendet wird. Das bedeutet, dass Sie möglicherweise auch Node selbst installieren müssen. Öffnen Sie ein Terminal oder eine Eingabeaufforderung (Ich rufe das Terminal von nun an an) und geben Sie ein nmp -v.

Wenn Sie eine Versionsnummer sehen, haben Sie npm Wenn der Fehler "Befehl nicht gefunden" angezeigt wird, müssen Sie ihn installieren, indem Sie die Seite mit den Knotendownloads aufrufen und die gewünschte Version auswählen.

Sobald Node installiert ist, ist das Abrufen von Grunt ein einzelner Befehl, der im Terminal ausgegeben wird:

npm install -g grunt-cli

Grundlegende Verwendung

Sie verwenden Grunt auf Projektbasis, da jedes Projekt andere Anforderungen hat. Starten Sie jetzt ein Projekt, indem Sie einen Ordner erstellen und auch über unser Terminal zu ihm navigieren.

Zwei Dateien bilden das Herz von Grunt: package.json und Gruntfile.js. Die Paketdatei definiert alle Abhängigkeiten von Drittanbietern, die von Ihrer Automatisierung verwendet werden. Mit der Grunt-Datei können Sie steuern Wie genau diese werden verwendet. Lassen Sie uns jetzt eine Bare-Bones-Paketdatei mit folgendem Inhalt erstellen:

"name": "test-project", "version": "1.0", "devDependencies": "grunt": "~ 0.4.5",

Der Name und die Version liegt bei Ihnen, die Abhängigkeiten müssen alle Pakete enthalten, die Sie verwenden. Wir machen im Moment nichts, also sorgen wir nur dafür, dass Grunt selbst als Abhängigkeit hinzugefügt wird.

Sie fragen sich vielleicht, was die verschnörkelte Linie (~) Tilde dort macht.

Mit den Regeln aus dem semantic versioner für npm können Versionen benötigt werden. In einer Nussschale:

• Sie geben eine genaue Version an wie 4.5.2
• Sie können größer als / kleiner als verwenden, um die minimale oder maximale Version anzugeben, z > 4.0.3
• Mit der Tilde wird ein Versionsblock angegeben. Verwenden ~ 1,2 gilt als zu sein 1.2.x, jede Version über 1.2.0 aber unter 1.3

Es gibt viel mehr Möglichkeiten, Versionen anzugeben, aber dies reicht für die meisten Anforderungen aus. Der nächste Schritt ist das Erstellen einer Gruntdatei, die unsere Automatisierungen ausführt.

 module.exports = function (grunt) grunt.initConfig (pkg: grunt.file.readJSON ('package.json')); grunt.registerTask ('default', []); ; 

Dies ist im Grunde das Skelett für eine Gruntdatei. Es gibt zwei Sehenswürdigkeiten. Ein Ort ist in der initConfig () Funktion. Hier erfolgt Ihre gesamte Projektkonfiguration. Dies umfasst Dinge wie das LESS / SASS-Kompilieren, das Reduzieren von Skripts usw..

Der zweite Speicherort befindet sich unterhalb der Funktion, in der Sie Aufgaben angeben. Sie können eine angegebene Aufgabe mit dem Namen sehen “Standard”. Im Moment ist es leer, also tut es nichts, aber wir werden das später noch erweitern. Im Wesentlichen stellen Aufgaben Aufgaben und Teile aus unserer Projektkonfiguration in die Warteschlange und führen sie aus.

Zum Beispiel eine Aufgabe mit dem Namen “Skripte” kann alle unsere Skripts verketten, dann die resultierende Datei verkleinern und sie an ihren endgültigen Speicherort verschieben. Diese drei Aktionen sind alle in der Projektkonfiguration definiert, jedoch “zusammengezogen” von der Aufgabe. Wenn dies noch nicht klar ist, machen Sie sich keine Sorgen, ich werde Ihnen zeigen, wie das gemacht wird.

Unsere erste Aufgabe

Lassen Sie uns eine Aufgabe erstellen, die eine einzige Javascript-Datei für uns minimiert.

Es gibt vier Dinge, die wir tun müssen, wenn wir eine neue Aufgabe hinzufügen möchten:

• Installieren Sie ggf. ein Plugin
• Fordern Sie es in der Gruntfile an
• Schreibe eine Aufgabe
• Fügen Sie es einer Aufgabengruppe hinzu, falls erforderlich

(1) Plugin suchen und installieren

Der einfachste Weg, das benötigte Plugin zu finden, besteht darin, etwas in Google einzugeben: “Javascript-Grunt-Plugin minimieren”. Das erste Ergebnis sollte Sie zum grunt-contrib-uglify-Plugin führen, das genau das ist, was wir brauchen.

Auf der Github-Seite finden Sie alles, was Sie wissen müssen. Die Installation erfolgt in einer einzigen Zeile im Terminal. Hier müssen Sie Folgendes verwenden:

 npm install grunt-contrib-uglify --save-dev 

Möglicherweise müssen Sie dies mit Administratorrechten ausführen. Wenn du sowas bekommst npm ERR! Bitte führen Sie diesen Befehl erneut als root / Administrator aus. Geben Sie einfach sudo vor dem Befehl ein und geben Sie Ihr Passwort ein, wenn Sie dazu aufgefordert werden:

 sudo npm install grunt-contrib-uglify --save-dev 

Dieser Befehl analysiert tatsächlich Ihre package.json Datei und fügt sie dort als Abhängigkeit hinzu, Sie müssen dies nicht manuell tun.

(2) In Gruntfile erforderlich

Der nächste Schritt ist das Hinzufügen Ihrer Gruntdatei als Anforderung. Ich füge gerne Plugins am Anfang der Datei hinzu, hier ist meine komplette Gruntfile nach dem Hinzufügen grunt.loadNpmTasks ('grunt-contrib-uglify');.

 module.exports = function (grunt) grunt.loadNpmTasks ('grunt-contrib-uglify'); grunt.initConfig (pkg: grunt.file.readJSON ('package.json')); grunt.registerTask ('default', []); ; 

(3) Erstellen Sie eine Aufgabe zum Minimieren von Skripts

Wie bereits erwähnt, sollte dies im Rahmen der initConfig () Funktion. Auf der Github-Seite für das Plugin (und die meisten anderen Plugins) finden Sie zahlreiche Informationen und Beispiele. Folgendes habe ich in meinem Testprojekt verwendet.

 uglify: build: src: 'js / scripts.js', dest: 'js / scripts.min.js' 

Das ist ziemlich einfach, ich habe das spezifiziert scripts.js Datei im js-Verzeichnis meines Projekts und das Ziel für die minimierte Datei. Es gibt viele Möglichkeiten, Quelldateien anzugeben. Wir werden uns das später ansehen.

Schauen wir uns erst einmal die komplette Gruntfile an, nachdem diese hinzugefügt wurde, um sicherzustellen, dass Sie wissen, wie die Dinge zusammenpassen.

 module.exports = function (grunt) grunt.loadNpmTasks ('grunt-contrib-uglify'); grunt.initConfig (pkg: grunt.file.readJSON ('package.json'), uglify: build: src: 'scripts.js', dest: 'scripts.min.js'); grunt.registerTask ('default', []); ; 

(4) Fügen Sie diese Konfiguration einer Aufgabengruppe hinzu

Jetzt können Sie zu Ihrem Terminal gehen und eingeben grunzen Aber wir brauchen Aufgabengruppen, um später mehrere Aufgaben auszuführen. Wir haben die Standardaufgabe leer und warten nur darauf, dass etwas hinzugefügt wird. Ändern wir sie also wie folgt:

 grunt.registerTask ('default', ['uglify']); 

In diesem Stadium sollten Sie in der Lage sein, zum Terminal zu gehen grunzen und sehen, wie die Minifizierung stattfindet. Vergiss nicht, eine scripts.js Datei natürlich!

Das hat nicht lange gedauert, um es einzurichten, oder? Selbst wenn Sie das alles noch nicht kennen und es einige Zeit gedauert hat, um die einzelnen Schritte durchzuarbeiten, wird die Zeitersparnis die Zeit, die Sie damit verbringen, bei wenigen Anwendungen übersteigen.

Verketten von Dateien

Schauen wir uns die Verkettung von Dateien und an Erfahren Sie, wie Sie mehrere Dateien als Ziel angeben nach dem Weg.

Verkettung ist der Vorgang, bei dem der Inhalt mehrerer Dateien in einer einzigen Datei zusammengefasst wird. Wir benötigen das Plugin Grunt-Contrib-Concat. Lassen Sie uns die Schritte durchgehen:

Um das Plugin zu installieren, verwenden Sie npm install grunt-contrib-concat --save-dev im Terminal. Wenn Sie fertig sind, fügen Sie es wie gewohnt Ihrer Gruntfile hinzu grunt.loadNpmTasks ('grunt-contrib-concat');.

Als nächstes ist die Konfiguration. Lassen Sie uns drei spezifische Dateien kombinieren, die Syntax ist vertraut.

 concat: dist: src: ['dev / js / header.js', 'dev / js / myplugin.js', 'dev / js / footer.js'], dest: 'js / scripts.js', ,, 

Der obige Code nimmt die drei angegebenen Dateien als Quelle und fügt sie in der als Ziel angegebenen Datei zusammen.

Das ist schon ziemlich mächtig, aber was ist, wenn eine neue Datei hinzugefügt wird? Müssen wir immer wieder hierher kommen? Natürlich nicht, wir können einen ganzen Ordner mit Dateien angeben, die verkettet werden sollen.

 concat: dist: src: 'dev / js / *. js "], dest:' js / scripts.js ',,, 

Nun wird jede Javascript-Datei im Ordner dev / js zu einer großen Datei zusammengefügt: js / scripts.js, viel besser!

Jetzt ist es an der Zeit, eine Aufgabe zu erstellen, damit wir einige Dateien tatsächlich verketten können.

 grunt.registerTask ('mergejs', ['concat'])); 

Dies ist nicht mehr die Standardaufgabe, daher müssen wir ihren Namen in das Terminal eingeben, wenn wir das ausgeben grunzen Befehl.

 grunzen Mergejs 

Automatisierung unserer Automatisierung

Wir haben bereits große Fortschritte gemacht, aber es gibt noch mehr! Wenn Sie jetzt verketten oder minimieren möchten, müssen Sie zum Terminal gehen und den entsprechenden Befehl eingeben. Es ist höchste Zeit, uns das anzusehen sehen Befehl, der dies für uns tun wird. Wir lernen auch, wie Sie mehrere Aufgaben gleichzeitig erledigen können.

Um loszulegen, müssen wir Grunt-Contrib-Watch nehmen. Ich bin sicher, dass Sie es jetzt selbst installieren und in die Gruntfile einfügen können. Ich zeige Ihnen zunächst, was ich in meinem Testprojekt verwende.

 watch: scripts: files: ['dev / js / *. js'], Aufgaben: ['concat', 'uglify'],, 

Ich habe eine Reihe von Dateien zum Ansehen benannt “Skripte”, Ich weiß nur, was es tut. In diesem Objekt habe ich Dateien zum Überwachen und Ausführen von Aufgaben angegeben. Im vorherigen Verkettungsbeispiel haben wir alle Dateien im Verzeichnis dev / js zusammengestellt.

Im Minification-Beispiel haben wir diese Datei minimiert. Es ist sinnvoll, den Ordner dev / js auf Änderungen zu überprüfen und diese Aufgaben immer auszuführen.

Wie Sie sehen, können mehrere Aufgaben leicht aufgerufen werden, indem Sie sie durch Kommas voneinander trennen. Sie werden nacheinander ausgeführt, zuerst die Verkettung, dann die Minifizierung in diesem Fall. Dies kann auch mit Aufgabengruppen durchgeführt werden, weshalb es sie gibt.

Wir können jetzt unsere Standardaufgabe ändern:

 grunt.registerTask ('default', ['concat', 'uglify']); 

Jetzt haben wir zwei Möglichkeiten. Wenn Sie Ihre Skripts verketten und minimieren möchten, können Sie zum Terminal wechseln und den Typ eingeben grunzen. Sie können den Befehl watch auch verwenden, um das Überwachen Ihrer Dateien zu initiieren: grunzen beobachten.

Es wird dort sitzen und darauf warten, dass Sie diese Dateien ändern. Sobald Sie dies getan haben, führt es alle ihm zugewiesenen Aufgaben aus, probieren Sie es aus.

Das ist viel besser, wir brauchen keine Eingaben. Sie können jetzt mit Ihren Dateien arbeiten und alles wird für Sie erledigt.

Überblick

Mit diesem rudimentären Wissen darüber, wie Plugins installiert und verwendet werden können und wie der Befehl watch funktioniert, werden Sie alle selbst zum Automatisierungssüchtigen. Es gibt viel mehr als nur das, was wir besprochen haben, aber nichts, mit dem Sie alleine nicht fertig werden könnten.

Die Verwendung von Befehlen zum Kompilieren von SASS, zum Optimieren von Bildern, zur automatischen Vorbeugung von Fehlern und mehr ist nur eine Frage der Schritte, die wir besprochen haben, und das Lesen der Syntax, die das Plugin benötigt.

Wenn Sie einige besonders gute Anwendungen für Grunt kennen, teilen Sie uns dies bitte in den Kommentaren mit. Wir sind immer daran interessiert, wie Sie Tools wie Grunt verwenden!