Nah saya juga sebagai pengguna lama laravel awalnya tidak menyadari kegunaan laravel-mix itu sendiri, itu pun saya tahu secara tidak sengaja melihat video course tutorial Jeffrey way yang menerengkan sedikit tentang laravel mix, nah dari sana saya mulai pingin tahu dan pingin memakai larave-mix dan saya menyadarai kalo fitur itu sayang berguna dan bermanfaat untuk proses development, khusunya memanage asset seperti mengcompile Common CSS, javascript pre-processors dan minifiy asset untuk production dan yang lebih penting bisa untuk membuat sebuah versioning js file kita gan.
Nah kalo menurut saya laravel-mix itu sendiri adalah compiler dan bisa disebut juga sebagai tempat untuk mengatur dan me-ngelola asset file js/css, sala-satu compiler popular seperti gulp dan grunt, lalu tugas dari laravel-mix itu memindahkan semua asset kita yang kita tulis di file webpack.mix.js ke dalam folder public yang nantinya di akses atau diload oleh website yang kita pakai, nah loh ? bukannya engga ada bedanya klo kita taruh langsung file js/css nya di public seperti hal yang saya lakukan pada projek2 aplikasi sebelumnya ? hehe, nah itulah yang terpikirkan oleh saya kenapa harus begitu, dan setelah saya mengimplementasikan laravel-mix itu pada aplikasi yang saya develop, saya baru menyadari manfaatnya apa, dan skrng saya lebih memilih untuk menggunakan laravel-mix ketimbang menaruh langsung file js/css di public folder.
Kenapa saya merubah penempatan asset js/css ? ya karena si laravel-mix ini :D, bukti sederhana yang membuat saya jatuh cinta pada laravel-mix itu adalah fitur
Minify
Minify asset itu sangat penting dilakukan jika website sudah ada di tahan production, karena itu membuat load asset menjadi lebih cepat sehingga load website kita bisa di optimasi dari sana, dan saya sering lihat di website-website besar file js/css selalu dalam keadaan minify,
Versioning file
Awalnya saya tidak tahu apa itu versioning, saya tahu manfaat versioning ketika saya menghadapi kasus dimana file js/css tidak berubah kodenya di web browser walaupun di code file js/css sudah saya rubah, kenapa kok bisa gitu ? karena ada cache di browser yang membuat code file js/css kita tidak terload secara up to date, dan harus kita lakukan clear cache dulu baru file js/css kita akan sama dengan yang aslinya (up to date), nah untuk meresolve kasus itu maka ada yang namanya versioning nama file di js/css yang kita buat :D, tujuannya ya itu untuk menghindari tidak terupdatenya file js/css karena cache browser.
Compiler Common CSS dan Javacsript pre-processor
Mungkin sebagai orang tidak tahu apa itu compiler Common CSS dan Javascript pre-processor, yang saya tahu dari pengalaman, saya pernah menggunakan SASS sala-satu preprosessing CSS lalu jika anda sudah familiar Typescript, CoffeScript yang merupakan preprosessing Javascript terkenal dan sudah banyak dipakai. nah laravel-mix memiliki kegunaan untuk mengolah hal semacam itu.
Nah setelah kita membahas sedikit tentang laravel-mix maka disini saya akan memberikan tutorial sederhana bagaimana cara memakai laravel-mix, sebelum saya mulai maka siapkan peralatan tempur terlebih dahulu yaitu
- Laravel => jika blm install bisa kesini install laravel
- Node
- NPM (Node Package Manager)
Saya asumsikan kalian sudah menginstall semua depedensi yang diperlukan untuk menjalankan laravel-mix, lalu
Langkah Pertama install laravel-mix dengan mengetikan perintah ini didalam terminal dan dialam direktori root laravel kita
npm installLalu jika sudah selesai maka kita langsung membuat satu file, klo disini saya membuat file js dan taruh file itu di folder resource/asset/js, ingat jangan di folder public :D,
touch resources/assets/js/simple.jsLalu daftarkan file js kita di folder webpack.mix.js
Jika sudah begitu maka buka terminal dan jalankan perintah ini
npm run dev
Nah jika sudah seperti itu maka file simpe.js yang kita buat sudah berada di folder public.
Lalu jika kita ingin meminify file js kita, jalankan perintah ini diterminal
npm run productionLalu jalankan perintah npm run dev atau npm run production di terminal maka laravel-mix akan mencompile filejs yang tdi kita dengan nama yang sedikit berbeda.
Lalu untuk menload js yang kita buat, kita bisa menggunakan helper laravel bernama mix
Nah gan kurang lebih begitu cara menggunakan laravel-mix, untuk dokumentasi lebih lengkap bisa meluncur langsung ke website laravel mix
Sekian post dari saya, semoga bermanfaat :D
