Laravel'in bize sağladığı kolaylıklardan bir tanesi de laravel-mix. Nedir bu laravel-mix ve ne işimize yarar ? Laravel mix ile css, sass, less ve js gibi dosyalarımızı tek parça haline getirebiliyoruz ve aynı zamanda bunları minify edebiliyoruz. Örnek verecek olursam sitede çektiğimiz 2 farklı css dosyası bu şekilde düşünelim.

<link rel="stylesheet" type="text/css" href="test.css">
<link rel="stylesheet" type="text/css" href="test2.css">

Burada 2 farklı dosyayı çekmek hem performans, hem de kullanılabilirlik açısından zayıf görünüyor. laravel-mix kullandığımız zaman bu 2 farklı css dosyası tek dosya haline gelip daha yönetilebilir ve daha performanslı bir css çıktısı almış oluyoruz.


Şimdi gelelim laravel-mix'i nasıl kullanacağımıza.


Gereklilikler : NodeJs (bilgisayarımızda node.js in kurulu olması gerekiyor)


  1. İlk olarak konsol üzerinden node ve npm sürümlerimizi kontrol edelim
node -v    (node js sürümünü gösterir)
npm -v     (node package manager sürümünü gösterir)

Bilgisayarımızda node.js in yüklü olduğunu kabul ederek işlemlerimize devam edelim.

Öncelikle konsol üzerinden npm install diyerek laravel-mix paketinin yüklenmesini sağlayalım. Ön tanımlı olarak zaten proje dosyasının içinde (package.json) laravel-mix bulunmaktadır.

Npm paketlerinin yüklenme işlemi bittikten sonra, laravelin ana proje dizininde bulunan webpack.mix.js isimli dosyayı açalım.

burada varsayılan olarak karşımıza şöyle bir ekran gelecektir.

Burada Laravel ile birlikte gelen dosyaların ön tanımlı hali bulunmaktadır. Şuan bizim bu dosyalar ile temel olarak bir işlemimizi olmayacağı için bunları es geçerek buradaki dosyaları siliyorum ve onun yerine örnek olarak belirteceğim css dosyasını ekliyorum.

  • mix.js (js dosyalarını birleştirmemizi sağlar)
  • mix.sass (sass dosyalarını birleştirmemizi sağlar)
  • mix.styles (css dosyalarını birleştirmemizi sağlar)

Örnekte css dosyalarını birleştirmeyi göstereceğim.

benim public/css/ klasörü altında iki adet css dosyam bulunmakta.


// test.css içeriği 

.customTitle{
    color:white;
}



// test2.css içeriği

.customTitle{
    background-color: green;
}


Bu 2 css dosyasını laravel-mix kullanarak birleştireceğim, örnek olarak boş bir view sayfası açıp herhangi bir routeumu buraya yönlendiriyorum.

View dosyam şuan bu şekilde


Şimdi bu 2 farklı dosyayı laravel-mix kullanarak birleştirelim. webpack.mix.js dosyamızı açalım. Az önce kullanmayacağımız alanı silmiş varsayarak yeni alanlarımı ekleyeyim.


Burada altını çizdiğim alan almak istediğimiz çıktının ismi ve yolunu belirtmekte.

Ondan önceki array'de ise sırası ile css dosyalarımın tam yolunu belirttim.

Bu işlemi aynı şekilde js için de yapabiliyoruz. Bu işlemi yaptıktan sonra 

npm run dev

diyerek işlemimizi başlatalım, işlemimiz bittikten sonra public/ dizini altında build.css dosyamızın oluştuğunu göreceksiniz. Windows bilgisayarlarda bu işlem bittikten sonra bildirim geliyor.


Şimdi build.css e bir göz atalım.


Gördüğünüz gibi yazdığım sıra ile iki farklı yaptığım işlem görünüyor. Aynı işlemi 

npm run production

olarak yaptığımda ise build.css bize sıkıştırılmış olarak geliyor. Böylece sitemizde ayrıca bir sıkıştırma işlemi yapmamız gerekmiyor. Bu işlemden sonra oluşturduğum view dosyamdaki test.css ve test2.css olan satırı kaldırıp sadece bunu ekleyebilirim.


İşte view dosyamın güncel hali.



İyi çalışmalar.