J'essaie de comprendre comment minifier et combiner le code JS / CSS compte tenu de cette situation:
Je suis assez nouveau au grognement, je l'ai utilisé dans le passé avec des applications Web personnalisées, mais jamais avec WordPress, je me demande s'il peut vous aider lorsque vous avez beaucoup de scripts / branchement PHP qui injecte leur code laid.
Donc, ma question est la suivante: existe-t-il un moyen de faire du grognement avec WordPress afin que le code de production soit servi dans l'affaire ci-dessus? Si oui, comment?
5 Réponses :
J'ai bien peur qu'il n'y aient aucun moyen de réaliser ce que vous recherchez sans modifier ces plugins.
GRUNT est juste un coureur de tâche JavaScript - il n'a aucun sens d'une application Web, que ce soit WordPress ou quelque chose de personnalisé. Vous donnez des entrées grogneuses et vous dites quoi faire avec cette entrée, et cela le fait. Par conséquent, afin d'utiliser GRUNT pour minifier et concaténer tous les JavaScript et CSS sur votre site, vous devez l'extraire des plugins et placez-la dans une structure de fichier appropriée.
En règle générale, lorsqu'un plugin insiste sur l'inlinage d'une bouquet de JavaScript et / ou de CSS, ce n'est pas un très bon plugin. Par exemple, mon équipe utilise Gulp.js (semblable à GRunt) pour beaucoup de développement frontal WordPress (concaténation, minéculation, empreinte digitale, préfixes automatiques, etc.), etc., nous sommes très particuliers sur les plugins que nous utilisons ( Le cas échéant) - une des raisons pour lesquelles est exactement quelle est votre question.
Checkout Le thème de fondement-enfant, il utilise Grunt et une poignée d'autres outils et bibliothèques agréables. Je l'utilise comme base pour un site WP que j'ai fait pour un client à moi. C'est un bon point de départ, avec VCCW.
Vous pouvez utiliser un plugin pour déroger à vos actifs ou à une déléue manuelle, puis dites au grognement de le concaténer et de les minimiser.
Cet article peut vous donner ce que vous recherchez http: / /css-tricks.com/taking-control-cssjs-wordpress-plugins-load/
Notez que cet article CSS-Tricks traite principalement de plugins qui ajoutent des fichiers JS et CSS - pas inline styles et scripts, comme la question indique. Avec cela, il fournit de grandes solutions pour traiter des plugins qui insistent sur l'ajout de leurs propres fêtes et scripts.
Votre plan semble un peu désordonné. Dans le meilleur scénario des cas, supposons que vous ayez configuré et utilisé une tâche grogneuse simple afin de minimiser tous vos CSS et JS votre instance WordPress utilise.
Cela signifie que vous devez creuser votre code, trouvez où chacun de vos plugins récupère des styles ou des scripts, les couper et les miniez-les en utilisant Grunt. Ensuite, vous devez accomplir le fichier final minifié et l'injecter dans votre instance WordPress à nouveau.
Outre le fait que vous devrez faire beaucoup de codage personnalisé, la mise à jour de vos plugins vous donnera beaucoup de douleur.
Pour coller à un plan évolutif et facile à suivre, je suggère d'utiliser Plugin BWP Minify < / a> qui prendra soin de vos styles et scripts, il fournit un support CDN.
Vous pouvez ensuite utiliser GRUNT comme mécanisme de vérification de la qualité de code. UNCSS est un excellent outil qui vous aide à trouver des styles inutilisés. Grunt-usemin est également une excellente solution.
Enfin, comme je constate que vous êtes prêt à passer à des outils de ligne de commande, je suggérerais vivement de jeter un coup d'œil à wp -Cli C'est une merveilleuse interface de ligne de commande pour WordPress.
Si vous êtes prêt à passer le temps nécessaire pour séparer votre JS en modules, alors grogneur Browserify pourrait bien fonctionner pour vous à long terme. Cependant, comme mentionné déjà, cela nécessiterait d'extraire le code concerné de vos fichiers plugin.
pour CSS minéculate, grognon-contribut-cssmin vaudrait un look . J'aime aussi
Spécifiquement, que voulez-vous grognez de faire pour vous?
Je pense qu'il veut grommeler de combiner, miniez et compresse les styles et les scripts. Ce serait idéal pour SCSS ou moins et CoffeScript ou JavaScript.