lifelong learner — urip iku urup, currently working on accenture.

Cara disable twig, js dan css cache pada drupal 8 untuk development

0
Degananda.com -

Jika anda sedang mengembangkan aplikasi drupal dan melakukan perubahan pada template (twig) , css ataupun javascript maka akan sangat repot jika harus melakukan clear cache setiap terjadi perubahan. Clear cache setiap perubahan baik manual ataupun menggunakan bantuan drush sangat tidak direkomendasikan dalam melakukan pengembangan aplikasi drupal.

Oleh karena itu biasannya saat kita sedang dalam fase produksi yang dilakukan adalah mematikan cache. Pada drupal 8 untuk mematikan cache kita memerlukan beberapa tools. Ini adalah cara yang biasannya kami lakukan.

Tools yang dibutuhkan adalah

  1. drupal console
  2. browser

langkah – langkah disable cache pada drupal 8

1. Download dan install composer

pertama lakukan download drupal console dengan menggunakan composer. Jika anda belum memiliki composer silahkan lakukan install terlebih dahulu.

https://getcomposer.org/download/

setelah composer terinstall pada global ataupun local project maka kita siap untuk mengunduh dan menginstall drupal console pada project drupal. Sebelum itu disini kami menggunakan drupal versi 8.3.2 seharusnya tidak akan ada masalah jika anda menggunakan versi manapun.

2. Install dropal console pada project drupal

Silahkan buka terminal atau microsoft power shell (jika anda menggunakan windows) dan arahkan ke direktori drupal anda kemudian jalankan perintah dibawah ini.

composer require drupal/console:~1.0 --prefer-dist --optimize-autoloader --sort-packages

perintah diatas akan melakukan install drupal console dilocal project drupal kita yang secara otomatis akan melakukan update terhadap composer.json terkait depedenciesnya.

kita telah berada pada direktori project drupal kita. kemudian jalankan perintah diatas tunggu hingga proses download dan install drupal console selesai.

3. Konfigurasi drupal local development

3.1 Buat file settings dan matikan cache

lakukan copy sites/example.settings.local.php ke sites/default/settings.local.php

kemudian uncomment (jika memang belum ter uncomment) kode-kode dibawah ini

$settings['container_yamls'][] = DRUPAL_ROOT . '/sites/development.services.yml';
$settings['cache']['bins']['render'] = 'cache.backend.null';
$settings['cache']['bins']['dynamic_page_cache'] = 'cache.backend.null';

kemudian pastikan preprocess untuk javascript dan css adalah false (masih pada file sites/default/settings.local.php)

$config['system.performance']['css']['preprocess'] = FALSE;
$config['system.performance']['js']['preprocess'] = FALSE;

3.2 buka sites/default/settings.php

lakukan uncomment terhadap line dibawah ini tujuannya agar drupal dapat menggunakan settings.local.php yang baru saja kita ubah isinnya.

if (file_exists($app_root . '/' . $site_path . '/settings.local.php')) {
  include $app_root . '/' . $site_path . '/settings.local.php';
}

3.3 buka sites/development.services.yml

dan pastikan isinnya seperti berikut ini

parameters:
  http.response.debug_cacheability_headers: true
  twig.config:
    debug: true
    auto_reload: true
    cache: false
services:
  cache.backend.null:
    class: Drupal\Core\Cache\NullBackendFactory

sebenarnya kita hanya menambahkan empat baris dibawah ini. Kode diatas adalah nilai ahir dari development.services.yml

  twig.config:
    debug: true
    auto_reload: true
    cache: false

done. Kita telah melakukan konfigurasi local development pada drupal.

4. pindah development.services.yml menjadi services.yml

copy sites/development.services.yml ke ke sites/default/services.yml (rename menjadi services.yml)

5. berikan permission execute pada services.yml

jika anda menggunakan mac / linux maka berikan permission agar services.yml dapat dieksekusi nantinnya oleh drupal console.

sudo chmod +x services.yml

hasil pemissionnya adalah sebagai berikut ini

6. Disable preprocessing

selanjutnya disable preprocess terhadap file js atau css pada file info.yml contohnya seperti dibawah ini

fleet-create:  
  css:
    theme:
      css/create-fleet.css: {}
  js:
      js/custom.js: { preprocess: false }
  dependencies:
    - core/jquery 
    - core/jquery.once  

7. ubah mode ke dev.

sekarang kita telah siap menggunakan drupal console untuk mengubah mode ke development. Perintah yang digunakan adalah

drupal site:mode dev

jika telah siap untuk menjadikan versi produksi gunakan

drupal site:mode prod

tunggu hingga proses pengubahan menjadi mode dev selesai

7. Clear cache pada browser

langkah melakukan clear cache sesuaikan dengan browser yang anda gunakan.

DONE! jika anda tidak melewatkan satu langkah pun serta tidak ada proses installasi yang gagal sekarang sudah tidak ada cache terhadap file

  1. twig
  2. js
  3. css