Laravel’de Asset Yönetimi (CSS ve JavaScript dosyalarını import etmek)

Başlık her ne kadar Laravel dese de bu yazının içeriği aslında tüm PHP projelerinde ve yazının mantığı tüm web programlama dillerinde kullanılabilir.

Ne demek istiyor bu başlık? Asset dediğimiz şey bildiğimiz CSS ve JavaScript dosyaları gibi front-endde import ettiğimiz dosyaların İngilizce ismi. Burada anlatacağım şey de bu dosyaları HTML ile import ederken duyulabilecek bir takım endişeleri ortadan kaldırmak ile ilgili. Mesela bu assetleri birden fazla import etmememiz gerekiyor. Ayrıca bootstrap.css dosyasını her kullanmak istediğinizde bu dosyanın yolunu yazıp blade dosyanızın içine mi ekleyeceksiniz? İşte bu yazıda bu gibi sorunlara nasıl kolay bir çözüm getirebiliriz onu anlatacağım.

Öncelikle referanslarımızı verelim. Anlatacağım fikri SleepingOwl Admin paketinde gördüm ve çok beğendim. Daha sonra biraz daha geliştirerek tüm projelerde kullanmaya başladım. Eminim öğrendikten sonra siz de bu şekilde yapmaya başlayacaksınız.

Yapacağımız şey aslında bir sınıf oluşturmak ve assetlerimizi bu sınıf yardımıyla yönetmek. Oluşturacağımız sınıfın adı MyAssetManager olsun. Sınıfımıza birkaç tane static array ekleyeceğiz. Bunlar da scripts ve styles olsun. scripts değişkeni ekleyeceğimiz JavaScript dosyalarını, styles da CSS dosyalarını tutacak.

Şimdi de script ve stil dosyalarını eklemek için birer metod oluşturalım:

Assetleri almak istediğimizde de işleri bizim için kolaylaştıracak bir asset metodu oluşturalım:

Bu metod $assets dizisinde birden fazla bulunan anahtarları çıkarıyor ve bu anahtarları (eklenen CSS ve JavaScript dosyaları) tam yolları ile değiştiriyor. Bu metod sayesinde CSS ve JavaScript dosyalarını eklerken dosyaların tam yolunu yazmak zorunda kalmayacağız. Mesela public/bower_components/bootstrap/dist/css/bootstrap.min.css dosyasını eklemek için tek yapmamız gereken  static::addStyle('bower::bootstrap/dist/css/bootstrap.min.css'); . public/css klasöründeki stil dosyalarını eklerken css::dosya.csspublic/js klasöründeki scriptleri eklerken de js::dosya.js diyebilirsiniz. Bu kısayolları çoğaltabilirsiniz.

Bir şeyleri hardcode etmemek ve işleri biraz daha kolaylaştırmak için de, yine bootstrap üzerinden gidelim, sınıfımıza şöyle bir metod ekleyebiliriz:

Artık bootstrapi eklemek için tek yapmamız gereken  MyAssetManager::addBootstrap(); demek. Böylece tek seferde bootstrap için gereken tüm importları eklemiş olduk.

Eklediğiniz assetleri HTML ile import etmek

Şu ana kadar JavaScript ve CSS dosyalarını kolay bir şekilde ekleyebileceğimiz ve eklenen bu dosyaları unique bir şekilde alabileceğimiz bir metod içeren bir sınıf oluşturduk. Peki eklenen bu dosyaları nasıl import edeceğiz?

Scriptler ve stil dosyalarını alabilmek için öncelikle birer metod oluşturalım:

CSS dosyalarını eklemek için <head>in bulunduğu blade dosyamızı açıyoruz ve head etiketini kapatmadan önce şunu yazıyoruz:

JavaScript dosyaları için de <body> etiketini kapatmadan önce şunu yazıyoruz:

CSS ve JavaScript dosyalarını nasıl eklemeliyim?

Importları controllerlarınızın içerisinde ekleyebilirsiniz. Önemli olan HTML render edilmeden önce eklemek. Buna dikkat ettiğiniz sürece bir problem olmayacaktır. Bir örnek vermek gerekirse şöyle yapabilirsiniz:

Örnekten de görüldüğü gibi artık herhangi bir kütüphaneyi tek satır kodla ekleyebilirsiniz. Ayrıca MyAssetManager sınıfını geliştirebilirsiniz. Örneğin satıriçi JavaScript kodları eklemeniz gerekiyorsa ve bunu blade dosyaları ile yapıyorsanız bu sınıfa birkaç ekleme yaparak tüm satıriçi script kodlarını yine aynı yöntemle ekleyebilirsiniz. Bir diğer örnek de bir klasör içerisindeki tüm scriptleri import etmek olabilir. Bunun için addScriptFolder gibi bir metod oluşturabilir ve klasörün içerisindeki tüm dosyaları okuyup addScript metodu ile import edebilirsiniz.

 

Turgut Sarıçam

 

Bir Cevap Yazın

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