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. |