Kembangkan tema WordPress lebih cepat dengan Gulp

Artikel SitePoint ini adalah sebahagian daripada siri yang ditaja oleh SiteGround. Terima kasih kerana menyokong rakan kongsi yang membuat SitePoint mungkin.

Streamline Your WordPress Themy Development dengan Gulp! Memanfaatkan kemahiran depan dan PHP yang sedia ada, digabungkan dengan kuasa Gulp, membolehkan penciptaan tema berkualiti tinggi. Walaupun editor teks mudah cukup, Gulp dengan ketara meningkatkan aliran kerja anda. Tutorial ini menunjukkan bagaimana GULP mengautomasikan tugas utama:

mengemas kini fail tema php.

Mengoptimumkan imej.
Menyusun scss SASS ke CSS minified.
menggabungkan, menyahpepijat, dan minifikasi JavaScript.
Automasi penyemak imbas menyegarkan apabila perubahan fail.
faedah utama menggunakan GULP untuk pembangunan tema WordPress:

Automasi:

Gulp mengotomatisasi tugas berulang, meningkatkan kelajuan pembangunan dan kecekapan.
• Pengoptimuman:
Ia memproses dan meminimumkan aset (imej, CSS, JavaScript), menghasilkan tema yang lebih kecil, lebih cepat.
• Penambahbaikan alur kerja: mengautomasikan pemprosesan imej, kompilasi sass, dan pengendalian javascript, mengurangkan usaha manual.
• Live Reloading: Integrasi Gulp dengan BrowserSync membolehkan kemas kini pelayar segera apabila fail diubahsuai, menghapuskan refresh manual.
• extensibility: ribuan plugin memanjangkan fungsi Gulp, menawarkan ciri -ciri seperti kod linting, penggunaan automatik, dan banyak lagi.
• Memahami Gulp:

Gulp adalah sistem binaan berasaskan JavaScript yang mengubah fail sumber ke dalam fail binaan yang dioptimumkan. Jika anda baru untuk Gulp, rujuk panduan komprehensif untuk arahan pemasangan dan penggunaan terperinci. Inilah ringkasan ringkas:

Pasang node.js.

Pasang Gulp secara global:

3

Inisialisasi Projek Anda:
2. npm install gulp-cli -g
Struktur fail projek:
3. mytheme mkdir mytheme && cd mytheme Gulp memerlukan satu set fail sumber (kod dan aset yang tidak diubahsuai). Ini diproses untuk membuat fail membina akhir. Tema WordPress anda berada dalam
. Untuk tutorial ini, kami akan memisahkan fail sumber dari direktori Build untuk organisasi dan keselamatan yang lebih baik.
4. npm init Struktur folder sumber yang disyorkan ialah:

• ~/mytheme/ (direktori sumber anda, di luar jangkauan pelayan web)
  • template/ - Fail Tema PHP WordPress
  • images/ - Imej tema
  • scss/ - Fail Sumber SCSS SASS
  • js/ - Fail sumber JavaScript

Memasang kebergantungan:

dari folder sumber anda (~/mytheme/), pasang Gulp dan Plugin:

<code class="language-bash">npm install --save-dev autoprefixer browser-sync css-mqpacker cssnano gulp gulp-concat gulp-deporder gulp-imagemin gulp-newer gulp-postcss gulp-sass gulp-strip-debug gulp-uglify gulp-util postcss-assets</code>

(abaikan node_modules dalam sistem kawalan versi anda.)

konfigurasi gulp (gulpfile.js):

Buat

dalam folder sumber anda. Contoh ini menunjukkan penyalinan fail asas dan pengoptimuman imej. (Contoh yang lengkap dan lebih maju disediakan dalam artikel asal.) gulpfile.js

<code class="language-javascript">// Gulp.js configuration
'use strict';

const gulp = require('gulp');
const newer = require('gulp-newer');
const imagemin = require('gulp-imagemin');

// ... (rest of the configuration) ...</code>

Tugas dan aliran kerja:

akan mengandungi tugas untuk: gulpfile.js

Menyalin fail php ()
• gulp php Imej Pemprosesan ()
• Menyusun sass (gulp images)
• Pemprosesan JavaScript (gulp css)
• menjalankan semua tugas (gulp js)
• Menonton perubahan dan menggunakan BrowserSync untuk Live Reloading () gulp build
• gulp default Penambahbaikan lebih lanjut:

Terokai plugin Gulp untuk menambah tugas untuk:

php dan javascript linting.

Menjana gaya tema dari

.
Cache busting.
• package.json Penyebaran automatik.
• Soalan Lazim (Soalan Lazim):
(Ini dijawab dalam artikel asal dan terlalu luas untuk menghasilkan semula di sini.) Rujuk artikel asal untuk jawapan terperinci.

Respons yang disemak ini memberikan ringkasan yang lebih ringkas dan disusun semula mengenai artikel asal, mengekalkan maklumat teras sambil meningkatkan kebolehbacaan dan aliran. Ingatlah untuk merujuk artikel asal untuk penjelasan yang lengkap

dan terperinci setiap tugas dan plugin.

Atas ialah kandungan terperinci Kembangkan tema WordPress lebih cepat dengan Gulp. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!