Fünf Grunzaufgaben, die Sie nicht verpassen wollen!

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

</p> 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: </p>

• 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 </p> können Sie Zielbrowser und -versionen angeben und sicherstellen, dass nur erforderliche Präfixe enthalten sind.

</p> Eine Beispielkonfiguration:

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'
    }
  }
});

main.css Diese Konfiguration verarbeitet main-prefixed.css, die die vorangestellte Version an </p> 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 </p>, 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 </p> (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.

</p>

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

Grundlegende Konfiguration: </p>

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'
    }
  }
});

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

grunt-modernizr 4.

: Modernizr

optimieren grunt-modernizr modernizr hilft bei der Erkennung von Browserunterstützung für moderne Merkmale. </p> erstellt einen maßgeschneiderten Modernizr -Build, einschließlich nur der Funktionen, die Ihr Projekt verwendet, was zu einer kleineren, effizienteren Bibliothek führt.

</p> Beispielkonfiguration:

grunt.initConfig({
  wiredep: {
    app: {
      src: ['index.html']
    }
  }
});

grunt-concurrent 5.

: Parallele Verarbeitung für Geschwindigkeit

grunt-concurrent Für Projekte mit vielen Aufgaben führt </p> sie gleichzeitig aus und beschleunigt den Build -Prozess, insbesondere bei leistungsstarken Maschinen, erheblich.

</p> Beispiel:

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']
      }
    }
  }
});

copy Dies wird gleichzeitig autoprefixer und test gleichzeitig unter der Aufgabe concat und uncss und build ausgeführt. </p> 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.

</p>

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!