Memahami Jalur Aset Rails

Ruby on Rails adalah kerangka kerja pengembangan web full-stack yang ditulis dalam Ruby. Untuk pengembang yang baru mulai bekerja dengan Ruby on Rails, banyak hal akan terasa ajaib, seperti variabel instan yang didefinisikan dalam pengontrol yang dapat diakses oleh tampilan. Hal lain seperti itu adalah saluran aset, tetapi kadang-kadang menciptakan kekacauan, terutama ketika memindahkan barang ke produksi. Pencarian google sederhana akan menghasilkan solusi pada saat itu, namun itu tidak akan terasa lengkap. Posting ini akan memberi Anda pemahaman yang lebih baik tentang pipeline aset Rails sehingga Anda tidak akan merasa terjebak dengannya di lain waktu.

Jalur Aset Rails

Kode yang ditulis di dalam folder app/assets dan vendor/assets membuat sebagian besar front-end di aplikasi Ruby on Rails apa pun. Javascript atau CSS apa pun yang kami tulis di dalam folder ini dikompilasi dan diperkecil sebelum disajikan ke browser dalam produksi. Semua ini ditangani secara otomatis oleh pipeline aset yang dikirimkan bersama Rails secara default. Pipeline aset ini diimplementasikan oleh permata sprockets-rails. Bahkan juga memungkinkan kita untuk menulis aset dalam bahasa yang berbeda atau pra-prosesor, dan mengkompilasinya ke CSS dan Javascript yang dapat dimengerti oleh browser.

Aplikasi Ruby on Rails pada saat pembuatan diberikan dengan dua file manifes application.js dan application.css. Kedua file ini secara default berisi beberapa baris kode bermakna yang dianggap wajib. Mari kita lihat isi file-file itu dan coba cari tahu untuk apa mereka.

File manifes

/*
* Ini adalah file manifes yang akan dikompilasi ke application.css, yang akan menyertakan semua file
* tercantum di bawah ini.
*
* File CSS dan SCSS apa pun dalam direktori ini, lib/assets/stylesheets, vendor/assets/stylesheets,
* atau plugin vendor/assets/stylesheets, jika ada, dapat dirujuk di sini menggunakan jalur relatif.
*
* Anda bebas menambahkan gaya seluruh aplikasi ke file ini dan gaya tersebut akan muncul di bagian atas
* file yang dikompilasi, tetapi umumnya lebih baik membuat file baru per ruang lingkup gaya.
*= membutuhkan_diri
*= membutuhkan_pohon .
*/

Ini adalah file manifes CSS default, yang mencakup semua file yang disebutkan ke dalam satu file application.css. Kata kunci require di sini berfungsi sama dengan kata kunci require di ruby. Itu membuat file dapat diakses di dalam file yang dipanggil. Kata kunci require mencari file yang disebutkan di folder app/assets/ terlebih dahulu, jika tidak ditemukan di sana akan mencari di folder vendor/assets/.

'require_self' dan 'require_tree .'

'require_self' memuat semua konten file tempat asalnya, dalam kasus kami application.css ke baris yang disebutkan. 'memerlukan_pohon .' memuat semua konten dalam folder yang sama yang dirujuk ke baris yang disebutkan. Jika kita perlu memasukkan semua file dari sub folder, gunakan 'require_tree ./folder_name/'. Ini berguna saat menggunakan CSS biasa. Tetapi jika kita ingin menggunakan SASS/SCSS, untuk menggunakan variabel global untuk warna dll, kita perlu mengimpor file CSS menggunakan metode SCSS `@import` daripada `require`.

Jalur Aset

Tidak ada perbedaan besar antara folder app/assets dan vendor/assets. Menurut konvensi, disarankan untuk menggunakan folder app/assets untuk file CSS dan Javascript khusus yang kami buat dan folder vendor/assets pengguna untuk CSS dan Javascript dari plugin pihak ketiga mana pun.

Urutan pencarian aset adalah sebagai berikut:

/app/aset/gambar

/app/assets/javascripts

/app/assets/stylesheet

/vendor/aset/gambar

/assets/javascripts

/assets/stylesheet

/[aset yang disertakan oleh permata]

Prakompilasi Aset

Untuk mengkompilasi semua file dan mengecilkannya, kita harus menjalankan rake assets:precompile. Perintah ini memulai tugas menyapu yang menemukan file-file yang disebutkan dalam application.css, jika mereka ditulis dalam SCSS/SASS itu dikompilasi ke CSS, dan kemudian ditambahkan sebagai bagian dari file application.css. File application.css ini ditautkan ke setiap halaman menggunakan tag tautan stylesheet, pembantu tampilan Rails. Hal yang sama terjadi untuk application.js.

Secara default, hanya application.css dan application.js yang merupakan file manifes dan karenanya sudah dikompilasi sebelumnya. Tetapi kita mungkin ingin menggunakan satu atau lebih file sebagai file manifes untuk tata letak yang berbeda. Dalam hal ini file-file ini harus ditambahkan ke array precompile di config/initializers/asset.rb

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

Di sini, bersama dengan file application.css dan application.js, file dashboard.css dan dashboard.js dianggap manifes. Jadi selama prakompilasi, file-file ini juga dikompilasi sebelumnya. Setelah prakompilasi, file yang baru dibuat ini ditempatkan di folder publik/aset.

application-8cf9a6a42ecd8238b5d928c5ad7b4f4b440061daa2da0a0fe2016c7e92c9d955.css

aplikasi-ca682b893b6c32b8d053913db011cb78977866d8d1d6d95cf676e804adef35da.js

application-8cf9a6a42ecd8238b5d928c5ad7b4f4b440061daa2da0a0fe2016c7e92c9d955.css.gz

aplikasi-ca682b893b6c32b8d053913db011cb78977866d8d1d6d95cf676e804adef35da.js.gz

dashboard-fb0bd7de7060c10f28a74d784f046a519ef3b170645b00ee91a66953dc686554.css

dashboard-fb0bd7de7060c10f28a74d784f046a519ef3b170645b00ee91a66953dc686554.css.gz

folder publik/aset

Ini adalah folder ketiga tempat kita dapat menemukan aset dalam aplikasi Rails, tetapi menambahkan aset di sini secara langsung tidak dianjurkan kecuali jika itu adalah aset statis dan tidak berubah sama sekali. Kami juga tidak akan dapat mereferensikan file apa pun yang ditempatkan di bawah folder ini menggunakan pembantu url Rails. Aset umumnya dikompilasi sebelumnya hanya di lingkungan produksi. Jika Anda ingin mengkompilasi aset di lokal, jalankan rake assets:precompile RAILS_ENV=production di lokal.

dashboard-fb0bd7de7060c10f28a74d784f046a519ef3b170645b00ee91a66953dc686554.css

dashboard-fb0bd7de7060c10f28a74d784f046a519ef3b170645b00ee91a66953dc686554.css.gz

Jika Anda melihat nama file di atas, mereka memiliki 64 karakter acak yang menyertainya. Proses ini disebut sidik jari, yang membuat seluruh nama file bergantung pada konten file. Teknik ini sangat membantu dalam caching aset. Jika konten file tetap sama, nama file juga akan tetap sama, sehingga dapat di-cache. Jika konten berubah, nama berubah dan begitu juga cache.

Pembantu Url Aset Sass

Setiap kali kami meletakkan beberapa font, gambar di folder app/assets kemudian mencoba mengaksesnya dari file CSS, SCSS, itu akan berfungsi dengan baik dalam pengembangan. Tetapi sebagian besar waktu rusak dalam produksi mengatakan sumber daya tidak ditemukan /assets/bg-image.jpg. Ini terjadi terutama untuk paket font yang kami sertakan. Ini karena kami akan memberikan sesuatu seperti ini untuk gambar latar

background-image: url('/images/header_background.jpg');

Dalam produksi, ia akan mencoba untuk mendapatkan gambar dari /images/header_background.jpg. Tetapi tidak akan ada file yang ada di folder publik bernama 'header_background.jpg' kecuali kita menempatkan file di direktori publik. Kami biasanya menempatkannya di app/assets atau vendor/assets. Jadi selama prakompilasi itu akan dikompilasi dan sidik jari akan ditambahkan ke semua aset tanpa js/CSS. Oleh karena itu semua file gambar, file font akan membawa sidik jari atas namanya dan ini tidak akan berfungsi.

header_background-5c2d30983dca95c015dda3f0a581ff39e9dbef809ec6290d1f8a771cc6a42e2b.png company_logo-ad045423017cb12f23b6c2ccb746518586f0cb77080d7cb38b4800af6angb4800af6.p4b4800af

File dikompilasi dan ditambahkan seperti yang ditunjukkan di atas di folder publik. Jadi untuk referensi ini di CSS, kita perlu menggunakan pembantu jalur aset yang disediakan oleh Rails. Alih-alih 'url('/images/header_backgroung.png')' gunakan 'image-url('header_background.png')'. Setelah prakompilasi ini akan ditambahkan dilihat sebagai

background-image: url('/images/header_background-5c2d30983dca95c015dda3f0a581ff39e9dbef809ec6290d1f8a771cc6a42e2b.png');

Saya harap posting ini membantu Anda memahami tentang pipa aset Rails. Pemahaman yang lebih baik tentang saluran aset akan membantu Anda menjaga kode terkait front-end lebih terorganisir dan dapat dipelihara. Jika Anda ingin menjelajahi lebih lanjut tentang pipa aset, berikut adalah tautan untuk panduan resmi.

Nantikan artikel kami berikutnya untuk mengetahui apakah Anda memiliki data yang tepat untuk Analisis Sentimen

Berencana untuk memperoleh data dari web? Kami di sini untuk membantu. Beri tahu kami tentang kebutuhan Anda.