Laravel Webpack ile Watch Browser

Front-end ile çalıştığımız zaman en çok zorlandığımız alanlardan birisidir. Yapmış olduğumuz sass, css ve html değişikliklerini anında görmemiz gerekiyor olabilir. Css ile değişiklik yapıyorsanız eğer bunu “Inspect element” ile daha güzel bir şekilde yapabiliyoruz fakat sass, scss ya da html dosyalarındaki değişiklikleri doğrudan görmek için şimdiye kadar keşfettiğim en iyi yöntem diyebilirim. Neredeyse artık bu eklenti olmadan front-end ile uğraşmaz oldum. Fakat bazı özelleştirilmiş ayarlar var. Bunlardan biraz bahsetmek gerekirse aşağıdaki gibi kurulum ile başlayalım. 

Temiz bir laravel kurulum sonrası “yarn install” komutu ile gerekli ve belirlenmiş bileşenleri yükleyebiliriz. Fakat bu aşamada browserify yüklenmeyecek. webpack.mix.js dosyasına ekleme yapmamız gerekiyor. 

const mix = require('laravel-mix');

/*
|--------------------------------------------------------------------------
| Mix Asset Management
|--------------------------------------------------------------------------
|
| Mix provides a clean, fluent API for defining some Webpack build steps
| for your Laravel application. By default, we are compiling the Sass
| file for the application as well as bundling up all the JS files.
|
*/

mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css');

mix.browserSync({
proxy: 'orneksite.local',
notify: false
});

Proxy olarak tanım yaptığımız satır vhost sayesinde oluşturduğumuz domain. Aynı şekilde hosts dosyasından da böyle bir tanımlama yapıyorum. orneksite.local adresine gittiğim zaman doğrudan çalışma yaptığım siteyi açabiliyorum. Browserify satırı tam olarak belirlemiş olduğumuz domain üzerinden çalışıyor ve sitenizi localhost:3000 olarak size gösteriyor. Notify false olarak karşılamamızın sebebi işletim sisteminin build işi tamamlandığı zaman notification vermesini engellemek için.. Her yaptığınız değişimde bilgisayarınızda bir bildiri görmek istemezsiniz. Bu şekilde sessiz sedasız yapmış olduğunuz değişiklikler siz sayfayı hiç yenilemeden bir kaç saniye içerisinde yenilenmiş olacak. Css ve scss üzerinde yaptığınız değişiklikler ise bir kaç milisaniye içerisinde güncellenmiş oluyor. Fakat html için yeniden render alınması şart olduğu için 1-2 saniye gecikme yaşayabilirsiniz. 

Eklememiz gereken satır sadece aşağıda olduğu gibi…

mix.browserSync({
    proxy: 'orneksite.local',
    notify: false
});

Bu eklemeyi yaptıktan sonra tekrar yarn install komutunu çalıştırmayı unutmayın. Eklemiş olduğunuz satır laravel mix’e nelerin gerekli olduğunu söyleyecek ve bütün eklentiler hızlı bir şekilde yüklenmiş olacak. Çıktısı ise aşağıdaki gibi olması gerekiyor. 

yarn install yükleme aşaması

Bundan sonra yarn watch komutu ile projenizi ayağa kaldırabilir ve canlı olarak yaptığınız değişiklikleri inceleyebilirsiniz. Fakat aşağıdaki gibi bir hata olacak olursanız eğer yeniden yarn install diyerek kurulumu bir defaya mahsus olmak üzere ikinci kez çalıştırmanız gerekiyor. 

Additional dependencies must be installed. This will only take a moment.
warning "laravel-mix > [email protected]" has unmet peer dependency "[email protected]^5.0.0 || ^6.0.0".
warning " > [email protected]" has unmet peer dependency "[email protected]^1 || ^2 || ^3".
Finished. Please run Mix again.

Komut satırını bu şekilde gördükten sonra artık projeniz üzerinde çalışmaya başlayabilirsiniz demektir. Zaten otomatik olarak varsayılan tarayıcınız localhost:3000 adresini açacak ve sitenizi görüntülemeye başlayacaksınız. Bu noktada yaptığınız her html değişikliğinde sayfanızın yenilendiğini görebilirsiniz. Fakat burada tek bir husus var o da yenilenecek sayfanızın <html> tagleri ile başlamış olması gerekiyor. Browserify bu tagleri arayarak gerekli script dosyalarını injection ediyor. Eğer <html> taginiz yoksa yani controller içinde return “deneme”; gibi bir satır çalıştırdıysanız sayfanız yenilenmeyecektir. 

Bu noktadan sonra benim nasıl kullandığımı da belirtmek istiyorum. Çalışmalarımı 3 monitor ile yapıyorum. Ortadaki monitorumu kod yazmak için kullanıyorum. Desktop görünümü için bir monitorumu ayırırken diğer monitorumu gündelik kullanım ya da araştırmalarım için açık tutuyorum. Mobil görünüm için de cep telefonumdan 192.168.1.10:3000 adresine gidiyorum. Tam bu noktada masaüstünde neler görüyorsam wifi bağlantısı üzerinden de telefonuma aktarmış oluyorum. Hatta telefonda ekranı aşağı doğru sürüklersem bunu monitorlerimde de görüyorum. Sayfada bulunan input alanlarını dolduracak olsam bile diğer ekranlarda o input alanı dolmuş oluyor. 

Proje geliştirme aşamasında bu yöntemle kendime hızlı bir önizleme seti hazırlıyorum. Sizin de kullanmanızı tavsiye ederim. Eğer problemle karşılaşırsanız lütfen yorum yazmaktan çekinmeyin. 

Write a Comment