Apa Itu Laravel Mix

Untuk sebagian developer pasti sudah mengenal apa itu laravel-mix dan apa itu fungsi dan manfaatnya, tapi untuk sebagian developer juga pasti tidak mengenal apa itu laravel-mix dan apa sih fungsinya ?

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 install

Perintah diatas berguna untuk mendowload semua depedensi laravel-mix yang sudah di atur di package.json yang ada di folder laravel.

Lalu 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.js

Jika sudah dibuat maka buat simple kode sederhana di dalam file tersebut


Lalu daftarkan file js kita di folder webpack.mix.js

Jika sudah begitu maka buka terminal dan jalankan perintah ini

npm run dev

Maka outputnya akan kurang lebih akan seperti ini

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 production

Lalu jika kita ingin memberikan versioning difilejs kita maka tambahkan code ini di webpack.mix.js



Lalu 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