Diyelim ki bu dosya resources/assets/css/app.css olsun. webpack.mix.js dosyasını açıyoruz ve işlemleri ekliyoruz. Bu işlemlerin tümüne pipeline yani boru hattı, tek birine ise pipe yani boru deniyor.
Böyle denmesinin sebebi bu işlemler boru hattındaki borular gibi art arda dizilip bir hat oluşturuyor. Sonra sırasıyla (sync) işleniyor, yani içinden su geçiyor gibi düşünebilirsiniz. Sırayla olması önemli çünkü bir önceki boru bir sonraki boru için gereklidir.
Paralel olarak (async) işlemler de yaptırabiliyorsunuz ama sizi bu konuda bir javascript okyanusu bekliyor. Kafa karıştırmaya gerek yok, başlangıç için şimdilik aşağıdaki yeter.
webpack.mix.js
let mix = require('laravel-mix');
// CSS dosyasını sıkıştırıp public/assets/css/ içerisine app.min.css ismiyle kaydeder
mix.styles('resources/assets/css/app.css', 'public/assets/css/app.min.css');
// Ya da örneğin resources içinde app.css yanında bir de styles.css dosyasını olduğunu düşünün.
// Bunu da app.css ile birleştirip yine tek bir dosya şeklinde public/assets/css/app.min.css olarak kaydetmek istersek
mix.styles(
[
'resources/assets/css/app.css',
'resources/assets/css/styles.css'
],
'public/assets/css/app.min.css'
);
Daha sonra kök dizinde
$ npm run production
şeklinde çalıştırdığınızda webpack.mix.js içerisindeki pipeline işleme konulur.
Dökümanlardaki yeri:
https://laravel.com/docs/5.5/mix
Not: Ne yazık ki zamanla yarıştığım için bu teknolojileri sadece kendi özel projelerimde öğrenmek için deneyebiliyorum, kullanıyorum bile diyemiyorum yani. Gönül isterdi ki rahat rahat çalışıp her şeyi bu şekilde organize halledelim.
Ayrıca Google'un artık PageSpeed değerlerinin de arama sonuçlarını etkilediğini belirttiğini söylemek isterim. O yüzden en azından bu temel birleştirme/sıkıştırma yapılmalıdır, işinize yarayacaktır.