Laravel Mix Kullanımı

Laravel Mix, Laravel projelerinde Frontend Developer işlerini kolaylaştırmak için kullanılır. Sitede kullanılan JS ve CSS dosyalarının bundle haline getirilmesini sağlar. Sass, Scss ile 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.

node -v
npm -v

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.

npm install

Çalıştırma

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

// Developer ortamı için çalıştırma için
npm run dev

// Production ortamı için çalıştırmak için
npm run production

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.

npm run watch

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

npm run watch-poll

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.

// app.css
@if (config('app.env') == 'prod' )
<link rel="stylesheet" href="{{asset(mix('css/app.css'), true)}}">    @else
<link rel="stylesheet" href="{{asset(mix('css/app.css'))}}">    @endif
// app.js
@if (config('app.env') == 'prod')
<script src="{{asset(mix('js/app.js'), true)}}"></script>
@else
<script src="{{asset(mix('js/app.js'))}}"></script>    @endif

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

mix.styles([
    'public/css/vendor/normalize.css',
    'public/css/vendor/videojs.css'
], 'public/css/all.css');

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.

mix = require('laravel-mix');
mix.scripts([
    'node_modules/bootstrap/dist/js/bootstrap.js',
    'node_modules/select2/dist/js/select2.full.min.js',
    'node_modules/jquery-validation/dist/jquery.validate.js',
    'node_modules/jquery-validation/dist/additional-methods.js',
    'node_modules/lightgallery/dist/js/lightgallery.min.js',
    'node_modules/datatables/media/js/jquery.dataTables.min.js',
], 'public/js/app.js')
    .sass('public/css/scss/bundle.scss', 'public/css/scss')
    .styles([
        'node_modules/bootstrap/dist/css/bootstrap.css',
        'public/css/aos.css',
        'node_modules/animate.css/animate.css',
        'public/lib/owlcarousel/assets/owl.carousel.min.css',
        'public/css/select2.min.css',
        'public/css/scss/bundle.css',
    ], 'public/css/app.css')
.copy('node_modules/@fortawesome/fontawesome-free/webfonts', 'public/webfonts')
    .copy('node_modules/lightgallery/dist/fonts', 'public/fonts')
    .version()
    .options({
        cleanCss: {
            level: {
                1: {
                    specialComments: 'none'
                }
            }
        },
        purifyCss: true
    });

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