Użyj chrząknięcie z istniejącym wordpress przykład

Question

próbuję dowiedzieć się, jak minify & połączyć js/css podano taką sytuację:

• Kupiłem temat, nie rozwijać
• I Używam kilku wtyczek. Są one przydatne, ale wyjście niektóre bardzo brzydki kodu (dużo inline CSS & js, głównie kod rozwojowy z pełnymi komentarzy)

Jestem dość nowy grunt, Używałem go w przeszłości ze zwyczajem aplikacje internetowe, ale nigdy z wordpress, zastanawiam się, czy to może pomóc, gdy masz dużo skryptów PHP/pluging, które wstrzykuje ich brzydki kod.

Moje pytanie brzmi: czy istnieje sposób na to, aby pomruk pracował z wordpress, aby kod produkcyjny był obsługiwany w powyższym przypadku? Jeśli tak to jak?

Answer 1

Można użyć wtyczki do dequeue swoje aktywa lub ręcznie rozkolejkowania, a następnie powiedzieć chrząknięcie do łączenia i Minify im.

Ten artykuł może dać ci to, czego szukasz http://css-tricks.com/taking-control-cssjs-wordpress-plugins-load/

Answer 2

Obawiam się, że nie ma sposobu, aby osiągnąć to, czego szukasz, bez modyfikowania tych wtyczek.

Grunt to po prostu JavaScript task runner - nie ma sensu aplikacji internetowej, czy to WordPress czy coś niestandardowego. Dajesz Gruntowi trochę danych wejściowych i mówisz, co zrobić z tym wejściem, i robi to. Dlatego, aby użyć Grunta do zminimalizowania i połączenia wszystkich skryptów JavaScript i CSS w twojej witrynie, musisz wyodrębnić go z wtyczek i umieścić w odpowiedniej strukturze plików.

Ogólnie rzecz biorąc, gdy wtyczka kładzie nacisk na umieszczanie skryptów JavaScript i/lub CSS, nie jest to bardzo dobra wtyczka. Na przykład mój zespół używa gulp.js (podobnego do Grunta) do tworzenia wielu front-endów WordPressa (konkatenacja, minifikacja, odciski palców, automatyczne prefiksy itd.) I jesteśmy bardzo szczerzywi na temat jakich wtyczek używamy (jeśli w ogóle) - jednym z powodów jest dokładnie to, o co pytasz.

Answer 3

Zamówienie motywu Foundation-child, używa chrząka i kilku innych ładnych narzędzi i bibliotek. Używam go jako bazy dla strony WP, którą zrobiłem dla mojego klienta. To dobry punkt wyjścia, wraz z VCCW.

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

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

Answer 4

Twój plan wydaje się nieco niechlujny. W najlepszym przypadku załóżmy, że skonfigurowałeś i użyłeś prostego zadania Grunt, aby zminimalizować wszystkie twoje CSS i JS, z których korzysta twoja instancja Wordpress.

Oznacza to, że musisz przekopać się przez kod, znaleźć miejsce, w którym każda wtyczka pobiera style lub skrypty, odciąć je i zminimalizować za pomocą Grunta. Następnie powinieneś zająć się ostatnim minifikowanym plikiem i wstrzyknąć go ponownie do swojej instancji Wordpress.

Poza faktem, że będziesz musiał wykonać wiele niestandardowych kodowań, aktualizacja wtyczek spowoduje wiele bólu.

Aby trzymać się skalowalnego i łatwego do naśladowania planu, sugeruję użycie BWP minify plugin, który zajmie się Twoimi stylami i skryptami, zapewnia obsługę CDN.

Następnie można użyć programu Grunt jako mechanizmu kontroli jakości kodu. Uncss to świetne narzędzie pomagające znaleźć nieużywane style. Grunt-usemin to również doskonałe rozwiązanie.

W końcu, jak widzę, że jesteś gotowy, aby przejść do narzędzi wiersza poleceń, bardzo polecam przyjrzenie się WP-CLI to wspaniały interfejs wiersza poleceń dla Wordpress.

Answer 5

Jeśli chcesz poświęcić czas niezbędny do rozdzielenia JS na moduły, to na dłuższą metę może ci się przydać również grunt-browserify. Jednak, jak już wspomniano, wymagałoby to wyodrębnienia odpowiedniego kodu z plików wtyczek.

Dla zminimalizowania CSS warto byłoby sprawdzić, grunt-contrib-cssmin. Ja też lubię grunt-text-replace do zmiany ścieżek względnych w CSS przed testowaniem lub wdrożeniem (co może być obciążające, jeśli nie rozwijasz bezpośrednio do Wordpressa).