Grunzen Verwendung mit einer vorhandenen Wordpress-Instanz

Question

Ich versuche, herauszufinden, wie & js kombinieren minify/CSS-Code diese Situation gegeben:

• ich ein Thema gekauft, hätte es nicht
• Ich entwickle verwende mehrere Plugins. Sie sind nützlich, aber sie ausgegeben einige sehr hässliche Code (viele Inline-CSS & js, meist Code-Entwicklung mit voller Kommentare)

Ich bin ziemlich neu zu grunzen, habe ich es in der Vergangenheit mit benutzerdefinierten verwendet Web-Apps, aber nie mit WordPress, ich frage mich, ob es helfen kann, wenn Sie viele PHP-Skripte haben, die ihren hässlichen Code injizieren.

Also meine Frage ist: gibt es eine Möglichkeit, grunzen Arbeit mit WordPress zu machen, so dass Produktionscode im Fall oben serviert wird? Wenn das so ist, wie?

Answer 1

Sie entweder ein Plugin Ihr Vermögen oder manuell dequeue, dann sagen Grunzen verketten und minify sie verwenden können, um aus der Warteschlange entfernt.

Dieser Artikel können Sie, was Sie für http://css-tricks.com/taking-control-cssjs-wordpress-plugins-load/

Answer 2

Ich fürchte, es gibt keine Möglichkeit zu erreichen, was Sie suchen, ohne diese Plugins zu ändern.

Grunt ist nur ein JavaScript Task Runner - es hat keinen Sinn für eine Webanwendung, sei es WordPress oder etwas Brauchbares. Du gibst Grunt etwas Input, und du sagst ihm, was mit diesem Input zu tun ist, und es tut es. Um Grunt zum Minimieren und Verketten des gesamten JavaScript und CSS auf Ihrer Site zu verwenden, müssen Sie es daher aus den Plugins extrahieren und in eine geeignete Dateistruktur einfügen.

Im Allgemeinen, wenn ein Plugin darauf besteht, eine Reihe von JavaScript und/oder CSS zu inlinern, ist es kein sehr gutes Plugin. Zum Beispiel verwendet mein Team gulp.js (ähnlich wie Grunt) für viele WordPress-Frontend-Entwicklungen (Verkettung, Minification, Fingerprinting, automatische Präfixe usw.), und wir sind sehr genau, welche Plugins wir verwenden (Wenn überhaupt, ist einer der Gründe genau das, worum es bei Ihrer Frage geht.

Answer 3

Überprüfen Sie das FoundationPress-Kind-Thema, es verwendet Grunt und eine Handvoll anderer nützlicher Tools und Bibliotheken. Ich verwende es als Basis für eine WP-Site, die ich für einen meiner Kunden erstellt habe. Es ist ein guter Ausgangspunkt, zusammen mit VCCW.

https://github.com/thetrickster/FoundationPress-child

https://github.com/vccw-team/vccw

Answer 4

Ihren Plan suchen scheint ein wenig chaotisch. Nehmen wir im besten Fall an, dass Sie eine einfache Grunt-Aufgabe konfiguriert und verwendet haben, um all Ihre CSS- und JS-Funktionen zu minimieren, die Ihre Wordpress-Instanz verwendet.

Das bedeutet, dass Sie Ihren Code durchsuchen müssen, wo jedes Ihrer Plugins Styles oder Skripte abruft, schneidet sie ab und verkleinert sie mit Grunt. Danach sollten Sie die fertige Minified-Datei aufnehmen und erneut in Ihre Wordpress-Instanz einfügen.

Abgesehen von der Tatsache, dass Sie viele benutzerdefinierte Codierung tun müssen, wird die Aktualisierung Ihrer Plugins Ihnen viel Schmerz geben.

Um an einem skalierbaren und einfach zu verfolgenden Plan festzuhalten, empfehle ich die Verwendung von BWP minify plugin, die sich um Ihre Styles und Skripte kümmert, und CDN-Unterstützung bietet.

Sie können Grunt dann als Codequalitätsüberprüfungsmechanismus verwenden. Uncss ist ein großartiges Werkzeug, das Ihnen hilft, unbenutzte Stile zu finden. Grunt-usemin ist auch eine ausgezeichnete Lösung.

Endlich, wie ich sehe, dass Sie bereit sind, zu Befehlszeilen-Tools zu verschieben, würde ich sehr empfehlen, einen Blick auf WP-CLI es ist eine wunderbare Befehlszeile für Wordpress.

Answer 5

Wenn Sie bereit sind, die Zeit zu verbringen, die notwendig ist, um Ihre JS in Module zu trennen, dann könnte grunt-browserify auf lange Sicht gut für Sie arbeiten. Wie bereits erwähnt, müsste dazu der entsprechende Code aus den Plugin-Dateien extrahiert werden.

Für CSS-Minification wäre grunt-contrib-cssmin einen Blick wert. Ich mag auch grunt-text-replace zum Ändern der relativen Pfade in CSS vor dem Testen oder der Bereitstellung (was ärgerlich sein kann, wenn Sie nicht direkt zu Wordpress entwickeln).