Utilizzare grugnito con un'istanza wordpress esistente

Question

Sto cercando di capire come minify & combinare js/codice CSS, data la situazione:

• ho acquistato un tema, non svilupparlo
• I sto usando diversi plugin. Sono utili, ma sono uscita un codice molto brutto (molto in linea CSS & js, per lo sviluppo di codice con i commenti pieni)

Sono abbastanza nuovo per grugnito, l'ho usato in passato con personalizzato applicazioni web, ma mai con wordpress, mi chiedo se può essere d'aiuto quando si hanno molti script PHP/plug-in che inietti il ​​loro brutto codice.

Quindi la mia domanda è: c'è un modo per far funzionare grunt con wordpress in modo che il codice di produzione sia servito nel caso sopra? Se é cosi, come?

Answer 1

È possibile utilizzare un plugin per annullare l'accodamento vostri beni o manualmente dequeue, poi dire grugnito concatenare e minify.

Questo articolo può darti quello che cerchi http://css-tricks.com/taking-control-cssjs-wordpress-plugins-load/

Answer 2

Ho paura che non ci sia modo di ottenere ciò che stai cercando senza modificare quei plugin.

Grunt è solo un runner di attività JavaScript - non ha senso di un'applicazione Web, che si tratti di WordPress o di qualcosa di personalizzato. Dai qualche input a Grunt, e gli dici cosa fare con quell'input, e lo fa. Pertanto, per utilizzare Grunt per minimizzare e concatenare tutti i JavaScript e i CSS sul tuo sito, devi estrarlo dai plugin e inserirlo in una struttura di file appropriata.

In generale, quando un plugin insiste nell'inlare un gruppo di JavaScript e/o CSS, non è un ottimo plug-in. Ad esempio, il mio team utilizza gulp.js (simile a Grunt) per un sacco di sviluppo front-end di WordPress (concatenazione, minification, fingerprinting, prefissi automatici e così via), e siamo molto particolari su quali plugin utilizziamo (se del caso) - uno dei motivi è esattamente quello di cui tratta la tua domanda.

Answer 3

Controlla il tema figlio di FoundationPress, utilizza grunt e una manciata di altri strumenti e librerie. Lo sto usando come base per un sito WP che ho realizzato per un mio cliente. È un buon punto di partenza, insieme a VCCW.

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

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

Answer 4

Il piano sembra un po 'disordinato. Nella migliore delle ipotesi, supponiamo di aver configurato e utilizzato una semplice attività Grunt per minimizzare tutti i CSS e JS utilizzati dall'istanza di Wordpress.

Ciò significa che devi scavare nel codice, trovare dove ciascuno dei tuoi plug-in recupera stili o script, tagliarli e ridimensionarli usando Grunt. Successivamente è necessario riprendere il file minificato finale e inserirlo di nuovo nell'istanza di Wordpress.

Oltre al fatto che dovrai eseguire molti codici personalizzati, l'aggiornamento dei plug-in ti darà un sacco di dolore.

Per aderire a un piano scalabile e facile da seguire, suggerisco di utilizzare BWP minify plugin che si prenderà cura dei propri stili e script, fornisce supporto CDN.

È quindi possibile utilizzare Grunt come meccanismo di controllo della qualità del codice. Uncss è un ottimo strumento che ti aiuta a trovare stili inutilizzati. Grunt-usemin è anche un'ottima soluzione.

Finalmente, come vedo che siete disposti a passare a strumenti da riga di comando, suggerirei di dare un'occhiata a WP-CLI è una meravigliosa interfaccia a riga di comando per Wordpress.

Answer 5

Se sei disposto a dedicare il tempo necessario per separare il tuo JS in moduli, allora grunt-browserify potrebbe funzionare bene per te nel lungo periodo. Tuttavia, come già detto, ciò richiederebbe l'estrazione del codice pertinente dai file del plugin.

Per minification CSS, grunt-contrib-cssmin sarebbe la pena dare un'occhiata. Mi piace anche grunt-text-replace per modificare i percorsi relativi in ​​CSS prima del test o della distribuzione (che può essere aggravante se non si sviluppa direct-to-Wordpress).