Trzy procesy automatyzacji rozwoju dla agencji WordPress

Piszę ten artykuł w spokojnym momencie, zastanawiając się nad przepływami automatyzacji, które mamy w naszej agencji. Jako właściciel agencji i programista spędzam niezliczone godziny na majsterkowaniu przy automatyzacji, aby zaoszczędzić czas i zwiększyć produktywność.

Wykorzystanie przepływów pracy automatyzacji rozwoju jest jednym z najlepszych sposobów na zwiększenie produktywności w agencji WordPress przy jednoczesnym zapewnieniu jakości kodu.

W naszej agencji w szczególności wykorzystujemy automatyzację procesów kodowania. Dokładnie to wyjaśni ten artykuł. Chociaż nie mogę przeprowadzić Cię przez dokładne kroki konfiguracji procesów automatyzacji, z pewnością dobrze rozumiesz, jak działają te przepływy pracy automatyzacji i jak możesz skonfigurować własne przepływy pracy.

Na początek używamy automatycznego wdrażania opartego na GitHub. Przesyłając pliki na nasze serwery na żywo lub serwery pomostowe w oparciu o zatwierdzenia GitHub, skutecznie unikamy przesyłania plików przez SFTP lub SCP, a tym samym wszystkich pułapek związanych z ręcznymi transferami. Szczególnie, jeśli pracujesz z wieloma programistami lub agencjami nad tym samym projektem, skorzystasz z automatycznych wdrożeń przy użyciu ulubionego systemu kontroli wersji. Używamy oprogramowania open-source Jenkins do automatycznego wdrażania.

Po drugie, używamy zautomatyzowanego przepływu pracy opartego na WPGulp w naszych procesach tworzenia motywów i wtyczek. Dzięki temu procesowi możemy być pewni, że nasz kod zostanie odpowiednio sformatowany, zminifikowany, połączony, poprzedzony prefiksem i wiele więcej. Przeprowadzę Cię przez konfigurację WPGulp i tworzenie pierwszej wtyczki przy użyciu tego przepływu pracy.

Sprawdź także Najlepsze wtyczki do automatyzacji WordPress

Na koniec wyjaśnię, jak skonfigurować edytor open-source VS Code, aby automatycznie stosował standardy kodowania WordPress po zapisaniu pliku PHP. Właściwe formatowanie kodu zapewnia czytelność i pomaga unikać błędów.

Tworzenie przepływów pracy zautomatyzowanego wdrażania za pomocą Jenkins

Pomyśl o następującym scenariuszu.

Masz wielu programistów w różnych miastach (a nawet krajach) pracujących na tej samej stronie internetowej, z których każdy wdraża kod przez SFTP na serwer. Nawet jeśli zarządzasz kodem w repozytorium, transmisja przez SFTP ułatwia nadpisywanie zmian w kodzie bez żadnego ostrzeżenia.

Przepływy pracy zautomatyzowanego wdrażania to świetny sposób na uniknięcie problemów spowodowanych nadpisywaniem kodu.

Pokażę teraz, jak skonfigurować własny serwer Jenkins i skonfigurować repozytorium GitHub, aby automatycznie wdrażać kod na serwerze po otrzymaniu polecenia Git PUSH.

Teraz, chociaż możesz używać Github do wdrażania natywnie z Cloudways, posiadanie serwera Jenkins, który obsługuje wdrożenie, zapewnia Twojej agencji znacznie większą elastyczność podczas pisania i wdrażania kodu.

Typowe przypadki użycia Jenkinsa to:

• Generowanie dokumentacji PHP w locie za pomocą phpDox
• Integracja narzędzi takich jak NodeJS, Grunt, Gulp czy Bower z Twoim przepływem pracy
• Ogólna obsługa procesów Continuous Integration i Continuous Delivery

Zacznij od konfiguracji Jenkinsa

Aby rozpocząć korzystanie z Jenkins w swojej agencji, musisz zainstalować go na serwerze z dostępem do powłoki głównej. Ważne jest, aby w razie potrzeby na serwerze można było uruchamiać skrypty i instalować pakiety oprogramowania.

Słowo ostrzeżenia: uruchomienie Jenkinsa nie trwa pięć minut – ale będzie warto.

Pierwszym krokiem jest zainstalowanie Jenkinsa na swoim serwerze. Digital Ocean ma fajny artykuł na temat instalowania Jenkins na swoich serwerach Ubuntu, ale możesz użyć dowolnego innego serwera o odpowiednich wymaganiach.

Po drugie, będziesz musiał skonfigurować swój projekt dla Jenkinsa. Mówiąc o automatycznym wdrożeniu, prawdopodobnie chcesz, aby wdrożono tylko motyw lub wtyczkę, nad którą aktualnie pracujesz. Zasadniczo nie dodajesz całej witryny do repozytorium Git i nie wdrażasz jej za pomocą Jenkins. W wielu przypadkach wdrażany jest tylko motyw lub wtyczka, nad którą faktycznie pracujesz.

Dlatego będziesz chciał skonfigurować swoje katalogi robocze i repozytoria GitHub do obsługi przez nowy serwer Jenkins. Nie zamierzam jednak w pełni zagłębiać się w ten proces, ponieważ byłoby to poza zakresem tego artykułu. Zamiast tego przedstawię krótki przegląd tego, co jest konieczne, a następnie wskażę ten fantastyczny samouczek w WebDevStudios, który można łatwo śledzić.

1. Upewnij się, że Jenkins jest skonfigurowany i działa.
2. Skonfiguruj repozytorium Git zgodnie z potrzebami (np. poprawnie skonfiguruj .gitignore).
3. Zainstaluj PHPLoy w swoim systemie, ponieważ obsłuży to wdrożenie.
4. Skonfiguruj plik jenkinsfile, który zawiera instrukcje dla Jenkinsa.
5. Dodaj potok do serwera Jenkins i przetestuj go.

Dzięki temu krótkiemu opisowi masz wszystkie zasoby potrzebne do rozpoczęcia pracy z Jenkins. Uwierz mi, kiedy mówię, że co tydzień oszczędza to godziny pracy mojej agencji. Nie przejmujemy się już wdrożeniami kodu i możemy z łatwością monitorować wdrożenia dla każdego projektu.

Jeśli ten proces wydaje Ci się zbyt pracochłonny, masz szczęście. Na blogu Cloudways mamy obszerne artykuły dotyczące alternatywnych procesów wdrażania.

Szybka lista, która pomoże Ci upewnić się, że niczego nie przegapisz

Ta obszerna lista zawiera wszystko, co musisz wiedzieć, zanim klikniesz przycisk publikowania witryny.

Zgadzam się z Warunkami świadczenia usług i Polityką prywatności Cloudways

ZDOBĄDŹ TO TERAZ

Dziękuję

Twoja lista kontrolna witryny do pobrania jest już w drodze do Twojej skrzynki odbiorczej.

Konfigurowanie WPGulp do automatyzacji deweloperów

Innym potężnym przepływem pracy, który lubimy, jest użycie frameworka WPGulp do tworzenia motywów i wtyczek. Główny współtwórca WP, Ahmad Awais, stworzył fajne narzędzie, które pomaga przyspieszyć rozwój przy jednoczesnym zachowaniu wysokiej jakości kodu.

Powodów korzystania z WPGulp jest wiele:

• Ulepszone środowisko deweloperskie
• Zoptymalizowany rozwój CSS
• Konkatenacja JS, uglifikacja i minifikacja
• Optymalizacja obrazu
• Generowanie plików .pot dla I18N i I10N

Zobaczysz, co mam na myśli, czytając plik readme.txt repozytorium Github dla WPGulp (link powyżej). Podam przykład, w jaki sposób używamy WPGulp podczas tworzenia niestandardowej wtyczki WordPress.

Najpierw korzystamy z generatora WPPB, aby stworzyć podstawowy szablon wtyczki. Używając wielokrotnie tego samego wzorca wtyczek, zapewniamy, że wszystkie tworzone przez nas wtyczki wyglądają znajomo i że każdy programista może łatwo znaleźć funkcje, których szuka.

Następnie dodajemy WPGulp do folderu wtyczek. Robimy to, uruchamiając polecenie powłoki „ npx wpgulp ” w folderze wtyczek. Upewnij się, że zainstalowano wymagania wstępne NodeJS i NPM.

Po zainstalowaniu WPGulp w folderze wtyczek, wyświetlane są następujące dane wyjściowe wiersza poleceń:

Po trzecie, konfigurujemy wpgulp.config.js zgodnie z potrzebami projektu. Ten plik konfiguracyjny obsługuje wszystkie ustawienia potrzebne WPGulp, w tym adres URL projektu i ścieżki do zasobów (CSS, JS, obrazy). Na szczęście Ahmad wykonał fantastyczną robotę, komentując plik konfiguracyjny, dzięki czemu każde ustawienie jest krystalicznie czyste.

Na koniec uruchamiamy WPGulp i zaczynamy się rozwijać. Po prostu uruchamiając „ npm start ”, możemy rozpocząć programowanie, wykorzystując pełną moc WPGulp.

Jeśli jesteś zainteresowany integracją WPGulp z opisanym powyżej przepływem pracy Jenkins, wystarczy zmodyfikować plik .gitignore, aby wersjonowane były tylko zoptymalizowane wersje plików CSS, skryptów JS i obrazów (ścieżka do tych plików jest określone w pliku wpgulp.config.js).

Stosowanie standardów kodowania WP z kodem VS

Na koniec porozmawiajmy o temacie, z którym każdy programista ma szczególny związek: formatowanie kodu. Jeśli kiedykolwiek czytałeś kod napisany przez kogoś innego, prawdopodobnie złościłeś się z powodu niepoprawnie wciętych klauzul if/else, brakujących spacji lub sprawdzania warunków, które nie były zgodne ze stylem Yoda.

W naszej agencji do pisania naszego kodu używamy narzędzia open-source VS Code. Wcześniej korzystaliśmy z PHPStorma, ale okazało się, że VS Code oferuje znacznie większą elastyczność i łatwość użytkowania.

WordPress wdrożył standardy kodowania i najlepsze praktyki i nie bez powodu. Z setkami tysięcy programistów w ekosystemie, obowiązkowe jest ustrukturyzowanie kodu przynajmniej w podobny sposób, zgodnie z pewnymi standardami.

Jednak jako ludzie mamy ograniczoną pojemność pamięci. A pamiętanie o standardach kodowania z pewnością nie jest najlepszym wykorzystaniem tej zdolności (uważam, że powinno być zarezerwowane dla rzeczy, których nie można zautomatyzować). Aby pomóc Ci zwolnić miejsce w pamięci i zaoszczędzić czas podczas formatowania kodu, możesz automatycznie sformatować kod w programie VS Code zgodnie ze standardami kodowania WordPress.

Konfiguracja zależy od systemu operacyjnego, ale jest dość prosta. W przypadku komputerów Mac możesz skorzystać z doskonałego samouczka Jasona. Dla użytkowników systemu Windows jest tutaj dobre wyjaśnienie. A dla użytkowników Linuksa jest ten przewodnik autorstwa Toma McFarlina.

Zasadniczo wdrożenie WP Coding Standards do VS Code opiera się na dwóch rzeczach:

• PHP Codesniffer
• Zestaw reguł WP Coding Standards (często określany jako „wpcs”)

PHP Codesniffer to narzędzie do modyfikacji kodu PHP (jak już można się domyślić), które można połączyć z zestawem reguł WP Coding Standards i dodać jako rozszerzenie do VS Code.

Następnie musisz tylko powiedzieć VS Code, który zestaw reguł zastosować do kodu PHP i czy zastosować go podczas pisania, czy zapisywania pliku. Naszą preferencją jest uruchamianie PHP Codesniffer podczas zapisywania, ponieważ może to być dość przytłaczające, gdy uruchamiasz go podczas pisania kodu. Poniższy zrzut ekranu pokazuje przykład ustawień PHP, których używamy w naszej konfiguracji VS Code.

Czy korzystasz już z któregokolwiek z tych przepływów pracy w swoim codziennym życiu agencji? A może masz zaimplementowane różne procedury? Daj mi znać w komentarzach pod spodem! Jeśli masz jakiekolwiek pytania dotyczące realizacji przedstawionych procesów, nie wahaj się zostawić komentarza – chętnie wskoczę i udzielę dodatkowej pomocy.