6 wichtige Grunt-Plugins, die Sie verwenden sollten

Boden

Geben Sie Ihrem Grunzen mehr Grunzen mit diesen großartigen Plugins

JavaScript-Task-Läufer wie Boden sind bei Front-End-Entwicklern sehr beliebt geworden. 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. Verunstalten

Jeder Front-End-Entwickler, der sein Geld wert ist, kennt die Vorteile der Minimierung von JavaScript-Dateien, und genau das macht dieses Plugin. So beliebt ist es, es ist tatsächlich in der enthalten Grunzen Erste Schritte . 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 Wir haben 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 du auf solche Sachen stehst.

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 zur Reduzierung der Ladezeiten von Seiten.

Die Dateikettung sollte in der Produktion immer sowohl für JavaScript als auch für CSS verwendet werden. Dies ist normalerweise die letzte auszuführende Aufgabe - 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. Sehen

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 sogar 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!