Oktay BozacıOktay Bozacı
    Facebook Twitter Instagram
    Oktay BozacıOktay Bozacı
    • Anasayfa
    • bzc.kim?
    • İletişim
    Oktay BozacıOktay Bozacı
    Anasayfa»Genel»Laravel Mix Kullanımı

    Laravel Mix Kullanımı

    Genel 27 Kasım 20204 yorum2 dk okuma süresi31  
    Facebook Twitter Pinterest LinkedIn Tumblr WhatsApp E-Posta Reddit Telegram

    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.

    İçerik Tablosu

    • Kurulum
      • Laravel Mix kurulum
    • Çalıştırma
      • Watch (Değişiklikleri İzleme)
    • Projeye paket halindeki js ve css dosyasını çağırmak için
    • Webpack.mix.js dosyası
      • Örnek css dosyalarını bundle etme
      • Büyük projemizde kullandığımız örnek webpack.mix.js dosyası

    Kurulum

    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

    Mevcut 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.

    Laravel Projesi için:

    npm install

    Herhangi Web Projesi için:

    npm i laravel-mix

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

    Medium

    İlgili Makaleler

    Yazılım Geliştirme 343  

    Appwrite: Açık Kaynak Kodlu Firebase Alternatifi

    Genel 430  

    Pinterest Shadow Ban Sorgulama Aracı

    Genel 29  

    Ubuntu Dock (Rıhtım) Tıklayınca Simge Durumuna Küçültme

    Yazılım Geliştirme 214  

    React Native Kurulumu

    Genel 035  

    Enjeksiyon Baskı Nedir?

    Genel 1470  

    Navimex Android Araç Multimedia İnceleme

    4 yorum

    1. lida on 17 Şubat 2021 16:42

      teşekkürler hocam

      Cevapla
    2. Atakan on 31 Mart 2021 12:39

      Hocam yazınız çok yardımcı oldu. Türkçe kaynaklar içinde en iyisi.

      Cevapla
    3. Sinan on 06 Ekim 2022 19:17

      webpack.mix.js dosyasınının önemini daha yeni anladım. Paylaşım ıcın tesekkurler.

      Cevapla
    4. evissasabun on 25 Ekim 2022 14:58

      Harika olmuş hocam teşekkür ederim.

      Cevapla

    Yorum Yap Vazgeç

    Son Yazılar

    SEO Nedir? Nasıl Yapılır? Neden Önemlidir?

    17 Ekim 2022

    Appwrite: Açık Kaynak Kodlu Firebase Alternatifi

    14 Ekim 2022

    Domain Yaşının SEO’ya Etkisi

    01 Eylül 2022

    Adsense Onay Alma, Adsense Onay İçin Neler Gerekli?

    10 Temmuz 2022

    Cloudflare ile www to non-www 301 Yönlendirme

    18 Ocak 2022

    Laravel Mix Kullanımı

    27 Kasım 2020

    Sitelerinizi Toplu Pingleme Yapabileceğiniz Araçlar

    27 Kasım 2020

    Pinterest Shadow Ban Sorgulama Aracı

    27 Nisan 2020

    Ubuntu Dock (Rıhtım) Tıklayınca Simge Durumuna Küçültme

    01 Ekim 2019

    React Native Kurulumu

    01 Ekim 2019
    Sponsorlar
    hayvanlar.net
    kiztarafi.net
    wmtools.me
    fowtools.com
    Kelime Sayacı
    Radyo Gemisi
    Sinop
    Facebook Twitter Instagram LinkedIn RSS
    © Telif Hakkı 2022, Tüm Hakları Saklıdır | Oktay BOZACI

    Aramak istediğiniz metni yukarıya yazın ve Enter'a basın. Vazgeçmek için Esc.