# Laravel Mix ile varlık derlemeyi basitleştirmek

> Laravel Mix, Webpack yapılandırması yazmadan JavaScript ve CSS varlıklarını derlemenizi sağlayan akıcı bir API sunuyor.

- Yayın: 2017-05-07
- Kategori: Araçlar & Teknolojiler
- Etiketler: Laravel
- Okuma süresi: 3 dk okuma
- Kaynak: https://www.muhammetsafak.com.tr/blog/laravel-mix-ile-varlik-derlemeyi-basitlestirmek/
- Dil: tr-TR
- Yazar: Muhammet Şafak

---
Webpack öğrenmeye çalışanların çoğu aynı noktada takılır: yapılandırma dosyası. Loader'lar, plugin'ler, resolve kuralları... Her şey ayarlanabilir ama bu esnekliğin bedeli, her yeni proje için saatler harcanan bir `webpack.config.js` olabiliyor. Laravel Mix bu karmaşıklığı görünmez kılmak için var.

**Laravel Mix**, [Webpack](/blog/webpack-e-gecis-gulp-tan-modul-paketlemeye) üzerine kurulu, fluent bir API sağlayan bir araç. Jeffrey Way tarafından Laravel ekosistemi için geliştirildi ama Laravel bağımlılığı yok; isteyen her Node.js projesinde kullanabilir. 2016'da Laravel 5.4 ile birlikte varsayılan varlık derleme aracı oldu.

## Kurulum

Laravel 5.4 ile gelen `package.json` dosyasında Mix zaten mevcut. Gerekli paketleri yüklemek için:

```bash
npm install
```

Bu kadar. Webpack bağımlılıkları dahil her şey geliyor.

## webpack.mix.js

Yapılandırma `webpack.mix.js` dosyasında yapılıyor. En basit hali:

```javascript
const mix = require('laravel-mix');

mix.js('resources/assets/js/app.js', 'public/js')
   .sass('resources/assets/sass/app.scss', 'public/css');
```

Bu iki satır şunları yapıyor: `app.js` dosyasını Webpack ile derleyip `public/js/app.js` olarak çıkarıyor, `app.scss` dosyasını Sass (SCSS) derleyicisiyle işleyip `public/css/app.css` olarak üretiyor. Ayrıca CSS ve JavaScript için otomatik olarak vendor prefix ekleniyor.

## Geliştirme ve üretim modu

`package.json` içinde hazır komutlar geliyor:

```bash
npm run dev      # Geliştirme için derle (kaynak haritaları dahil)
npm run watch    # Dosya değişikliklerini izle ve otomatik derle
npm run production  # Küçültülmüş, üretim için derle
```

`npm run production` ile çıktı dosyaları minify ediliyor ve bir hash ekleniyor. Cache busting'i Mix kendi hallediyor; derlenen dosyanın adına otomatik sürüm eki ekliyor.

`npm run watch` geliştirme döngüsünde çok kullanışlı. Bir SCSS dosyasını kaydettiğinizde Mix hemen yeniden derliyor. Webpack'i her değişiklikte elle tetikleme zahmetinden kurtarıyor.

## Versiyon ekleme

```javascript
mix.js('resources/assets/js/app.js', 'public/js')
   .sass('resources/assets/sass/app.scss', 'public/css')
   .version();
```

Blade şablonunda da `mix()` yardımcısıyla doğru URL'i almak yeterli:

```blade
<script src="{{ mix('js/app.js') }}"></script>
<link rel="stylesheet" href="{{ mix('css/app.css') }}">
```

Böylece tarayıcı her dağıtımda güncel dosyayı çekiyor; eski önbellek sorunu ortadan kalkıyor.

`mix()` yardımcısı arka planda `public/mix-manifest.json` dosyasına bakıyor. Bu dosya her derlemede güncelleniyor ve hangi dosyanın hangi hash'li sürümüne karşılık geldiğini tutuyor. Yani Blade şablonunda her zaman `mix('js/app.js')` yazıyorsunuz, gerçek URL'i Mix hallediyor.

## Vue tek dosya bileşenleri

`.vue` uzantılı Vue bileşenlerini derlemek için ek yapılandırma gerekmez; Mix bunu kutudan çıktığı gibi destekliyor:

```javascript
mix.js('resources/assets/js/app.js', 'public/js');
// app.js içinde .vue bileşenleri import edilebilir
```

Vue loader kurulumu, Babel transpiling, kaynak haritaları — hepsi arka planda halloluyor.

Bu Mix'in gerçekten parladığı yer. Webpack ile `.vue` dosyası derlemek için `vue-loader`, `vue-template-compiler` ve Babel yapılandırması gerekirdi. Mix tüm bunları tek satıra indirdi. Yeni bir projede Vue kullanmaya karar verdiğimde ekstra yapılandırma yapmak zorunda kalmadım.

## Birden fazla çıktı dosyası

Mix tek bir giriş dosyasıyla sınırlı değil. Farklı sayfalar için farklı JavaScript paketleri oluşturabilirsiniz:

```javascript
mix.js('resources/assets/js/app.js', 'public/js')
   .js('resources/assets/js/admin.js', 'public/js')
   .sass('resources/assets/sass/app.scss', 'public/css')
   .sass('resources/assets/sass/admin.scss', 'public/css');
```

Admin paneli ve genel kullanıcı arayüzünün JavaScript'ini ayırmak, kullanıcıların ihtiyaç duymadıkları admin kodunu indirmemesini sağlıyor. Bu bölme kararını Mix kolay kılıyor; ayrı Webpack konfigürasyonları yazmak gerekmedi.

## Browsersync

Geliştirme sırasında tarayıcıyı otomatik yenilemek için:

```javascript
mix.browserSync('myapp.test');
```

Bu, dosya değişikliğinde tarayıcıyı otomatik yeniliyor. [Laravel Homestead](/blog/laravel-homestead-ile-herkeste-ayni-gelistirme-ortami) ile birlikte kullanınca geliştirme döngüsü gerçekten hızlanıyor.

## Webpack ile doğrudan karşılaştırma

Mix her şeyi soyutladığı için nadiren `webpack.config.js` açmak gerekiyor. Ama ihtiyaç duyulan durumlarda `mix.webpackConfig({})` ile Webpack yapılandırmasına müdahale etmek mümkün. Tam kontrol istendiğinde bu kapı açık.

Bir projede "sadece SCSS derle ve JS'i bundle et" ihtiyacının ötesine geçmedim. Mix bu senaryo için fazlasıyla yeterli. Zamanımın Webpack belgelerini okumak yerine asıl işe harcandığı her projeye değer katıyor.