Fünf Grunzaufgaben, die Sie nicht verpassen wollen!

optimieren Sie Ihren Frontend -Workflow mit fünf wesentlichen Grunzaufgaben

GrunT, ein beliebter Task -Läufer, vereinfacht sich die sich wiederholenden Frontend -Entwicklungsaufgaben erheblich. In diesem Artikel werden fünf leistungsstarke Grunzen -Plugins hervorgehoben, die die Effizienz und die Codequalität steigern. Während andere Aufgabenläufer wie Gulp (siehe "eine Einführung in Gulp.js" für Details existieren, bleibt das umfangreiche Plugin -Ökosystem von Grunt ein wertvolles Gut. Neu zu grunzen? Schauen Sie sich "Automatisieren Sie wiederkehrende Aufgaben mit Grunzen" oder den offiziellen Grunzenleitfaden.

Key Takeaways:

• grunt-autoprefixer :
automatisiert das Präfixen des Lieferanten in CSS und beseitigt den mühsamen manuellen Prozess des Hinzufügens von Präfixen für die Browserkompatibilität.
• grunt-uncss :
entfernt ungenutzte CSS, reduziert die Dateigröße und verbessert die Seitenladezeiten. Beachten Sie seine Einschränkungen: Es handelt sich nicht um dynamisch hinzugefügte Klassen über JavaScript oder Benutzerinteraktion.
• grunt-concurrent :
Fügt mehrere Grunzaufgaben gleichzeitig aus und verkürzt die Gesamtbauzeit drastisch, insbesondere für Multi-Core-Prozessoren.
• grunt-wiredep grunt-bower-install (früher ):
automatisiert die Einbeziehung von Bower -Komponenten in Ihr HTML, speichern Sie Zeit und Mühe bei der Verwaltung von Abhängigkeiten.
• grunt-modernizr :
generiert einen angepassten Modernizr -Build, einschließlich nur der in Ihrem Projekt verwendeten Funktionen, wobei die Größe der Bibliothek minimiert wird.

grunt-autoprefixer 1.

: Eroberer -Anbieter -Präfixe

grunt-autoprefixer CSS zum Schreiben von CSS beinhaltet häufig das Jonglieren experimenteller Eigenschaften und Anbieterpräfixe. browsers, basierend auf der Autoprefixer -Bibliothek, vereinfacht dies. Es analysiert Ihre CSS und fügt die erforderlichen Präfixe basierend auf der Datenbank mit der Verwendung von I Can hinzu. Mit der Option

können Sie Zielbrowser und -versionen angeben und sicherstellen, dass nur erforderliche Präfixe enthalten sind.

Eine Beispielkonfiguration:

<code class="language-javascript">grunt.initConfig({
  autoprefixer: {
    options: {
      browsers: ['last 2 versions', 'ie 8', 'ie 9', 'Opera 12.1']
    },
    dist: {
      src: 'src/css/main.css',
      dest: 'dest/css/main-prefixed.css'
    }
  }
});</code>

main.css Diese Konfiguration verarbeitet main-prefixed.css, die die vorangestellte Version an

ausgibt und auf die letzten beiden Versionen von Hauptbrowsern abzielt, plus IE 8, 9 und Opera 12.1.

grunt-uncss 2.

: Schlanke dein CSS

grunt-uncss

, angetrieben von UNCSS, entfernt ungenutzte CSS aus Ihrem Projekt. Dies ist von unschätzbarem Wert bei der Verwendung von CSS -Frameworks, da es die endgültige CSS -Dateigröße erheblich reduziert und zu schnelleren Downloads führt.

Einschränkungen: grunt-uncss ignore kann CSS -Klassen, die über JavaScript oder Benutzerinteraktion dynamisch hinzugefügt wurden, nicht erkennen. Verwenden Sie die Option

(Akzeptieren von buchstäblichen Klassennamen oder Regex -Mustern), um dies teilweise zu beheben. Komplexe Selektoren können auch Fehler verursachen; Isolieren Sie diese in separaten Stylesheets.

3. grunt-wiredep: Müheloser Abhängigkeitsmanagement

Bower (ein JavaScript/CSS -Abhängigkeitsmanager) erfordert eine manuelle Einbeziehung von Komponenten in Ihr HTML. grunt-wiredep automatisiert dies und injizieren Abhängigkeiten basierend auf Ihrer Konfiguration.

Grundlegende Konfiguration:

<code class="language-javascript">grunt.initConfig({
  autoprefixer: {
    options: {
      browsers: ['last 2 versions', 'ie 8', 'ie 9', 'Opera 12.1']
    },
    dist: {
      src: 'src/css/main.css',
      dest: 'dest/css/main-prefixed.css'
    }
  }
});</code>

Dies injiziert Abhängigkeiten in index.html. Nach dem Ausführen grunt-wiredep enthält Ihr HTML Zeilen wie:

.

grunt-modernizr 4.

: Modernizr

optimieren grunt-modernizr modernizr hilft bei der Erkennung von Browserunterstützung für moderne Merkmale.

erstellt einen maßgeschneiderten Modernizr -Build, einschließlich nur der Funktionen, die Ihr Projekt verwendet, was zu einer kleineren, effizienteren Bibliothek führt.

Beispielkonfiguration:

<code class="language-javascript">grunt.initConfig({
  wiredep: {
    app: {
      src: ['index.html']
    }
  }
});</code>

grunt-concurrent 5.

: Parallele Verarbeitung für Geschwindigkeit

grunt-concurrent Für Projekte mit vielen Aufgaben führt

sie gleichzeitig aus und beschleunigt den Build -Prozess, insbesondere bei leistungsstarken Maschinen, erheblich.

Beispiel:

<code class="language-javascript">grunt.initConfig({
  modernizr: {
    dist: {
      devFile: 'path/to/modernizr.js',
      outputFile: 'path/to/distribution-folder/custom-modernizr.js',
      files: {
        src: ['path/to/scripts/**/*.js', 'path/to/styles/**/*.css']
      }
    }
  }
});</code>

copy Dies wird gleichzeitig autoprefixer und test gleichzeitig unter der Aufgabe concat und uncss und build ausgeführt.

Diese Auswahl bietet eine solide Grundlage für die Verbesserung Ihres grunzbasierten Workflows. Entdecken Sie das riesige Grunz -Plugin -Ökosystem, um noch mehr Werkzeuge zu entdecken, um Ihren Entwicklungsprozess zu optimieren.

Das obige ist der detaillierte Inhalt vonFünf Grunzaufgaben, die Sie nicht verpassen wollen!. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!