Instalasi laravel-mix pada framwork laravel
hallo semuanya saya ingin berbagi ilmu sedikit tentang instalasi laravel mix pada framework laravel, yang belum tau instalasi laravel bisa klik disi
tutorial ini di kususkan bagi pemula yang ingin menggabungkan laravel dan laravel-mix
Laravel mix merupakan solusi yang mudah digunakan untuk mengelola dan manajement frontend asset dan dapat juga meningkatkan performance web apps,
contohnya css yang di load seperti berikut.
contoh javascript yang di load
nah kedua contoh di atas ini tidak disarankan untuk pengembangan website, karena semakin banyak assets css dan js yang di sisipkan kepada coding kita semakin lambat.
dan ini adalah contoh setelah management assets yang baik karna tidak banyak menyisipkan assets pada coding kita
semua css di bundle menjadi 1 css yaitu app.css
dan javascriptpun sama di bundle menjadi 1 file yaitu app.js
jadi website kita cuman load 2 file yaitu app.css dan app.js
okey paham kan semoga paham yah :D
okey langsung saja ke tutorialnya
pertama kita buat projectnya dulu.
oh iya ini pake node js yah kalau yang belum instal node jsnya silahkan install dulu node jsnya
#Tahap Pertama
laravel new my-website
kemudian jalankan laravelnya
php artisan serve
#Tahap Keudua
instalasi laravel-mixnya
cd my-website
npm init -y
npm install laravel-mix --save-dev
cp node_modules/laravel-mix/setup/webpack.mix.js ./instalasi laravel-mixnya sudah
#Tahap Ketiga
lanjut kita pasang template admin lte versi 3 di laravel kita
langsung download saja di gitnya admin lte disini
kemudian kita pindah ke vscode, lalu kita buat folder namanya themes di dalam resources/view/.
kemudian buat file baru namanya TemplateAdmin.blade.php di dalam folder themesnya
kemudian cari file blank.html di adminlte yang telah tadi anda download
kemudian pindahkan folder dist dan plugin ke folder public
lalu buka terminal lalu php artisan serve
sekarang kita gabungkan file css jadi satu dan file js jadi satu
ubah file webpack.mix.js
const mix = require(‘laravel-mix’);
mix.js(“resources/js/app.js”, “public/js”)
.postCss(“resources/css/app.css”, “public/css”, [])
lalu buat file app.css di folder resources/css/app.css
dan file app.js di folder resources/js/app.js
kemudian pindahin file adminlte.css ke folder resources/css/app.css
nah kalian bisa masukin css apa aja yang dibutuhkan untuk web anda di file app.css nanti di file app.cssnya tambahkan
@import ‘adminlte.css’;
@import ‘fontawesome-free/css/all.css’;
kemudian buka terminal dan ketikan
npm run dev
sekarang kita ke import file jsnya
ubah package.jsonnya seperti ini
kemudian npm install
kemudian edit file jsnya
kemudian buka terminal vscodenya
ketikan
npm run dev
php artisan serve
edit file welcome.blade.php
menjadi seperti berikut
kemudian edit file app.js
kemudian buka terminal vscode
lalu ketikan npm production dan php artisan serve
silahkan yang mau kunjungi git saya takutnya ada yang kelewat atau ada yang kurang bisa di samakan
