Bagaimana Anda menghindari caching selama pengembangan?

Apakah ada cara sederhana yang mencegah semua caching saat menguji penampilan perubahan ke situs? Saya menggunakan WP Super Cache. Saya dapat menghapus cache-nya menggunakan opsi yang disediakan, menghapus cache untuk browser saya, dan masih ada beberapa perubahan pada css atau widget yang tidak di-refresh. Saya mencoba work-arounds lainnya seperti berpindah browser atau komputer, tetapi harus ada alur kerja yang lebih stream-stream di mana saya dapat memastikan saya melihat perubahan yang saya buat dan bukan beberapa format sebelumnya di-cache? Apa solusi terbaik untuk ini?

Tambahkan filemtime()stylesheet Anda sebagai parameter versi. Katakanlah, stylesheet default Anda ada di css/default.cssdan css/default.min.css( tidakstyle.css ). Ketika kami mendaftarkan stylesheet aktif wp_loaded( tidakinit ), kami dapat mengirimkan versi sebagai parameter keempat. Itu akan menjadi waktu modifikasi terakhir dan karenanya berubah setiap kali kami mengubah file.

$min    = WP_DEBUG ? '': '.min';
$file   = "/css/default$min.css";
$url    = get_template_directory_uri() . $file;
$path   = get_template_directory() . $file;
$handle = get_stylesheet() . '-default';

// Overridden?
if ( is_child_theme() && is_readable( get_stylesheet_directory() . $file ) )
{
    $url  = get_stylesheet_directory_uri() . $file;
    $path = get_stylesheet_directory()     . $file;
}

$modified = filemtime( $path );

add_action( 'wp_loaded', function() use ( $handle, $url, $modified ) {
    wp_register_style( $handle, $url, [], $modified );
});

add_action( 'wp_enqueue_scripts', function() use ( $handle ) {
    wp_enqueue_style( $handle );
});

Jika Anda menggunakan Node.js dan Grunt, saya sangat merekomendasikan Browsersync . Ini akan menonton file Anda dan memperbaruinya secara instan setiap kali mereka berubah. Itu juga dapat menyinkronkan posisi gulir, pengiriman formulir dan banyak lagi di beberapa browser terbuka. Sangat keren.

Setelah mencari solusi sederhana berkali-kali saya memutuskan untuk menemukan sesuatu yang berfungsi!

jadi ... setelah memikirkannya, saya menemukan cara yang bagus untuk mengganti caching sambil mengembangkan situs web baru ... (dan mudah).

Yang kita butuhkan adalah memberi tahu wp bahwa ini adalah versi CSS baru seperti ini ...

Sebelum perubahan:

wp_enqueue_style( 'maincss', get_template_directory_uri() . '/css/style.css', array(), false, 'all' );

Setelah perubahan:

wp_enqueue_style( 'maincss', get_template_directory_uri() . '/css/style.css?v='.time(), array(), false, 'all' );

Inilah yang kami tambahkan:

?v='.time()

Penjelasan:
Kami pada dasarnya menambahkan nomor versi dinamis ke file css yang memaksa browser untuk memuat css baru setiap kali kami memperbaruinya.

Jangan lupa untuk menghapusnya setelah Anda selesai mengembangkannya jika tidak, caching Anda tidak akan berfungsi untuk file ini dan itu akan dimuat untuk pengguna yang kembali berulang kali.

Teknik ini berfungsi untuk file css & js - semoga ini membantu;)

Ini mungkin tampak terlalu sederhana, tetapi bagaimana dengan hanya menonaktifkan caching sampai Anda selesai dengan bagian pengembangan situs Anda? Lebih mudah untuk dihidupkan dan dimatikan.

Saya tahu bahwa pertanyaan ini telah menerima jawaban, tetapi saya pikir jawaban itu masih terlalu rumit untuk masalah yang ada, dan mungkin sebenarnya tidak benar tergantung pada pengguna (jangan tersinggung meskipun), jadi saya pikir saya masih akan membagikan bagaimana saya melewati caching ketika saya melakukan dev (bukan hanya dengan Wordpress).

Sebagian besar browser modern memiliki sesuatu yang disebut mode penyamaran . Dalam mode ini, tidak ada apa pun di komputer Anda yang di-cache, sehingga setiap penyegaran adalah pengunduhan dari server. Di Internet Explorer Anda menekan Ctrl + Shift + P. Di Firefox dan Chrome, Anda menekan Ctrl + Shift + N.

Jika browser Anda tidak memiliki mode penyamaran, Anda biasanya dapat memaksa pemuatan ulang dengan menekan Ctrl + F5untuk IE, atau Ctrl + Shift + Rdi Firefox dan Chrome.

Adapun pertanyaan Anda tentang file CSS (dan pada dasarnya, semua file aset Anda, seperti gambar dan file Javascript), itu tidak di-cache dengan cara apa pun oleh WP Super Cache. Pengaturan dan / atau penggunaan plugin ini tidak memengaruhi cara file-file tersebut disajikan. Apa caching file-file itu adalah browser Anda , dan itulah alasan mengapa Anda melakukan pemuatan ulang yang sulit.

Apa yang dilakukan plugin adalah mengevaluasi bagaimana Wordpress membangun file HTML Anda (melalui PHP), dan menyimpan salinan, sehingga saat berikutnya seseorang meminta postingan yang sama, halaman, atau apa pun, itu melayani salinan, dan tidak perlu mengevaluasi kembali HTML yang dihasilkan PHP lagi, dan karenanya menghemat waktu komputasi, memuat halaman Anda lebih cepat. (Saya harap itu jelas.)

Masalahnya adalah, jika Anda menampar timestamp di URL file CSS Anda melalui fungsi PHP, itu adalah evaluasi PHP ke HTML, dan itu akan di -cache oleh WP Super Cache. Setiap permintaan ke pos yang sama akan memiliki stempel waktu yang sama karena pengguna dilayani salinan evaluasi stempel waktu asli. (Koreksi saya jika saya salah.)

Cara yang benar untuk caching memotong WP Super Cache adalah untuk menetapkan pilihan Don't cache for known usersuntuk truedi halaman pengaturan plugin.

Akhirnya (dan ini adalah preferensi pribadi, karena saya benar-benar ngotot dalam hal pengkodean), beralih ke penggunaan penyamaran atau pemuatan ulang paksa tidak akan mengharuskan Anda untuk menambahkan markup yang tidak perlu pada halaman HTML Anda. Tentu saja, menambahkan stempel waktu hanya menambahkan sekitar 13 byte per file statis per permintaan, tapi hei, seperti yang saya katakan, saya ngotot untuk hal semacam ini. Masih 13 byte tidak perlu.

Astaga, banyak cara untuk menjawab yang satu ini! Pertama dan terpenting, Anda bertanya tentang dua hal berbeda: WP Super Cache dan file CSS. Ini di-cache secara berbeda, di tempat yang berbeda, jadi penting untuk mengenali di mana masalah Anda.

Jika WP Super Cache, Anda dapat menentukan konstanta DONOTCACHEPAGEdi functions.php Anda selama pengembangan untuk mencegah WP Super Cache dari caching apa pun. Jangan lupa untuk menghapus ini saat diluncurkan!

define('DONOTCACHEPAGE', true);

Setiap situs juga memiliki kunci unik untuk menambahkan URL untuk memuat versi halaman baru, yang dapat Anda temukan di tab "Advanced", saya percaya.

Memecahnya menjadi solusi yang lebih baik lagi, Anda harus mempertimbangkan pengaturan lingkungan pengembangan dan lingkungan produksi, di mana lingkungan pengembangan Anda tidak mengaktifkan WP Super Cache (sekali lagi, dengan asumsi itu masalah Anda).

Jika masalah Anda adalah pada file CSS / JS, lihat jawaban oleh toscho dan komentar selanjutnya oleh m0r7if3r di atas.

HyperCache menonaktifkan caching ketika Anda login sebagai admin. Tidak yakin apakah WP Super Cache memiliki fungsi yang sama.

Jika Anda menggunakan Chrome (yang sangat saya sarankan), buka Inspektur, klik ikon pengaturan di sudut kanan bawah, dan di bawah "Jaringan" pilih "Nonaktifkan Cache."

Seperti yang dikatakan untuk wp super cache, tetapi untuk caching WP umum di wp-config.php Ubah ke ini:

define( 'WP_CACHE', false );

Referensi: codex.wordpress.org

Anda dapat menggunakan potongan ini https://gist.github.com/jhayiwg/92bae4330aeb738a98022d7ab63ce9b1

Ini akan menghasilkan versi baru css dan js tema aktif Anda setiap kali Anda memuat halaman