Laravel Mix, Laravel projelerinde Frontend Developer işlerini kolaylaştırmak için mutlaka kullanılması gereken bir modüldür. Laravel Mix sayesinde webpack vb araçları kolay bir şekilde kullanabilirsiniz.

Kurulum

Node.js ve NPM kurulu mu?

Laravel Mix kurmadan önce nodejs ve npm kurulu olması gerekmektedir. Aşağıdaki komutlar ile kurulu olup olmadığını kontrol edecebilirsiniz.

Laravel Mix kurulum

Laravel projesi içinde package.json dosyasında gerekli modüller eklenmiş halde gelecektir. Size sadece npm ile gerekli paketlerin kurulumuna başlayabilirsiniz. Aşağıdaki komut ile projenizin ana dizininde terminal ile kurulum yapabilirsiniz.

Çalıştırma

Kurulum bittikten sonra denemek için aşağıdaki komutları kullanın.

Watch (Değişiklikleri İzleme)

Her değişikliğinizde bundle dosyanızı güncellemesi için aşağıdaki kodu kullanabilirsiniz. Kısacası geliştirme yaparken npm run dev yapma iş yükünden kurtulabilirsiniz.

Eğer değişiklileriniz yansımıyorsa aşağıdaki şekilde kullanın.

Projeye paket halindeki js ve css dosyasını çağırmak için

Aşağıdaki şekilde kullanılsanız env prod olan alanda dosyalarınıza version ekleyecektir. Layouts içinde master.blade veya header-footer nereye isterseniz ekleyin.

Webpack.mix.js dosyası

Laravel Mix ayalarınızı yapacağınız dosya webpack.mix.js’dir. Burada kendinize özel ayarlar yaparak kullanacaksınız.

Örnek css dosyalarını bundle etme

Aşağıdaki örnekte iki adet farklı css dosyasını tek css dosyasında birleştirebilirsiniz. Ayrıca config ederseniz css dosyalarınızı minify edecektir. Örnek: css minifier

Büyük projemizde kullandığımız örnek webpack.mix.js dosyası

Örnekte gördüğünüz gibi js dosyalarını birleştiriyor, scss dosyalarını bundle ettiğimiz scss dosyasını ekliyor ve ek olarak diğer css dosyalarını da ekliyor.

Ayrıca node_modules içine font-awesome webfont dosyalarını public klasörümüze otomatik kopyalıyor.

cleanCss ve purifyCss eklentileri ile css dosyalarımızı minify edip yorum satırlarını temizliyor.

Daha detaylı kullanım için resmi siteyi ziyaret edebilirsiniz: https://laravel.com/docs/8.x/mix#working-with-stylesheets

Senior Frontend Developer

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store