Gulp - Nützliche Plugins

Gulp bietet einige nützliche Plugins für die Arbeit mit HTML & CSS, JavaScript, Grafiken und einigen anderen Dingen, wie in den folgenden Tabellen beschrieben.

HTML & CSS Plugins

Sr.Nr. Plugin & Beschreibung
1 autoprefixer

Es enthält automatisch Präfixe für CSS-Eigenschaften.

2 gulp-browser-sync

Es wird verwendet, um alle HTML- und CSS-Dateien im CSS-Verzeichnis zu überwachen und das Live-Neuladen auf die Seite in allen Browsern durchzuführen, wenn Dateien geändert werden

3 gulp-useref

Es wird verwendet, um Verweise auf nicht optimierte Skripte oder Stylesheets zu ersetzen.

4 gulp-email-design

Es werden HTML-E-Mail-Vorlagen erstellt, die CSS-Stile in Inline konvertieren.

5 gulp-uncss

Es optimiert CSS-Dateien und findet nicht verwendete und duplizierte Stile.

6 gulp-csso

Es ist ein CSS-Optimierer, der CSS-Dateien minimiert, was zu einer kleineren Dateigröße führt.

7 gulp-htmlmin

Es minimiert HTML-Dateien.

8 gulp-csscomb

Es wird verwendet, um einen Formatierer für CSS zu erstellen.

9 gulp-csslint

Es gibt einen CSS-Linter an.

10 gulp-htmlhint

Es gibt einen HTML-Validator an.

JavaScript-Plugins

Sr.Nr. Plugin & Beschreibung
1 gulp-autopolyfiller

Es ist dasselbe wie der Autoprefixer, der die erforderlichen Polyfüllungen für JavaScript enthält.

2 gulp-jsfmt

Es wird zum Suchen bestimmter Codefragmente verwendet.

3 gulp-jscs

Es wird verwendet, um den JavaScript-Codestil zu überprüfen.

4 gulp-modernizr

Es gibt an, welche HTML-, CSS- und JavaScript-Funktionen der Browser des Benutzers bietet.

5 gulp-express

Es startet den Webserver von gulp express.js.

6 gulp-requirejs

Es verwendet require.js, um die AMD-Module von require.js in einer Datei zu kombinieren.

7 gulp-plato

Es werden Komplexitätsanalyseberichte erstellt.

8 gulp-complexity

Es analysiert die Komplexität und Wartbarkeit von Code.

9 fixmyjs

Es korrigiert JSHint-Ergebnisse.

10 gulp-jscpd

Es wird als Copy / Paste-Detektor für den Quellcode verwendet.

11 gulp-jsonlint

Es ist JSON-Validator.

12 gulp-uglify

Es minimiert die JavaScript-Dateien.

13 gulp-concat

Es verkettet die CSS-Dateien.

Unit Tests Plugins

Sr.Nr. Plugin & Beschreibung
1 gulp-nodeunit

Es führt Node Unit Tests von Gulp aus.

2 gulp-jasmine

Es wird verwendet, um die Probleme im Zusammenhang mit der Ausgabe zu melden.

3 gulp-qunit

Es bietet eine grundlegende Konsolenausgabe für QUnit-Tests und verwendet das PhantomJS-Knotenmodul und das PhantomJS-Runner-QUnit-Plugin.

4 gulp-mocha

Es gibt die dünne Hülle um Mokka an und führt die Mokka-Tests aus.

5 gulp-karma

Es wurde in Gulp veraltet.

Grafik-Plugins

Sr.Nr. Plugin & Beschreibung
1 gulpicon

Es generiert Sprites aus SVG und konvertiert sie in PNG.

2 gulp-iconfont

Es wird mit Web-Schriftarten verwendet, um WOFF-, EOT- und TTF-Dateien aus SVG zu erstellen.

3 gulp-imacss

Es wandelt Bilddateien in Daten-URIs um und platziert sie in einer einzelnen CSS-Datei.

4 gulp-responsive

Es generiert reaktionsschnelle Bilder für verschiedene Geräte

5 gulp-sharp

Es wird verwendet, um die Ausrichtung und den Hintergrund des Bildes zu ändern und seine Größe zu ändern.

6 gulp-svgstore

Es kombiniert SVG-Dateien zu einer mit <symbol> -Elementen.

7 gulp-imagemin & gulp-tinypng

Es wird zum Komprimieren von Bildern wie PNG, JPEG, GIF, SVG verwendet.

8 gulp-spritesmith

Es wird zum Erstellen eines Spritesheets aus einer Reihe von Bildern und CSS-Variablen verwendet.

Compiler-Plugins

Sr.Nr. Plugin & Beschreibung
1 gulp-less

Es bietet WENIGER Plugin für Gulp.

2 gulp-sass

Es bietet SASS-Plugin für Gulp.

3 gulp-compass

Es bietet Kompass-Plugin für Gulp.

4 gulp-stylus

Es wird verwendet, um den Stift in CSS zu halten.

5 gulp-coffee

Es bietet Coffeescript Plugin für Gulp.

6 gulp-handlebars

Es bietet Lenker-Plugin für Gulp.

7 gulp-jst

Es bietet Unterstrichvorlagen in JST.

8 gulp-react

Es gibt Facebook React JSX-Vorlagen in JavaScript an.

9 gulp-nunjucks

Es gibt Nunjucks-Vorlagen in JST an.

10 gulp-dustjs

Es gibt Staubvorlagen in JST an.

11 gulp-angular-templatecache

Es gibt AngularJS-Vorlagen im templateCache an.

Andere Plugins

Das gulp-clean-Plugin entfernt Dateien und Ordner und das gulp-copy-Plugin kopiert die Dateien von der Quelle zum neuen Ziel.

Sr.Nr. Plugin & Beschreibung
1 gulp-grunt

Es führt die Grunt-Aufgaben von Gulp aus

2 gulp-watch

Es überwacht die Dateien, wenn Änderungen vorgenommen werden.

3 gulp-notify

Es benachrichtigt die Fehlermeldung, wenn eine Aufgabe fehlschlägt.

4 gulp-git

Es erlaubt die Verwendung von Git-Befehlen.

5 gulp-jsdoc

Es wird eine JavaScript-Dokumentation für Gulp erstellt.

6 gulp-rev

Es bietet eine statische Asset-Revision für Dateinamen.

7 gulp-bump

Es erhöht die Versionen im JSON-Paket.

8 gulp-bower-files

Es wird verwendet, um Laubenpakete einzuspritzen.

9 gulp-removelogs

Es entfernt die Anweisungen console.log.

10 gulp-preprocess

Es verarbeitet HTML, JavaScript und andere Dateien basierend auf der Kontext- oder Umgebungskonfiguration vor.

11 gulp-duration

Es gibt die Dauer für Gulp-Aufgaben an.

12 gulp-changed & gulp-newer

Es werden die geänderten und neueren Dateien ausgeführt.

13 gulp-connect

Es wird verwendet, um einen Webserver mit LiveReload auszuführen.

14 gulp-shell

Es werden Shell-Befehle ausgeführt.

15 gulp-ssh

Die Verbindung wird mithilfe von SSH- und SFTP-Tasks hergestellt.

16 gulp-zip

Es komprimiert die Dateien und Ordner.

17 gulp-clean & gulp-copy
18 gulp-filesize

Es gibt die Dateigröße im lesbaren Format an.

19 gulp-util

Es bietet Dienstprogramme für Gulp-Plugins.