Laravel, Vuejs, Gulp

Laravel 5.3 & Vue.js & Gulp & Sass

Merhaba,

Bu yazımda Laravel ve Vue.js’in aynı proje üzerine kurulmasından bahsedeceğim ve biraz da Gulp ve Sass’a değineceğim.

Laravel’in composer ile kurulumunu bu yazımda anlatmıştım. Şimdi ise Vue.js’in bu proje üzerine kurulumundan bahsedeceğim. Ayrıca Gulp ve Sass’ın ne olduğuna ve nasıl yönetileceğine değineceğim.

Laravel 5.3’ü kurduktan sonra (yazıyı yazdığımdaki son stabil sürüm 5.3) Taylor Otwell’in (Laravel’in kurucusu ve geliştiricisi) tavsiye ettiği node modüllerinin package.json dosyasında yazılı geldiğini göreceksiniz. Bunları npm (node package manager) ile indirmemiz gerekmekte. Npm ise kısaca az önce refere ettiğim linkte anlattığım composer’ın javascript için olanı. Yani paketleri ve bağımlılıkları indirebilir, update edebilirsiniz. Npm, composer’ın composer.json’a bakması gibi, package.json içerisine bakar. Npm’i kurmak için şu sayfayı ziyaret edebilirsiniz. Windows’a windows-installer ile Ubuntu’ya ise “sudo apt-get install npm” ile kurulan npm ile package.json dosyasındaki paketleri indirebilmemiz için projemizin bulunduğu klasöre girip

npm install

yazmamız yeterli olacaktır. İndirme işlemi bittiğinde, proje klasörümüzün içinde “node_modules” isimli bir klasör oluşacak ve bu klasörün içinde indirdiğimiz paketleri ve bağımlılıklarını görebileceğiz.

Paketlerin içinde laravel-elixir, gulp ve vuejs olduğunu görmüşsünüzdür. Öncelikle gulp’ın ne olduğundan bahsetmek istiyorum.

Gulp, kullanmak istediğiniz javascript dosyalarını, paketlerini, kütüphanelerini derleyip, projenize katmanızı, tek bir dosya haline getirmenizi veya bir klasörden başka bir klasöre bir şeyleri taşımanızı sağlayan bir paket. Komutları gulpfile.js dosyasına yazılır ve command-line’dan “gulp” komutuyla çalışır. Laravel projelerinde sıklıkla kullanılmaktadır.

Laravel-elixir ise Laravel uygulamanızda kullanacağınız gulp görevlerini daha temiz ve düzenli yazabilmenizi sağlayan bir paket. Örnek olarak şöyle bir kullanımı var.


	elixir(mix => {
		mix.sass('app.scss')
	   		.webpack('app.js');
	});

Burada elixir’e resources/assets/sass klasörü içerisinde bulunan app.scss dosyasını css’e dönüştürmesini ve public/css klasörüne app.css olarak kaydetmesini, resources/assets/js klasöründeki app.js dosyasını pure javascript’e dönüştürmesini ve public/js klasörüne app.js olarak kaydetmesini söyledik. Scss’nin css’e dönüşmesi tamam da, js’nin tekrar js’ye dönüşmesi ne demek? Javascript’in son sürümü olan Ecmascript 6.0’ın browserlar üzerinde desteği ne yazık ki şu an için mevcut değil. Ancak biz resources/assets/js/app.js içinde bunu syntax’ı kullanabiliriz. Laravel-elixir webpack metoduyla bunu desteği devam eden javascript sürümüne çevirmekte.

Şimdi gelelim Vue.js’yi nasıl kullanacağımıza.

Vue.js tekrar-kullanılabilir bileşenler ve data binding kullanarak interaktif web arayüzleri oluşturmamızı sağlayan bir javascript kütüphanesi. Detayına Vuejs dersleri isimli yazı dizimde değineceğim.

Vue.js Laravel ile gelen resources/assets/js/bootstrap.js dosyasında require edilmiş halde gelmekte. app.js içerisine bootstrap’i include ettiğimizde Vuejs’yi kullanmaya başlayabiliriz.

Yine default olarak gelen

Vue.component('example', require('./components/Example.vue'))

satırına bir bakalım. Burada resources/assets/js/components klasörü içindeki Example.vue isimli Vue componentini “example” ismiyle app.js dosyamıza aktardık. Artık bu componenti istediğimiz yerde etiketleriyle kullanabileceğiz. Vuejs’nin detaylarına değinmeyeceğim, çünkü vue.js dersleri adı altında ayrı bir yazı disizi yazmayı planlıyorum.

resources klasöründeki app.scss ve app.js dosyalarımızda işimizi bitirdik ve bunları blade.php dosyamıza gömmek istiyoruz. Az önce bahsettiğim gibi bu iki dosya browserlar tarafından yorumlanamayacağı için bunların pure css ve mevcut sürümlü js’ye dönüştürülmesi gerekiyor. Bir de resources/assets/css/style.css isimli kendi oluşturduğumuz bir css dosyası var diyelim, yanısıra npm ile font-awesome (npm install font-awesome) indirdiğimizi varsayalım. Sonuçta bu saydığım, kullanmak istediğimiz tüm dosyalar ya resources klasöründe ya da node_modules klasöründe. Kullanıcıya sunacağımız bütün dosyaların public klasöründe olması gerekir. Öncelikle app.scss dosyamıza node_modules klasöründeki bootstrap paketini import edelim.

resources/assets/sass/app.scss


@import "node_modules/bootstrap-sass/assets/stylesheets/bootstrap";

gulpfile.js


/* Laravel elixir ve vuejs yorumlayıcısını dahil ediyoruz */
const elixir = require('laravel-elixir');
require('laravel-elixir-vue-2');

elixir(mix => {
/* resources/assets/sass/app.scss ve resources/assets/sass/app.js'yi public/css/app.css ve public/js/app.js olarak derliyoruz. */
mix.sass('app.scss')
   .webpack('app.js');

/* node_modules'teki font-awesome.min.css dosyasını resources/assets/css/ klasörüne kaydediyoruz. */
mix.copy('node_modules/font-awesome/css/font-awesome.min.css', 'resources/assets/css/font-awesome.min.css');

/* kendi yazdığımız style.css dosyasını ve fontawesome dosyasını birleştirip vendor.css dosyası olarak public/css klasörüne kaydediyoruz. */
mix.styles([
	'resources/assets/css/style.css',
	'resources/assets/css/font-awesome.min.css'
], 'public/css/vendor.css');

/* font-awesome.min.css artık public/css'te olacağı için fonts klasörünü de public/fonts olarak kopyalıyoruz */
mix.copy('node_modules/font-awesome/fonts', 'public/fonts');

/* bir sonraki adımda versionlama yapacağımız için public/fonts'u public/build/fonts'a kopyalıyoruz */
mix.copy('public/fonts', 'public/build/fonts');

/* oluşturduğumuz 3 adet dosyayı versionluyoruz. Bu kısmı bir sonraki paragrafta anlattım. */
mix.version(['css/vendor.css','js/app.js', 'css/app.css']);

});

Bazen css ve js dosyalarında yaptığınız değişiklikleri anında görüntüleyemeyebilirsiniz. Ne kadar sayfayı yenileseniz de görünmez ve sizi çıldırtma noktasına gelir. Bunun nedeni browser’ın daha önceden indirmiş olduğu dosyayı belleğe kaydetmesi. Şöyle düşünün

.container{background-color:red;}

yazan bir css dosyanız var. Bu dosyada

.container{background-color:white;}

değişikliği yaptınız. Değişiklik cache’lendiği için .container hala kırmızı gelir. Bunu kendiniz ctrl+shift+R ile giderebilirsiniz. Ama daha önce sitenize girmiş her bir kişiye bunu yapmasını söyleyemezsiniz. O yüzden css dosyalarınızın adını değiştirmek çok iyi bir çözüm. Laravel-elixir bunu mix.version metoduyla sizin için yapıyor. Versionladığınız css ve js dosyalarının isimlerinin sonuna bir öncekiyle aynı olmayan bir sayı kombinasyonu yazar. Böylelikle her yaptığınız değişiklikte dosyanızın adı farklı olacağından browser tekrar bellekleyecek ve değişikliğiniz anında sitenizde görünecektir.

“Ben sürekli dosyanın adını kontrol edip blade.php dosyama mı gireceğim?” diyebilirsiniz. Hayır, girmenize gerek yok.

<link rel="stylesheet" href="{{ elixir('css/vendor.css') }}">
<script src="{{ elixir('js/app.js') }}"></script>

Yazmanız yeterli. Laravel sizin için otomatikman bahsettiğim unique sayıyı dosya isimlerinin sonuna koyar.

Bu yazıyı paylaş

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir