Grunt für Leute, die Dinge wie Grunt seltsam und schwierig finden

Front-End-Entwickler werden oft angewiesen, bestimmte Dinge zu tun

• Arbeiten Sie in so kleinen Stücken von CSS und JavaScript, wie es für Sie sinnvoll ist, und fügen Sie sie dann für die Produktionswebsite zusammen.
• Komprimieren Sie Ihr CSS und minimieren Sie Ihr JavaScript, um die Dateigrößen für Ihre Produktionswebsite so klein wie möglich zu machen.
• Optimieren Sie Ihre Bilder, um ihre Dateigröße zu reduzieren, ohne die Qualität zu beeinträchtigen.
• Verwenden Sie Sass für die CSS-Erstellung aufgrund all der nützlichen Abstraktionen, die es ermöglicht.

Das ist natürlich keine umfassende Liste, aber das sind die Dinge, die wir tun müssen. Sie könnten sie als Aufgaben bezeichnen.

Ich wette, Sie haben von Grunt gehört. Nun, Grunt ist ein Task Runner. Grunt kann all diese Dinge für Sie tun. Sobald Sie es eingerichtet haben, was nicht besonders schwierig ist, können diese Dinge automatisch geschehen, ohne dass Sie jemals wieder darüber nachdenken müssen.

Aber seien wir ehrlich: Grunt ist eines dieser schicken neumodischen Dinge, die alle coolen Kids zu benutzen scheinen, aber auf den ersten Blick seltsam und einschüchternd wirken. Ich höre Sie. Dieser Artikel ist für Sie.

Lassen Sie uns gleich ein paar Missverständnisse aus dem Weg räumen

Vielleicht haben Sie von Grunt gehört, aber noch nichts damit gemacht. Ich bin sicher, das trifft auf viele von Ihnen zu. Vielleicht trifft einer der folgenden Haken auf Sie zu.

Ich brauche die Dinge, die Grunt tut, nicht

Tatsächlich tun Sie das wahrscheinlich schon. Schauen Sie sich die Liste oben an. Diese Dinge sind keine netten Extras. Sie sind heutzutage ziemlich wichtige Teile der Website-Entwicklung. Wenn Sie sie alle bereits erledigen, ist das großartig. Vielleicht verwenden Sie eine Vielzahl von verschiedenen Werkzeugen, um sie zu erreichen. Grunt kann helfen, sie unter einem Dach zu vereinen, sozusagen. Wenn Sie sie noch nicht alle erledigen, sollten Sie es wahrscheinlich tun, und Grunt kann helfen. Dann, sobald Sie diese Dinge tun, können Sie Grunt weiterhin nutzen, um mehr für Sie zu tun, was Sie im Grunde genommen besser in Ihrem Job macht.

Grunt läuft auf Node.js — ich kenne Node nicht

Das müssen Sie nicht. Genauso wenig wie Sie Ruby kennen müssen, um Sass zu verwenden. Oder PHP, um WordPress zu nutzen. Oder C++, um Microsoft Word zu verwenden.

Ich habe andere Wege, die Dinge zu tun, die Grunt für mich tun könnte

Sind sie alle an einem Ort organisiert, so konfiguriert, dass sie automatisch ausgeführt werden, wenn sie benötigt werden, und für jede einzelne Person, die an diesem Projekt arbeitet, freigegeben? Wohl kaum, würde ich vermuten.

Grunt ist ein Kommandozeilen-Tool — ich bin nur ein Designer

Ich bin auch Designer. Ich bevorzuge native Apps mit grafischen Benutzeroberflächen, wenn ich sie bekommen kann. Aber ich glaube nicht, dass das mit Grunt passieren wird¹.

Das Ausmaß, in dem Sie die Kommandozeile verwenden müssen, ist

1. Navigieren Sie in das Verzeichnis Ihres Projekts.
2. Geben Sie grunt ein und drücken Sie die Return-Taste.

Nach der Einrichtung, die, wie gesagt, nicht besonders schwierig ist.

OK. Lassen Sie uns Grunt installieren

Node ist tatsächlich eine Voraussetzung für Grunt. Wenn Sie Node nicht installiert haben, machen Sie sich keine Sorgen, es ist sehr einfach. Sie laden buchstäblich einen Installer herunter und führen ihn aus. Klicken Sie auf den großen Installieren-Button auf der Node-Website.

Sie installieren Grunt pro Projekt. Gehen Sie zu Ihrem Projektordner. Dort muss eine Datei namens package.json auf der obersten Ebene vorhanden sein. Sie können sie einfach erstellen und dort platzieren.

Der Inhalt dieser Datei sollte dieser sein

{
  "name": "example-project",
  "version": "0.1.0",
  "devDependencies": {
    "grunt": "~0.4.1"
  }
}

Sie können den Namen des Projekts und die Version gerne ändern, aber der Teil devDependencies muss genau so vorhanden sein.

So verwaltet Node Abhängigkeiten. Node hat einen Paketmanager namens npm zur Verwaltung von Node-Abhängigkeiten (wie ein "Gem" für Ruby, falls Sie damit vertraut sind). Sie könnten es sogar ein wenig wie ein Plugin für WordPress betrachten.

Sobald die Datei package.json vorhanden ist, öffnen Sie das Terminal und navigieren Sie zu Ihrem Ordner. Terminal-Nerds wie ich machen das so

Führen Sie dann den Befehl aus

npm install

Nachdem Sie diesen Befehl ausgeführt haben, erscheint ein neuer Ordner namens node_modules in Ihrem Projekt.

Die anderen Dateien, die Sie dort sehen, README.md und LICENSE, sind dort, weil ich dieses Projekt auf GitHub stellen werde und das dort einfach Standard ist.

Der letzte Installationsschritt ist die Installation der Grunt CLI (Command Line Interface). Das ist es, was den Befehl grunt im Terminal funktionsfähig macht. Ohne ihn erhalten Sie beim Eingeben von grunt eine Fehlermeldung vom Typ "Command Not Found". Es ist aus Effizienzgründen eine separate Installation. Andernfalls hätten Sie bei zehn Projekten zehn Kopien von Grunt CLI.

Das ist wieder eine Einzeiler. Führen Sie diesen Befehl einfach im Terminal aus

npm install -g grunt-cli

Sie sollten das Terminal auch schließen und wieder öffnen. Das ist eine generelle gute Praxis, um sicherzustellen, dass die Dinge richtig funktionieren. Ähnlich wie beim Neustart Ihres Computers nach der Installation einer neuen Anwendung in alten Zeiten.

Lassen Sie uns Grunt einige Dateien verketten lassen

Vielleicht gibt es in unserem Projekt drei separate JavaScript-Dateien

1. jquery.js – Die Bibliothek, die wir verwenden.
2. carousel.js – Ein jQuery-Plugin, das wir verwenden.
3. global.js – Unsere selbst geschriebene JavaScript-Datei, in der wir das Plugin konfigurieren und aufrufen.

In der Produktion würden wir all diese Dateien aus Leistungsgründen zusammenfügen (eine Anfrage ist besser als drei). Wir müssen Grunt anweisen, dies für uns zu tun.

Aber warten Sie. Grunt tut eigentlich gar nichts von allein. Denken Sie daran, Grunt ist ein Task Runner. Die Aufgaben selbst müssen wir hinzufügen. Wir haben Grunt noch nicht dazu eingerichtet, etwas zu tun, also tun wir das.

Das offizielle Grunt-Plugin für das Verketten von Dateien ist grunt-contrib-concat. Sie können es bei GitHub lesen, wenn Sie möchten, aber alles, was Sie tun müssen, um es in Ihrem Projekt zu verwenden, ist, diesen Befehl im Terminal auszuführen (es versteht sich von selbst, dass Sie die gegebenen Befehle vom Stammverzeichnis Ihres Projekts aus ausführen müssen)

npm install grunt-contrib-concat --save-dev

Eine nette Sache daran, es auf diese Weise zu tun: Ihre package.json-Datei wird automatisch aktualisiert, um diese neue Abhängigkeit einzuschließen. Öffnen Sie sie und sehen Sie nach. Sie werden eine neue Zeile sehen

"grunt-contrib-concat": "~0.3.0"

Jetzt sind wir bereit, es zu verwenden. Um es zu verwenden, müssen wir Grunt konfigurieren und ihm sagen, was er tun soll.

Sie sagen Grunt über eine Konfigurationsdatei namens Gruntfile.js², was er tun soll.

Genau wie unsere package.json-Datei hat unsere Gruntfile.js ein ganz besonderes Format, das genau richtig sein muss. Machen Sie sich keine Sorgen darüber, was jedes Wort davon bedeutet. Schauen Sie sich einfach das Format an

module.exports = function(grunt) {

    // 1. All configuration goes here 
    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),

        concat: {
            // 2. Configuration for concatinating files goes here.
        }

    });

    // 3. Where we tell Grunt we plan to use this plug-in.
    grunt.loadNpmTasks('grunt-contrib-concat');

    // 4. Where we tell Grunt what to do when we type "grunt" into the terminal.
    grunt.registerTask('default', ['concat']);

};

Nun müssen wir diese Konfiguration erstellen. Die Dokumentation kann überwältigend sein. Konzentrieren wir uns nur auf das sehr einfache Nutzungsbeispiel.

Denken Sie daran, wir haben drei JavaScript-Dateien, die wir verketten wollen. Wir listen die Dateipfade zu ihnen unter src in einem Array von Dateipfaden (als Anführungszeichen) auf und geben dann eine Zieldatei als dest an. Die Zieldatei muss noch nicht existieren. Sie wird erstellt, wenn diese Aufgabe ausgeführt wird und alle Dateien zusammengequetscht werden.

Sowohl unsere jquery.js als auch unsere carousel.js sind Bibliotheken. Wir werden sie höchstwahrscheinlich nicht anfassen. Also werden wir sie zur Organisation in einem Ordner /js/libs/ aufbewahren. Unsere Datei global.js ist dort, wo wir unseren eigenen Code schreiben, also wird sie direkt im Ordner /js/ liegen. Lassen Sie uns jetzt Grunt sagen, dass er all diese Dateien finden und zu einer einzigen Datei namens production.js zusammenfügen soll, die so genannt wird, um anzuzeigen, dass sie für unsere echte Live-Website bestimmt ist.

concat: {   
    dist: {
        src: [
            'js/libs/*.js', // All JS in the libs folder
            'js/global.js'  // This specific file
        ],
        dest: 'js/build/production.js',
    }
}

Hinweis: Während des gesamten Artikels gibt es kleine Code-Schnipsel zur Konfiguration wie oben. Die Absicht ist, sich auf die wichtigen Teile zu konzentrieren, aber es kann anfangs verwirrend sein, zu sehen, wie ein bestimmter Schnipsel in die größere Datei passt. Wenn Sie jemals verwirrt sind und mehr Kontext benötigen, verweisen Sie auf die vollständige Datei.

Mit dieser concat-Konfiguration im Platz, gehen Sie zum Terminal und führen Sie den Befehl aus

grunt

und beobachten Sie, wie es passiert! production.js wird erstellt und ist eine perfekte Verkettung unserer drei Dateien. Das war für mich ein großer Aha-Moment. Fühlen Sie die Kraft durch Ihre Adern fließen. Machen wir mehr Dinge!

Lassen Sie uns Grunt unser JavaScript minimieren lassen

Wir haben jetzt so viel Vorarbeit geleistet, dass das Hinzufügen neuer Aufgaben für Grunt relativ einfach ist. Wir müssen nur

1. Ein Grunt-Plugin finden, das tut, was wir wollen
2. Den Konfigurationsstil dieses Plugins lernen
3. Diese Konfiguration so schreiben, dass sie mit unserem Projekt funktioniert

Das offizielle Plugin zum Minimieren von Code ist grunt-contrib-uglify. Genau wie beim letzten Mal führen wir einfach einen NPM-Befehl aus, um es zu installieren

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

Dann ändern wir unsere Gruntfile.js, um das Plugin zu laden

grunt.loadNpmTasks('grunt-contrib-uglify');

Dann konfigurieren wir es

uglify: {
    build: {
        src: 'js/build/production.js',
        dest: 'js/build/production.min.js'
    }
}

Lassen Sie uns die default-Aufgabe aktualisieren, um auch die Minimierung durchzuführen

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

Super-ähnlich wie bei der Verkettungs-Einrichtung, richtig?

Führen Sie grunt im Terminal aus und Sie erhalten köstlich minimiertes JavaScript

Diese Datei production.min.js würden wir für die Verwendung in unserer index.html-Datei laden.

Lassen Sie uns Grunt unsere Bilder optimieren lassen

Das haben wir jetzt drauf. Lassen Sie uns einfach die Schritte durchgehen. Das offizielle Plugin zur Bildoptimierung für Grunt ist grunt-contrib-imagemin. Installieren Sie es

npm install grunt-contrib-imagemin --save-dev

Registrieren Sie es in der Gruntfile.js

grunt.loadNpmTasks('grunt-contrib-imagemin');

Konfigurieren Sie es

imagemin: {
    dynamic: {
        files: [{
            expand: true,
            cwd: 'images/',
            src: ['**/*.{png,jpg,gif}'],
            dest: 'images/build/'
        }]
    }
}

Stellen Sie sicher, dass es ausgeführt wird

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

Führen Sie grunt aus und beobachten Sie, wie diese wunderschöne Komprimierung geschieht

< /figure>

Man muss Leistungssteigerungen für fast null Aufwand lieben.

Lassen Sie uns ein bisschen schlauer werden und automatisieren

Was wir bisher getan haben, ist großartig und unglaublich nützlich. Aber es gibt ein paar Dinge, bei denen wir schlauer vorgehen und uns das Leben leichter machen können, ebenso wie Grunt

1. Führen Sie diese Aufgaben automatisch aus, wenn sie erforderlich sind
2. Führen Sie nur die benötigten Aufgaben zur richtigen Zeit aus

Zum Beispiel

1. JavaScript verkettungs- und minimieren, wenn sich JavaScript ändert
2. Bilder optimieren, wenn ein neues Bild hinzugefügt oder ein vorhandenes geändert wird

Das können wir tun, indem wir Dateien beobachten. Wir können Grunt sagen, dass er auf Änderungen an bestimmten Stellen achten soll, und wenn Änderungen in diesen Stellen auftreten, bestimmte Aufgaben ausführen soll. Das Beobachten erfolgt über das offizielle Plugin grunt-contrib-watch.

Ich überlasse Ihnen die Installation. Es ist genau derselbe Prozess wie bei den letzten Plugins, die wir installiert haben. Wir konfigurieren es, indem wir watch spezifische Dateien (oder Ordner oder beides) zuweisen, die es beobachten soll. Beobachten bedeutet, Änderungen, Löschungen oder Hinzufügungen von Dateien zu überwachen. Dann sagen wir ihm, welche Aufgaben wir ausführen wollen, wenn es eine Änderung erkennt.

Wir wollen unsere Verkettungs- und Minimierungsaufgaben ausführen, wenn sich etwas im /js/-Ordner ändert. Wenn dies geschieht, sollten wir die JavaScript-bezogenen Aufgaben ausführen. Und wenn woanders etwas passiert, sollten wir die JavaScript-bezogenen Aufgaben nicht ausführen, da dies irrelevant wäre. Also

watch: {
    scripts: {
        files: ['js/*.js'],
        tasks: ['concat', 'uglify'],
        options: {
            spawn: false,
        },
    } 
}

Fühlt sich an diesem Punkt ziemlich vertraut an, oder? Das Einzige, was dort seltsam ist, ist die Sache mit spawn. Und wissen Sie was? Ich weiß nicht einmal wirklich, was das tut. Soweit ich die Dokumentation verstehe, ist es der intelligente Standard. Das ist reale Entwicklung. Lassen Sie es einfach in Ruhe, wenn es funktioniert, und wenn nicht, lernen Sie mehr.

Hinweis: Ist es nicht frustrierend, wenn etwas, das in einem Tutorial so einfach aussieht, für Sie nicht zu funktionieren scheint? Wenn Grunt nach einer Änderung nicht ausgeführt werden kann, handelt es sich höchstwahrscheinlich um einen Syntaxfehler in Ihrer Gruntfile.js. Das könnte im Terminal so aussehen

Normalerweise ist Grunt ziemlich gut darin, Ihnen mitzuteilen, was passiert ist. Lesen Sie also unbedingt die Fehlermeldung. In diesem Fall hat mich ein Syntaxfehler in Form eines fehlenden Kommas behindert. Das Hinzufügen des Kommas ermöglichte die Ausführung.

Lassen Sie uns Grunt unsere Vorverarbeitung durchführen lassen

Das Letzte auf unserer Liste vom Anfang des Artikels ist die Verwendung von Sass – eine weitere Aufgabe, die Grunt gut für uns erledigen kann. Aber warten Sie? Ist Sass nicht technisch in Ruby? In der Tat ist es das. Es gibt eine Version von Sass, die in Node läuft und somit keine zusätzliche Abhängigkeit zu unserem Projekt hinzufügt, aber sie ist nicht ganz auf dem neuesten Stand mit dem Haupt-Ruby-Projekt. Wir werden also das offizielle Plugin grunt-contrib-sass verwenden, das einfach davon ausgeht, dass Sie Sass auf Ihrem Computer installiert haben. Wenn nicht, folgen Sie den Anweisungen zur Kommandozeile.

Das Tolle an Sass ist, dass es Verkettung und Minimierung ganz von allein kann. Für unser kleines Projekt können wir es also einfach unsere Hauptdatei global.scss kompilieren lassen

sass: {
    dist: {
        options: {
            style: 'compressed'
        },
        files: {
            'css/build/global.css': 'css/global.scss'
        }
    } 
}

Wir würden diese Aufgabe nicht manuell ausführen wollen. Wir haben das Watch-Plugin bereits installiert, also nutzen wir es! Innerhalb der watch-Konfiguration fügen wir eine weitere Unteraufgabe hinzu

css: {
    files: ['css/*.scss'],
    tasks: ['sass'],
    options: {
        spawn: false,
    }
}

Das wird es tun. Jetzt wird jedes Mal, wenn wir eine unserer Sass-Dateien ändern, das CSS automatisch aktualisiert.

Lassen Sie uns dies einen Schritt weiter gehen (es lohnt sich absolut) und LiveReload hinzufügen. Mit LiveReload müssen Sie nicht mehr zu Ihrem Browser zurückkehren und die Seite neu laden. Seiten-Neuladungen erfolgen automatisch und im Falle von CSS werden neue Stile ohne Seiten-Neuladung injiziert (praktisch für stark zustandsbasierte Websites).

Es ist sehr einfach einzurichten, da die LiveReload-Fähigkeit in das Watch-Plugin integriert ist. Wir müssen nur

1. Das Browser-Plugin installieren
2. Am Anfang der watch-Konfiguration hinzufügen

   . watch: {
       options: {
           livereload: true,
       },
       scripts: {   
       /* etc */

3. Starten Sie den Browser neu und klicken Sie auf das LiveReload-Symbol, um es zu aktivieren.
4. Ändern Sie etwas Sass und beobachten Sie, wie es die Seite automatisch verändert.

Lecker.

Bevorzugen Sie ein Video?

Wenn Sie zu denjenigen gehören, die gerne durch Zuschauen lernen, habe ich ein Screencast-Video als Begleitung zu diesem Artikel erstellt, das ich auf CSS-Tricks veröffentlicht habe: Erste Momente mit Grunt

Aufleveln

Wie Sie sich vorstellen können, gibt es eine Menge an Aufleveln, die Sie mit Ihrem Build-Prozess erreichen können. Es könnte in manchen Organisationen sicher ein Vollzeitjob sein.

Einige Hardcore-DevOps-Nerds mögen das hier simplistische Setup verspotten. Aber ich rate ihnen, langsamer zu machen. Selbst das, was wir bisher getan haben, ist von unschätzbarem Wert. Und vergessen Sie nicht, das alles ist kostenlos und Open-Source, was erstaunlich ist.

Sie können aufleveln, indem Sie weitere nützliche Aufgaben hinzufügen

• Ihr CSS durch Autoprefixer (A+ Würde ich empfehlen) anstatt von Preprocessor-Add-ons laufen lassen.
• JavaScript-Unit-Tests schreiben und ausführen (Beispiel: Jasmine).
• Ihre Image-Sprites und SVG-Icons automatisch erstellen (Beispiel: Grunticon).
• Einen Server starten, damit Sie auf Assets mit korrekten Dateipfaden verlinken und Dienste nutzen können, die eine echte URL wie TypeKit und ähnliches benötigen, sowie den Bedarf an anderen Werkzeugen, die dies tun, wie MAMP, beseitigen.
• Auf Code-Probleme prüfen mit HTML-Inspector, CSS Lint oder JS Hint.
• Neues CSS automatisch in den Browser injizieren lassen, wenn es sich jemals ändert.
• Unterstützung beim Committen oder Pushen in ein Versionskontrollsystem wie GitHub.
• Asset-Versionen hinzufügen (Cache Busting).
• Hilfe beim Deployment auf eine Staging- oder Produktionsumgebung (Beispiel: DPLOY).

Sie können aufleveln, indem Sie einfach mehr über Grunt selbst lernen

• Lesen Sie Grunt Boilerplate von Mark McDonnell.
• Lesen Sie Grunt Tips and Tricks von Nicolas Bevacqua.
• Organisieren Sie Ihre Gruntfile.js, indem Sie sie in kleinere Dateien aufteilen.
• Schauen Sie sich Gruntfiles.js von anderen Leuten und Projekten an.
• Erfahren Sie mehr über Grunt, indem Sie sich den Quellcode ansehen und seine API kennenlernen.

Lassen Sie uns teilen

Ich denke, eine gemeinsame Gruppenteilung wäre eine schöne Art, dies abzuschließen. Wenn Sie Grunt zum ersten Mal installieren (oder sich daran erinnern, dass Sie es getan haben), seien Sie besonders achtsam bei kleinen frustrierenden Dingen, die Sie erlebt haben, aber durchgearbeitet haben. Das sind die Dinge, die wir in den Kommentaren hier teilen sollten. So haben wir diesen sicheren Ort und diese nützliche Ressource, um diese verwirrenden Momente ohne Peinlichkeit zu bewältigen. Wir stecken alle gemeinsam in dieser Sache!

---

1. Vielleicht wird eines Tages jemand eine schöne Grunt-App für Ihr Betriebssystem Ihrer Wahl entwickeln. Aber ich bin mir nicht sicher, ob dieser Tag kommen wird. Die Konfiguration der Plugins ist der wichtige Teil der Verwendung von Grunt. Jedes Plugin ist ein wenig anders, je nachdem, was es tut. Das bedeutet eine einzigartig durchdachte Benutzeroberfläche für jedes einzelne Plugin, was unwahrscheinlich ist. Vielleicht ist ein anständiger Mittelweg dieses Grunt DevTools Chrome Add-on.↩
2. Gruntfile.js wird in der Dokumentation und in Beispielen oft als Gruntfile bezeichnet. Nennen Sie sie nicht buchstäblich Gruntfile – das wird nicht funktionieren.↩