Tiga Alur Kerja Otomasi Pengembangan untuk Agen WordPress

Saya menulis artikel ini di saat yang tenang, merenungkan alur kerja otomatisasi yang kami miliki di agensi kami. Sebagai pemilik dan pengembang agensi sendiri, saya menghabiskan waktu berjam-jam untuk mengotak-atik otomatisasi untuk menghemat waktu dan meningkatkan produktivitas.

Memanfaatkan alur kerja otomatisasi pengembangan adalah salah satu cara terbaik untuk meningkatkan produktivitas di agensi WordPress Anda sekaligus memastikan kualitas kode.

Di agensi kami, kami secara khusus memanfaatkan otomatisasi dalam proses pengkodean kami. Itulah tepatnya yang akan dijelaskan artikel ini. Meskipun saya tidak dapat memandu Anda melalui langkah-langkah yang tepat untuk mengatur proses otomatisasi, Anda pasti akan memiliki pemahaman yang baik tentang bagaimana alur kerja otomatisasi ini beroperasi dan bagaimana Anda dapat mengatur alur kerja Anda sendiri.

Sebagai permulaan, kami menggunakan penerapan otomatis berdasarkan GitHub. Dengan mendorong file ke server live atau staging kami berdasarkan komitmen GitHub, kami secara efektif menghindari mentransfer file melalui SFTP atau SCP, dan dengan demikian semua jebakan yang datang dengan transfer manual. Terutama jika Anda bekerja dengan beberapa pengembang atau agensi pada proyek yang sama, Anda akan mendapat manfaat dari penerapan otomatis menggunakan sistem kontrol versi favorit Anda. Kami menggunakan perangkat lunak sumber terbuka Jenkins untuk penerapan otomatis.

Kedua, kami menggunakan alur kerja bertenaga WPGulp otomatis dalam proses pengembangan tema dan plugin kami. Dengan proses ini, kami dapat memastikan bahwa kode kami diformat dengan benar, diperkecil, digabungkan, diawali, dan banyak lagi. Saya akan memandu Anda dalam menyiapkan WPGulp dan membuat plugin pertama Anda menggunakan alur kerja ini.

Lihat Juga Plugin Otomasi WordPress Terbaik

Terakhir, saya akan menjelaskan cara mengatur editor open-source VS Code untuk secara otomatis menggunakan WordPress Coding Standards setelah menyimpan file PHP. Pemformatan kode yang tepat memastikan keterbacaan dan membantu menghindari bug.

Membuat Alur Kerja Penerapan Otomatis dengan Jenkins

Pikirkan tentang skenario berikut.

Anda memiliki beberapa pengembang di berbagai kota (atau bahkan negara) yang bekerja di situs web yang sama, masing-masing menggunakan kode melalui SFTP ke server. Bahkan jika Anda mengelola kode dalam repositori, transmisi melalui SFTP memudahkan untuk menimpa perubahan kode tanpa peringatan apa pun.

Alur kerja penerapan otomatis adalah cara yang bagus untuk menghindari masalah yang disebabkan oleh penimpaan kode.

Sekarang saya akan menunjukkan kepada Anda cara mengatur server Jenkins Anda sendiri dan mengonfigurasi repositori GitHub untuk secara otomatis menyebarkan kode ke server Anda setelah menerima perintah Git PUSH.

Sekarang, meskipun Anda dapat menggunakan Github untuk penerapan secara native dengan Cloudways, memiliki server Jenkins yang menangani penerapan memberi agensi Anda lebih banyak fleksibilitas saat menulis dan menerapkan kode.

Kasus penggunaan umum untuk Jenkins adalah:

• Membuat dokumentasi PHP dengan cepat dengan phpDox
• Integrasi alat seperti NodeJS, Grunt, Gulp atau Bower ke dalam alur kerja Anda
• Penanganan keseluruhan proses Integrasi Berkelanjutan & Pengiriman Berkelanjutan

Mulai Dengan Pengaturan Jenkins

Untuk memulai Jenkins di agensi Anda, Anda harus menginstalnya di server dengan akses root shell. Sangat penting bahwa Anda dapat menjalankan skrip dan menginstal paket perangkat lunak sesuai kebutuhan di server.

Sebuah kata peringatan: Membangun dan menjalankan Jenkins tidak dilakukan dalam lima menit – tetapi itu akan sia-sia.

Langkah pertama adalah menginstal Jenkins di server Anda. Digital Ocean memiliki artikel bagus tentang menginstal Jenkins di server Ubuntu mereka, tetapi Anda dapat menggunakan server lain dengan persyaratan yang sesuai.

Kedua, Anda harus mengonfigurasi proyek Anda untuk Jenkins. Saat berbicara tentang penerapan otomatis, Anda mungkin hanya ingin tema atau plugin yang sedang Anda kerjakan untuk diterapkan. Pada dasarnya, Anda tidak akan menambahkan seluruh situs web ke repositori Git dan menyebarkannya menggunakan Jenkins. Dalam banyak kasus, hanya tema atau plugin yang sedang Anda kerjakan yang disebarkan.

Oleh karena itu, Anda ingin mengonfigurasi direktori kerja dan repositori GitHub Anda untuk ditangani oleh server Jenkins baru Anda. Saya tidak akan sepenuhnya menyelami proses ini, karena itu akan keluar dari cakupan artikel ini. Sebagai gantinya, saya akan memberi Anda gambaran singkat tentang apa yang diperlukan dan kemudian mengarahkan Anda ke tutorial fantastis ini di WebDevStudios, yang dapat Anda ikuti dengan mudah.

1. Anda ingin memastikan Jenkins sudah diatur dan dijalankan.
2. Siapkan repositori Git sesuai kebutuhan (mis. konfigurasikan .gitignore dengan benar).
3. Instal PHPLoy di sistem Anda karena itu akan menangani penyebaran.
4. Siapkan jenkinsfile, yang berisi instruksi untuk Jenkins.
5. Tambahkan pipa ke server Jenkins Anda dan lakukan uji coba.

Dengan garis besar singkat ini, Anda memiliki semua sumber daya yang Anda butuhkan untuk memulai Jenkins. Percayalah ketika saya mengatakan bahwa itu menghemat jam agensi saya setiap minggu. Kami tidak khawatir tentang penerapan kode lagi dan dapat dengan mudah memantau penerapan untuk setiap proyek.

Jika proses ini terdengar seperti terlalu banyak pekerjaan untuk Anda, Anda beruntung. Kami memiliki artikel ekstensif untuk proses penerapan alternatif di blog Cloudways.

Daftar Cepat untuk Membantu Anda Memastikan Anda Tidak Ketinggalan Apapun

Daftar ekstensif ini mencakup semua yang perlu Anda ketahui sebelum menekan tombol terbitkan situs web.

Saya setuju dengan Ketentuan Layanan & Kebijakan Privasi Cloudways

DAPATKAN SEKARANG

Terima kasih

Daftar Periksa Situs Web Anda yang Dapat Diunduh sedang menuju Kotak Masuk Anda.

Menyiapkan WPGulp untuk Otomatisasi Dev

Alur kerja hebat lainnya yang kami sukai adalah menggunakan kerangka kerja WPGulp untuk mengembangkan tema dan plugin. Kontributor inti WP Ahmad Awais telah menciptakan alat yang bagus yang membantu mempercepat pengembangan sambil mempertahankan kualitas kode yang tinggi.

Alasan menggunakan WPGulp banyak:

• Lingkungan pengembang yang ditingkatkan
• Pengembangan CSS yang dioptimalkan
• Penggabungan, uglifikasi, dan minifikasi JS
• Pengoptimalan gambar
• Menghasilkan file .pot untuk I18N dan I10N

Anda akan melihat apa yang saya maksud ketika Anda membaca readme.txt dari repo Github untuk WPGulp (ditautkan di atas). Biarkan saya memberi Anda contoh bagaimana kami menggunakan WPGulp saat mengembangkan plugin WordPress khusus.

Pertama, kami menggunakan generator WPPB untuk membuat boilerplate plugin dasar. Dengan menggunakan boilerplate plugin yang sama berulang kali, kami memastikan bahwa semua plugin yang kami kembangkan terlihat familier dan setiap pengembang dapat dengan mudah menemukan fungsi yang dia cari.

Selanjutnya, kita tambahkan WPGulp ke folder plugin. Kami melakukannya dengan menjalankan perintah shell " npx wpgulp " di folder plugin. Pastikan bahwa prasyarat NodeJS dan NPM diinstal.

Setelah menginstal WPGulp di folder plugin Anda, Anda akan disajikan dengan output baris perintah ini:

Ketiga, kami mengonfigurasi wpgulp.config.js sesuai kebutuhan untuk proyek tersebut. File konfigurasi ini menangani semua pengaturan yang dibutuhkan WPGulp, termasuk URL proyek, dan jalur ke aset (CSS, JS, gambar). Untungnya, Ahmad telah melakukan pekerjaan luar biasa dalam mengomentari file konfigurasi, sehingga setiap pengaturan menjadi sangat jelas.

Terakhir, kami memicu WPGulp dan mulai mengembangkan. Dengan hanya menjalankan “ npm start ”, kita dapat mulai mengembangkan sambil memanfaatkan kekuatan penuh WPGulp.

Jika Anda tertarik untuk mengintegrasikan WPGulp dengan alur kerja Jenkins yang diuraikan di atas, yang Anda perlukan hanyalah memodifikasi file .gitignore Anda sehingga hanya versi yang dioptimalkan dari file CSS, skrip JS, dan gambar Anda yang diversi (path ke file ini adalah ditentukan dalam file wpgulp.config.js).

Menerapkan Standar Pengkodean WP dengan Kode VS

Terakhir, mari kita bicara tentang topik yang memiliki hubungan khusus dengan setiap pengembang: pemformatan kode. Jika Anda pernah membaca kode yang ditulis oleh orang lain, Anda mungkin akan marah pada klausa if/else indentasi yang salah, spasi yang hilang, atau pemeriksaan kondisi yang tidak mengikuti gaya Yoda.

Di agensi kami, kami menggunakan alat sumber terbuka VS Code untuk menulis kode kami. Kami sebelumnya menggunakan PHPStorm tetapi menemukan bahwa Kode VS menawarkan lebih banyak fleksibilitas dan kemudahan penggunaan.

WordPress telah menerapkan standar pengkodean dan praktik terbaik, dan untuk alasan yang bagus. Dengan ratusan ribu pengembang di ekosistem, wajib untuk menyusun kode setidaknya agak mirip dengan mengikuti standar tertentu.

Sebagai manusia, bagaimanapun, kita memiliki kapasitas memori yang terbatas. Dan mengingat standar pengkodean tentu saja bukan penggunaan terbaik dari kapasitas itu (saya percaya itu harus dicadangkan untuk hal-hal yang tidak dapat diotomatisasi). Untuk membantu Anda mengosongkan ruang di memori dan menghemat waktu saat memformat kode, Anda dapat meminta VS Code memformat kode Anda secara otomatis sesuai standar pengkodean WordPress.

Pengaturannya tergantung pada sistem operasi Anda tetapi cukup mudah. Untuk Mac, Anda dapat mengikuti tutorial Jason yang luar biasa. Untuk pengguna Windows, ada penjelasan yang bagus di sini. Dan untuk pengguna Linux, ada panduan ini oleh Tom McFarlin.

Pada dasarnya, penerapan WP Coding Standards ke dalam VS Code bergantung pada dua hal:

• Pengendus Kode PHP
• Aturan Standar Pengkodean WP (sering disebut sebagai “wpcs”)

PHP Codesniffer adalah alat untuk memodifikasi kode PHP (seperti yang mungkin sudah Anda duga), yang dapat Anda tautkan dengan aturan untuk Standar Pengkodean WP dan tambahkan sebagai ekstensi ke Kode VS.

Kemudian, Anda hanya perlu memberi tahu Kode VS aturan mana yang akan diterapkan pada kode PHP Anda dan apakah akan menerapkannya saat mengetik atau menyimpan file. Preferensi kami adalah menjalankan PHP Codesniffer saat disimpan, karena dapat menjadi sangat berlebihan saat Anda menjalankannya saat Anda mengetik kode. Tangkapan layar di bawah ini menunjukkan contoh pengaturan PHP yang kami gunakan dalam konfigurasi Kode VS kami.

Apakah Anda sudah menggunakan salah satu dari alur kerja ini dalam kehidupan agensi Anda sehari-hari? Atau apakah Anda memiliki rutinitas yang berbeda yang diterapkan? Beri tahu saya di komentar di bawah! Jika Anda memiliki pertanyaan tentang penerapan proses yang diuraikan, jangan ragu untuk meninggalkan komentar – Saya senang untuk masuk dan memberikan bantuan tambahan.