Laravel Mix Kullanımı

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

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
});

--

--

--

Senior Frontend Developer

Love podcasts or audiobooks? Learn on the go with our new app.

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
BZC

BZC

Senior Frontend Developer

More from Medium

How To Build A Custom WordPress Website using Oxygen Builder — Ryan Cassidy

How to set up Laravel with React JS.

Laravel and React Logos.

Icons 8 | Made with Nuxt JS

Icons 8 | Made with Nuxt JS

Removing all Vue dependencies from Laravel in 4 steps