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?

node -v
npm -v

Laravel Mix kurulum

npm install

Çalıştırma

// 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)

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

// 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ı

Örnek css dosyalarını bundle etme

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ı

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

Written by

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