Inhalt
JavaScript-Task-Runner wie Grunt sind bei Front-End-Entwicklern sehr beliebt. Dies liegt daran, dass sie dazu beitragen, das zu tun, was wir alle in unserer Arbeit tun möchten - Zeit sparen!
Mit mehr als 5.000 (und zählenden) Grunt-Plugins, die jetzt verfügbar sind, kann es für Entwickler schwierig sein, diese "Rohdiamanten" zu finden. Wir haben einen Blick zurück auf unsere Zeit geworfen, als wir in Grunt stecken geblieben sind, um das perfekte Rezept für Grunt-Plugins zu finden, das Sie verwenden sollten.
01. Uglify
Jeder Front-End-Entwickler, der sein Geld wert ist, kennt die Vorteile der Minimierung von JavaScript-Dateien, und genau das macht dieses Plugin. Aufgrund seiner Beliebtheit ist es tatsächlich im Grunt Getting Started Guide enthalten. Trotz des Namens kann dieses Plugin auch verwendet werden, um Ihren JavaScript-Code zu verschönern - obwohl dies für die Verwendung in der Produktion nicht besonders nützlich ist.
02. Sass
Es mag einige Debatten darüber geben, welcher CSS-Vorprozessor wirklich das Quartier regiert, aber hier bei Stickyeyes haben wir uns eher für Sass als für seinen Hauptkonkurrenten Less entschieden. Mit diesem Plug-In können wir unsere Sass-Dateien schreiben und sie automatisch in CSS kompilieren lassen. Die Vorteile der Verwendung eines CSS-Vorprozessors rechtfertigen einen separaten Artikel an sich, aber Sie können mit Sicherheit sagen, dass Sie sehr spät zur Party kommen, wenn Sie noch keinen verwenden!
03. CSSMin
Dieses Plugin ist das CSS-Äquivalent von Uglify. Es werden einfach alle angegebenen CSS-Dateien abgerufen und minimiert. Wenn Sie dies in Verbindung mit dem Sass-Plugin verwenden möchten, müssen Sie natürlich sicherstellen, dass diese Aufgabe nach der Sass-Aufgabe ausgeführt wird.
Es gibt viele Alternativen zu CSSMin, mit denen Sie auch die Größe Ihrer CSS-Dateien mithilfe leicht unterschiedlicher Techniken reduzieren können. CSS Nano, CSS Wring, CSS Shrink usw. Lesen Sie diesen praktischen Benchmark, wenn Sie sich für solche Dinge interessieren.
04. Concat
Wie der Name schon sagt, nimmt dieses Plugin einfach mehrere Dateien und verkettet sie zu einer. Wie beim Minimieren von Code ist auch das Verketten von Dateien eine uralte bewährte Methode, um die Ladezeiten von Seiten zu verkürzen.
Die Dateikettung sollte in der Produktion immer sowohl für JavaScript als auch für CSS verwendet werden. Dies ist normalerweise die letzte Aufgabe, die ausgeführt wird - nach der CSS-Vorverarbeitungsaufgabe und der Minimierungsaufgabe. Es ist einfach, dieses Plugin anzuweisen, alle Dateien in einem bestimmten Verzeichnis zu verketten. Achten Sie jedoch auf die Reihenfolge, in der die Dateien verkettet werden. Möglicherweise müssen Sie eine bestimmte Reihenfolge angeben oder die Dateien benennen, damit sie immer in der gewünschten Reihenfolge verkettet werden .
05. ImageMin
Ähnlich wie CSSMin und Uglify geht ImageMin ein weiteres uraltes Problem beim Laden von Seiten an - die Größe von Bilddateien. Die Bildminimierung ist normalerweise eine erste Anlaufstelle für die Optimierung. Daher ist dieses Plugin unerlässlich, um die Gesamtgröße der Auslagerungsdatei so weit wie möglich zu reduzieren.
Wenn Sie mit JPG, PNG, GIF oder SVG (einem immer beliebter werdenden Vektorbildformat) arbeiten, führt dieses Plugin zu einer verlustfreien Reduzierung der Dateigröße Ihrer Bilder, ohne dass Sie einen Finger rühren müssen. Wenn Sie viele Bilder in Ihrem Projekt haben, ist es eine gute Idee, diese Aufgabe nur auszuführen, wenn Sie in die Produktion gehen, anstatt diese Aufgabe bei einem Überwachungsereignis auszuführen (siehe nächster Punkt).
06. Beobachten
Dieses Plugin wirkt sich nicht auf das Front-End Ihrer Website aus, ist jedoch äußerst nützlich, um einen effizienten Grunt-Prozess zu erstellen. Watch behält einfach alle Verzeichnisse im Auge, die Sie angeben, und sobald sich etwas ändert, werden automatisch bestimmte Grunt-Aufgaben ausgelöst.
Sie können also eine Überwachungsbedingung in Ihrem "js" -Verzeichnis einrichten, um Ihre JavaScript-Aufgaben auszuführen, und eine andere in Ihrem "css" -Verzeichnis, um Ihre CSS-Aufgaben auszuführen. Dies bedeutet, dass Sie Ihren Haupt-Grunt-Prozess niemals manuell ausführen müssen! Initialisieren Sie einfach die Grunzüberwachungsaufgabe, bevor Sie Änderungen vornehmen, und Sie können vergessen, dass sie auch dort vorhanden ist.
Wörter: Jamie Shields
Jamie Shields ist Back-End-Entwickler bei der Agentur für digitales Marketing Stickyeyes.
So was? Lesen Sie dies!
- Grunt vs Gulp: Welches JavaScript-Build-Tool sollten Sie wählen?
- 8 Möglichkeiten, um Ihr Grunt-Setup zu verbessern
- Die besten kostenlosen WordPress-Themes
