Rails Asset Pipeline'ı Anlama

Ruby on Rails, Ruby ile yazılmış eksiksiz bir web geliştirme çerçevesidir. Ruby on Rails ile yeni çalışmaya başlayan bir geliştirici için, denetleyicide tanımlanan örnek değişkenler gibi görünümler tarafından erişilebilen pek çok şey büyülü hissettirecektir. Böyle bir başka şey de varlık hattıdır, ancak zaman zaman, özellikle de işleri üretime taşırken kaos yaratır. Basit bir google araması o zaman bir çözüm getirebilir, ancak tamamlanmış hissetmez. Bu gönderi, bir dahaki sefere takılıp kalmamanız için size Rails varlık ardışık düzeni hakkında daha iyi bir anlayış sağlayacaktır.

Raylar Varlık Boru Hattı

Uygulama/varlıklar ve satıcı/varlıklar klasörlerinin içine yazılan kod, herhangi bir Ruby on Rails uygulamasında ön ucun çoğunu oluşturur. Bu klasörün içine yazdığımız herhangi bir Javascript veya CSS, üretimde tarayıcılara sunulmadan önce derlenir ve küçültülür. Tüm bunlar, varsayılan olarak Rails ile birlikte gönderilen varlık boru hattı tarafından otomatik olarak halledilir. Bu varlık hattı, sprockets-rails gem tarafından uygulanır. Hatta varlıkları farklı bir dilde veya ön işlemcilerde yazmamıza ve bunları tarayıcının anlayabileceği CSS ve Javascript'e göre derlememize bile izin veriyor.

Oluşturma sırasında bir Ruby on Rails uygulaması, application.js ve application.css olmak üzere iki bildirim dosyasıyla verilir. Varsayılan olarak bu iki dosya, zorunlu olarak kabul edilen birkaç anlamlı kod satırı içerir. Bu dosyaların içeriğine bir göz atalım ve ne işe yaradıklarını anlamaya çalışalım.

Manifest dosyaları

/*
* Bu, tüm dosyaları içerecek olan application.css'de derlenecek bir bildirim dosyasıdır.
* aşağıda listelenmiş.
*
* Bu dizindeki herhangi bir CSS ve SCSS dosyası, lib/assets/stylesheets, seller/assets/stylesheets,
* veya varsa eklentilerin satıcısı/varlıkları/stil sayfalarına göreli bir yol kullanılarak burada başvurulabilir.
*
* Bu dosyaya uygulama çapında stiller eklemekte özgürsünüz ve bunlar,
* derlenmiş dosya, ancak stil kapsamı başına yeni bir dosya oluşturmak genellikle daha iyidir.
*= gerekli_kendini
*= require_tree .
*/

Bu, belirtilen tüm dosyaları tek bir application.css dosyasında içeren varsayılan CSS bildirim dosyasıdır. Buradaki require anahtar sözcüğü, Ruby'deki require anahtar sözcüğüyle aynı işlevi görür. Bir dosyayı, çağrıldığı dosyanın içinden erişilebilir hale getirir. Require anahtar sözcüğü, önce app/assets/ klasöründe belirtilen dosyaları arar, orada bulunamazsa satıcı/varlıklar/klasörüne bakar.

'require_self' ve 'require_tree .'

'require_self', çağrıldığı dosyanın tüm içeriğini, bizim durumumuzda application.css'yi, belirtildiği satıra yükler. 'require_tree .' tüm içeriği, atıfta bulunulan aynı klasördeki, bahsedildiği satıra yükler. Bir alt klasörün tüm dosyalarını eklememiz gerekirse, 'require_tree ./folder_name/' kullanın. Bu, düz CSS kullanırken yararlıdır. Ancak, renkler vb. için global değişkenler kullanmak için SASS/SCSS kullanmak istiyorsak, CSS dosyasını 'require' yerine '@import' SCSS yöntemini kullanarak içe aktarmamız gerekir.

Varlık Yolları

Uygulama/varlıklar ve satıcı/varlıklar klasörü arasında büyük bir fark yoktur. Geleneksel olarak, oluşturduğumuz özel CSS ve Javascript dosyaları için app/assets klasörünü ve herhangi bir üçüncü taraf eklentinin CSS ve Javascript'i için kullanıcı satıcı/varlıklar klasörünü kullanmanız önerilir.

Varlıkların aranma sırası aşağıdaki gibidir:

/app/varlıklar/görüntüler

/app/varlıklar/javascriptler

/app/varlıklar/stil sayfaları

/satıcı/varlıklar/görüntüler

/varlıklar/javascriptler

/varlıklar/stil sayfası

/[mücevherlerin içerdiği varlıklar]

Varlık Ön Derleme

Tüm dosyaları derlemek ve küçültmek için komisyon varlıklarını çalıştırmalıyız: ön derleme. Bu komut, application.css içinde belirtilen dosyaları bulan bir komisyon görevi başlatır, bunlar SCSS/SASS ile yazılmışlarsa CSS'ye derlenir ve ardından application.css dosyasının bir parçası olarak eklenir. Bu application.css dosyası, bir Rails görünüm yardımcısı olan stil sayfası bağlantı etiketi kullanılarak her sayfaya bağlanır. Aynısı application.js için de olur.

Varsayılan olarak, yalnızca application.css ve application.js bildirim dosyalarıdır ve bu nedenle önceden derlenirler. Ancak, farklı düzenler için bildirim dosyaları olarak bir veya daha fazla dosya kullanmak isteyebiliriz. Bu durumda bu dosyalar config/initializers/asset.rb adresindeki ön derleme dizisine eklenmelidir.

Rails.application.config.assets.precompile += ['dashboard.js', 'dashboard.css']

Burada application.css ve application.js dosyaları ile birlikte dashboard.css ve dashboard.js dosyaları manifest olarak kabul edilir. Dolayısıyla ön derleme sırasında bu dosyalar da önceden derlenir. Ön derlemeden sonra bu yeni oluşturulan dosyalar public/assets klasörüne yerleştirilir.

application-8cf9a6a42ecd8238b5d928c5ad7b4f4b440061daa2da0a0fe2016c7e92c9d955.css

application-ca682b893b6c32b8d053913db011cb78977866d8d1d6d95cf676e804adef35da.js

application-8cf9a6a42ecd8238b5d928c5ad7b4f4b440061daa2da0a0fe2016c7e92c9d955.css.gz

application-ca682b893b6c32b8d053913db011cb78977866d8d1d6d95cf676e804adef35da.js.gz

pano-fb0bd7de7060c10f28a74d784f046a519ef3b170645b00ee91a66953dc686554.css

pano-fb0bd7de7060c10f28a74d784f046a519ef3b170645b00ee91a66953dc686554.css.gz

genel/varlıklar klasörü

Bu, bir Rails uygulamasında varlıkları bulabileceğimiz üçüncü klasördür, ancak statik bir varlık olmadığı ve hiç değişmediği sürece varlıkları doğrudan buraya eklemek teşvik edilmez. Ayrıca, Rails url yardımcılarını kullanarak bu klasörün altına yerleştirilen hiçbir dosyaya başvuruda bulunamayacağız. Varlıklar genellikle yalnızca üretim ortamında önceden derlenir. Varlıkları yerel olarak önceden derlemek istiyorsanız, komisyon varlıklarını çalıştırın: ön derleme RAILS_ENV=yerel olarak üretim.

pano-fb0bd7de7060c10f28a74d784f046a519ef3b170645b00ee91a66953dc686554.css

pano-fb0bd7de7060c10f28a74d784f046a519ef3b170645b00ee91a66953dc686554.css.gz

Yukarıdaki dosya adlarına bakarsanız, bunlara eklenmiş rastgele 64 karakter vardır. Bu işleme, dosya adının tamamını dosyanın içeriğine bağlı hale getiren parmak izi alma adı verilir. Bu teknik, varlıkların önbelleğe alınmasında gerçekten yararlıdır. Dosyanın içeriği aynı kalırsa, dosyaların adı da aynı kalır, dolayısıyla önbelleğe alınabilir. İçerik değişirse ad da değişir ve önbellek de değişir.

Sass Varlık Url Yardımcıları

Uygulama/varlıklar klasörüne bazı yazı tiplerini, resimleri koyduğumuzda, ardından bunlara CSS, SCSS dosyalarından erişmeye çalıştığımızda, geliştirmede iyi çalışacaktır. Ancak çoğu zaman üretimde kaynak bulunamadı /assets/bg-image.jpg diyerek kırılıyor. Bu, özellikle dahil ettiğimiz yazı tipi paketleri için olur. Bunun nedeni, arka plan görüntüsü için böyle bir şey vermiş olmamızdır.

arka plan resmi: url('/images/header_background.jpg');

Üretimde, görüntüyü /images/header_background.jpg'den almaya çalışacaktır. Ancak, dosyayı genel dizine yerleştirmedikçe, 'header_background.jpg' adlı ortak klasörde hiçbir dosya bulunmayacaktır. Normalde bunları uygulamaya/varlıklara veya satıcıya/varlıklara yerleştirirdik. Bu nedenle, ön derleme sırasında derlenecek ve tüm no js/CSS varlıklarına parmak izi eklenecektir. Dolayısıyla tüm görüntü dosyaları, yazı tipi dosyaları adlarında parmak izi taşıyacak ve bu işe yaramayacaktır.

header_background-5c2d30983dca95c015dda3f0a581ff39e9dbef809ec6290d1f8a771cc6a42e2b.png company_logo-ad045423017cb12f23b6c2ccb746518586f0cb77080b7cb38b1800af6.png

Dosyalar, ortak klasörde yukarıda gösterildiği gibi derlenir ve eklenir. Bu nedenle, CSS'de buna atıfta bulunmak için, Rails tarafından sağlanan varlık yolu yardımcılarını kullanmamız gerekir. 'url('/images/header_backgroung.png')' yerine 'image-url('header_background.png')' kullanın. Ön derlemeden sonra bu eklenecektir.

arka plan resmi: url('/images/header_background-5c2d30983dca95c015dda3f0a581ff39e9dbef809ec6290d1f8a771cc6a42e2b.png');

Umarım bu yazı, Rails varlık boru hattı hakkında bilgi edinmenize yardımcı olmuştur. Varlık ardışık düzenini daha iyi anlamak, ön uçla ilgili kodu daha düzenli ve sürdürülebilir tutmanıza yardımcı olacaktır. Varlık boru hattı hakkında daha fazla araştırma yapmak istiyorsanız, resmi kılavuz için bağlantı burada.

Duyarlılık Analizi için doğru verilere sahip olup olmadığınızı öğrenmek için bir sonraki makalemizi takip etmeye devam edin.

Web'den veri almayı mı planlıyorsunuz? Yardım etmek için buradayız. Gereksinimleriniz hakkında bize bilgi verin.