亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

Rumah Tutorial CMS WordTekan Automasi Tema WordPress dengan Gulp

Automasi Tema WordPress dengan Gulp

Feb 10, 2025 pm 02:09 PM

WordPress Theme Automation With Gulp

menyelaraskan pembangunan tema WordPress anda dengan kuasa automasi Gulp! Tutorial ini menunjukkan cara mengintegrasikan Gulp ke dalam aliran kerja anda untuk mengautomasikan tugas berulang dan meningkatkan kecekapan.

Manfaat Utama:

  • Kecekapan yang dipertingkatkan: Gulp mengautomasikan proses yang membosankan, membebaskan anda untuk memberi tumpuan kepada pembangunan teras. Minifikasi aset meningkatkan prestasi tapak.
  • Prasyarat: Pastikan anda mempunyai WordPress, Node.js, NPM, dan kebiasaan baris perintah asas sebelum bermula. Peranan Gulp:
  • Gulp mengendalikan kompilasi SASS, pengendalian CSS, pengoptimuman imej, dan penyemak imbas semula, pembangunan mempercepatkan dengan ketara.
  • Plugin extensibility: Leverage Gulp plugin seperti
  • ,
  • , dan untuk mengembangkan fungsi. gulp-sass gulp-autoprefixer maklum balas masa nyata & pengendalian ralat yang mantap: gulp-rtlcss fungsi menonton Gulp menyediakan kemas kini masa nyata.
  • menghalang kesilapan daripada menghentikan proses.
  • gulp-plumber Mengapa mengautomasikan?

Automasi aliran kerja anda menawarkan kelebihan yang signifikan:

menghapuskan tugas berulang:

Gantikan kerja -kerja mundan dengan alat yang disesuaikan.
  • menjimatkan masa: Tumpukan tenaga anda pada aspek pembangunan kritikal.
  • mengoptimumkan prestasi: pengoptimuman dan pengoptimuman aset meningkatkan kelajuan laman web.
  • Alat penting:

WordPress (dipasang secara tempatan)

node.js dan npm (dipasang)
  • Kemahiran baris perintah asas
  • Memperkenalkan Gulp

Gulp adalah pelari tugas JavaScript yang mengautomasikan tugas masa yang memakan masa seperti pemampatan CSS, kompilasi SASS, pengoptimuman imej, dan penyemak imbas. Ia mencetuskan tindakan berdasarkan peristiwa:

fail sass simpan pencetus kompilasi sass dan output css minified.

Penambahan imej baru mencetuskan pengoptimuman dan penempatan semula ke folder khusus.
  • fail php atau sass menjimatkan pemotongan semula pelayar automatik.
  • Persediaan Gulp

Pemasangan Global:
    Buka baris arahan anda dan pasang Gulp secara global menggunakan NPM:
  1. Sahkan pemasangan dengan . Anda mesti melihat versi Teluk.

    npm install gulp -g

    Persediaan tema (menggunakan garis bawah): gulp -v muat turun garis bawah dari garis bawah.me, buat tema (mis., "Gulp-wordpress"), letakkan di direktori tema WordPress anda, dan aktifkannya.

  2. Pemasangan Gulp Tempatan: Navigasi ke direktori tema anda menggunakan baris perintah (mis.,

    ). Inisialisasi NPM:
  3. npm install gulp -g

    Ikuti arahan untuk membuat package.json. Kemudian pasang Gulp secara tempatan:

    npm init
  4. ES6 Sokongan Janji: Pasang polyfill: es6-promise

    npm install gulp --save-dev
  5. Buat : gulpfile.js Buat fail kosong dalam direktori akar tema anda. gulpfile.js

Mempercepat pembangunan dengan tugas -tugas Gulp

aliran kerja CSS (sass):

  1. Pasang plugin:

    npm install es6-promise --save-dev
  2. Direktori
  3. Direktori CREATE : sass Buat direktori dengan fail sass anda (termasuk tajuk WordPress Stylesheet dan jadual kandungan). style.scss

  4. (tugas sass): tugas ini menyusun sass, menambah awalan vendor, dan secara opsyen menghasilkan stylesheets RTL. gulpfile.js

    npm install gulp-sass gulp-autoprefixer gulp-rtlcss gulp-rename --save-dev
Fail menonton:

tambahkan tugas menonton untuk menjalankan semula tugas

secara automatik apabila fail sass berubah:

sass

require('es6-promise').polyfill();
const gulp = require('gulp');
const sass = require('gulp-sass');
const autoprefixer = require('gulp-autoprefixer');
const rtlcss = require('gulp-rtlcss');
const rename = require('gulp-rename');

gulp.task('sass', () => {
  return gulp.src('./sass/*.scss')
    .pipe(sass())
    .pipe(autoprefixer())
    .pipe(gulp.dest('./'))
    .pipe(rtlcss())
    .pipe(rename({ basename: 'rtl' }))
    .pipe(gulp.dest('./'));
});
pengendalian ralat dengan

: gulp-plumber Pasang

dan

untuk pengendalian ralat yang lebih baik: gulp-plumber gulp-util

kemas kini tugas
gulp.task('watch', () => {
  gulp.watch('./sass/**/*.scss', gulp.parallel('sass'));
});

gulp.task('default', gulp.parallel('sass', 'watch'));
anda:

sass

npm install gulp-plumber gulp-util --save-dev
aliran kerja JavaScript:

  1. Pasang plugin:

    const plumber = require('gulp-plumber');
    const gutil = require('gulp-util');
    
    const onError = (err) => {
      console.error('An error occurred:', gutil.colors.magenta(err.message));
      gutil.beep();
      this.emit('end');
    };
    
    gulp.task('sass', () => {
      return gulp.src('./sass/*.scss')
        .pipe(plumber({ errorHandler: onError }))
        .pipe(sass())
        // ... rest of your sass task
    });
  2. create

    : Buat fail .jshintrc di akar tema anda untuk mengkonfigurasi jshint. .jshintrc

  3. (JS Tugas): Tugas ini menyusun, lints, dan meminimumkan fail JavaScript. gulpfile.js

    ingat untuk enqueue
    npm install gulp-concat gulp-jshint gulp-uglify --save-dev
    di

    anda. app.min.js functions.php

Pengoptimuman imej:

  1. Pasang Plugin:

    const concat = require('gulp-concat');
    const jshint = require('gulp-jshint');
    const uglify = require('gulp-uglify');
    
    gulp.task('js', () => {
      return gulp.src('./js/*.js')
        .pipe(jshint())
        .pipe(jshint.reporter('default'))
        .pipe(concat('app.js'))
        .pipe(rename({ suffix: '.min' }))
        .pipe(uglify())
        .pipe(gulp.dest('./js'));
    });
    Buat Folder Imej:
  2. Buat
  3. dan

    folder. /images/src /images/dist

  4. (tugas imej):
  5. Tugas ini mengoptimumkan imej.

    gulpfile.js Kemas kini tugas dan

    anda untuk memasukkan tugas
    npm install gulp-imagemin --save-dev
    .

    watch default images

    BrowserSync untuk Muat semula Masa Nyata:

Pasang Plugin:
  • (Integrasi BrowserSync):
    const imagemin = require('gulp-imagemin');
    
    gulp.task('images', () => {
      return gulp.src('./images/src/*')
        .pipe(plumber({ errorHandler: onError }))
        .pipe(imagemin({ optimizationLevel: 7, progressive: true }))
        .pipe(gulp.dest('./images/dist'));
    });
  • gulpfile.js ingat untuk menggantikan dengan url pembangunan WordPress tempatan anda.

    npm install browser-sync --save-dev
    Panduan yang dipertingkatkan ini memberikan pendekatan yang lebih komprehensif dan berstruktur untuk mengintegrasikan Gulp ke dalam aliran kerja pembangunan tema WordPress anda. Ingatlah untuk berunding dengan dokumentasi untuk setiap plugin Gulp untuk pilihan konfigurasi lanjutan.
  • Atas ialah kandungan terperinci Automasi Tema WordPress dengan Gulp. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

    Kenyataan Laman Web ini
    Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

    Alat AI Hot

    Undress AI Tool

    Undress AI Tool

    Gambar buka pakaian secara percuma

    Undresser.AI Undress

    Undresser.AI Undress

    Apl berkuasa AI untuk mencipta foto bogel yang realistik

    AI Clothes Remover

    AI Clothes Remover

    Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

    Clothoff.io

    Clothoff.io

    Penyingkiran pakaian AI

    Video Face Swap

    Video Face Swap

    Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!

    Alat panas

    Notepad++7.3.1

    Notepad++7.3.1

    Editor kod yang mudah digunakan dan percuma

    SublimeText3 versi Cina

    SublimeText3 versi Cina

    Versi Cina, sangat mudah digunakan

    Hantar Studio 13.0.1

    Hantar Studio 13.0.1

    Persekitaran pembangunan bersepadu PHP yang berkuasa

    Dreamweaver CS6

    Dreamweaver CS6

    Alat pembangunan web visual

    SublimeText3 versi Mac

    SublimeText3 versi Mac

    Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

    Cara mendiagnosis penggunaan CPU yang tinggi yang disebabkan oleh WordPress Cara mendiagnosis penggunaan CPU yang tinggi yang disebabkan oleh WordPress Jul 06, 2025 am 12:08 AM

    Sebab-sebab utama mengapa WordPress menyebabkan lonjakan dalam penggunaan CPU pelayan termasuk masalah pemalam, pertanyaan pangkalan data yang tidak cekap, kualiti kod tema yang buruk, atau lonjakan trafik. 1. 2. Masukkan mod penyelesaian masalah untuk secara beransur-ansur membolehkan pemalam untuk menyelesaikan masalah kesesakan prestasi, gunakan QueryMonitor untuk menganalisis pelaksanaan pemalam dan memadam atau menggantikan pemalam yang tidak cekap; 3. Pasang pemalam cache, bersihkan data berlebihan, menganalisis log pertanyaan perlahan untuk mengoptimumkan pangkalan data; 4. Periksa sama ada topik itu mempunyai masalah seperti kandungan beban, pertanyaan kompleks, atau kekurangan mekanisme caching. Adalah disyorkan untuk menggunakan ujian topik standard untuk membandingkan dan mengoptimumkan logik kod. Ikuti langkah -langkah di atas untuk memeriksa dan menyelesaikan lokasi dan selesaikan masalah satu demi satu.

    Cara Minify Files JavaScript di WordPress Cara Minify Files JavaScript di WordPress Jul 07, 2025 am 01:11 AM

    Fail JavaScript Minive boleh meningkatkan kelajuan memuatkan laman web WordPress dengan mengeluarkan kosong, komen, dan kod yang tidak berguna. 1. Gunakan pemalam cache yang menyokong penggabungan mampatan, seperti w3totalcache, aktifkan dan pilih mod mampatan dalam pilihan "Minify"; 2. Gunakan plug-in mampatan khusus seperti fastvelocityminify untuk memberikan lebih banyak kawalan berbutir; 3. Secara manual memampatkan fail JS dan memuat naiknya melalui FTP, sesuai untuk pengguna yang biasa dengan alat pembangunan. Perhatikan bahawa beberapa tema atau skrip plug-in mungkin bertentangan dengan fungsi mampatan, dan anda perlu menguji fungsi laman web dengan teliti selepas pengaktifan.

    Cara Mengoptimumkan WordPress Tanpa Plugin Cara Mengoptimumkan WordPress Tanpa Plugin Jul 05, 2025 am 12:01 AM

    Kaedah untuk mengoptimumkan tapak WordPress yang tidak bergantung pada pemalam termasuk: 1. Gunakan tema ringan, seperti Astra atau GeneratePress, untuk mengelakkan tema tumpukan; 2. Secara manual memampatkan dan menggabungkan fail CSS dan JS untuk mengurangkan permintaan HTTP; 3. Mengoptimumkan imej sebelum memuat naik, gunakan format web dan saiz fail kawalan; 4. Configure.htaccess untuk membolehkan cache penyemak imbas, dan sambungkan ke CDN untuk meningkatkan kelajuan pemuatan sumber statik; 5. Hadkan semakan artikel dan data yang kerap dibersihkan data yang berlebihan.

    Cara Menggunakan API Transien untuk Caching Cara Menggunakan API Transien untuk Caching Jul 05, 2025 am 12:05 AM

    Transientsapi adalah alat terbina dalam di WordPress untuk menyimpan data tamat tempoh automatik sementara. Fungsi terasnya adalah set_transient, get_transient dan delete_transient. Berbanding dengan OptionsAPI, transien menyokong penetapan masa kelangsungan hidup (TTL), yang sesuai untuk senario seperti hasil permintaan API cache dan data pengkomputeran yang kompleks. Apabila menggunakannya, anda perlu memberi perhatian kepada keunikan penamaan utama dan ruang nama, mekanisme "penghapusan malas" cache, dan isu yang mungkin tidak bertahan dalam persekitaran cache objek. Senario aplikasi biasa termasuk mengurangkan kekerapan permintaan luaran, mengawal irama pelaksanaan kod, dan meningkatkan prestasi pemuatan halaman.

    Cara Mencegah Komen Spam Programatik Cara Mencegah Komen Spam Programatik Jul 08, 2025 am 12:04 AM

    Cara yang paling berkesan untuk mengelakkan spam komen adalah untuk mengenal pasti dan memintasnya secara automatik melalui cara programatik. 1. Menggunakan mekanisme kod pengesahan (seperti Googler Captcha atau HCaptcha) untuk membezakan secara berkesan antara manusia dan robot, terutama yang sesuai untuk laman web awam; 2. Tetapkan bidang tersembunyi (teknologi honeypot), dan gunakan robot untuk mengisi ciri -ciri secara automatik untuk mengenal pasti komen spam tanpa menjejaskan pengalaman pengguna; 3. Semak senarai hitam Kata Kunci Kandungan Komen, maklumat spam penapis melalui pemadanan kata yang sensitif, dan perhatikan untuk mengelakkan salah faham; 4. Hakim kekerapan dan sumber IP komen, hadkan bilangan penyerahan per unit masa dan buat senarai hitam; 5. Gunakan perkhidmatan anti-spam pihak ketiga (seperti Akismet, CloudFlare) untuk meningkatkan ketepatan pengenalan. Boleh berdasarkan laman web

    Cara Menggunakan Plugin Semak Plugin Cara Menggunakan Plugin Semak Plugin Jul 04, 2025 am 01:02 AM

    Plugincheck adalah alat yang membantu pengguna WordPress dengan cepat menyemak keserasian dan prestasi pemalam. Ia digunakan terutamanya untuk mengenal pasti sama ada pemalam yang dipasang pada masa ini mempunyai masalah seperti tidak serasi dengan versi terkini WordPress, kelemahan keselamatan, dan lain-lain. Bagaimana untuk memulakan cek? Selepas pemasangan dan pengaktifan, klik butang "Runascan" di latar belakang untuk mengimbas semua pemalam secara automatik; 2. Laporan ini mengandungi nama pemalam, jenis pengesanan, penerangan masalah dan cadangan penyelesaian, yang memudahkan pengendalian masalah yang serius; 3. Adalah disyorkan untuk menjalankan pemeriksaan sebelum mengemas kini WordPress, apabila keabnormalan laman web tidak normal, atau kerap dijalankan untuk menemui bahaya tersembunyi terlebih dahulu dan mengelakkan masalah utama di masa depan.

    Cara Mengenai Aset untuk Blok Gutenberg Cara Mengenai Aset untuk Blok Gutenberg Jul 09, 2025 am 12:14 AM

    Apabila membangunkan blok gutenberg, kaedah aset enqueue yang betul termasuk: 1. Gunakan daftar_block_type untuk menentukan laluan editor_script, editor_style dan gaya; 2. Daftar sumber melalui wp_register_script dan wp_register_style dalam fungsi.php atau plug-in, dan tetapkan kebergantungan dan versi yang betul; 3. Konfigurasikan alat binaan untuk mengeluarkan format modul yang sesuai dan pastikan laluan itu konsisten; 4. Kawalan logik pemuatan gaya depan melalui add_theme_support atau enqueue_block_assets untuk memastikan logik pemuatan gaya front-end dipastikan.

    Cara menambah medan tersuai kepada pengguna Cara menambah medan tersuai kepada pengguna Jul 06, 2025 am 12:18 AM

    Untuk menambah medan pengguna tersuai, anda perlu memilih kaedah lanjutan mengikut platform dan memberi perhatian kepada pengesahan data dan kawalan kebenaran. Amalan umum termasuk: 1. Gunakan jadual tambahan atau pasangan nilai utama pangkalan data untuk menyimpan maklumat; 2. Tambah kotak input ke hujung depan dan diintegrasikan dengan hujung belakang; 3. Mengatasi Pemeriksaan Format dan Kebenaran Akses untuk Data Sensitif; 4. Kemas kini antara muka dan templat untuk menyokong paparan dan penyuntingan medan baru, sambil mengambil kira penyesuaian mudah alih dan pengalaman pengguna.

    See all articles