Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Ruby
Code

Memulai Dengan Pipeline Aset, Bagian 2

by
Length:LongLanguages:
This post is part of a series called Getting Started with the Asset Pipeline.
Getting Started With the Asset Pipeline, Part 1

Indonesian (Bahasa Indonesia) translation by Ilham Saputra (you can also view the original English article)

Pada akhir artikel ini Anda harus memiliki pemahaman yang baik tentang fitur-fitur dari Saluran Pipa Aset di Rails yang pemula biasanya memiliki waktu yang rumit dengan. Anda juga akan memiliki pemahaman pengantar kompilasi, fingerprinting, caching, minification, dan kompresi yang baik. Saluran pipa memberi Anda banyak jarak tempuh, dan pemahaman yang baik tentang mengapa sama pentingnya dengan mengetahui fitur-fiturnya.

Topics

  • Sprockets?
  • Precompiling Assets
  • MD5 Fingerprinting
  • Asset Links
  • Pimped Styles

Sprockets?

The Asset Pipeline in Rails ditangani oleh permata sprockets-rails. Secara default, ini diaktifkan ketika Anda membuat aplikasi Rails baru. Sprocket adalah pustaka Ruby dan membantu Anda mengelola aset JavaScript dan CSS Anda.

Di atas itu, ia mengurus kompilasi serta preprocessing bahasa tingkat yang lebih tinggi seperti Sass, SCSS, dan CoffeeScript. Preprocessing hanya berarti bahwa gaya Anda, HTML atau JavaScript dihasilkan setelah Anda menulis kode dalam bahasa lain. Misalnya, stylesheet Sass Anda dikompilasi menjadi CSS yang valid. Karena browser tidak dapat memahami hal-hal seperti CoffeeScript, kita harus memrosesnya terlebih dahulu.

Ada tiga permata yang memainkan peran penting dalam semua ini:

  • coffee-rails
  • uglifier
  • sass-rails

sass-rails memungkinkan Anda menulis pilihan rasa Sass Anda untuk membuat CSS Anda, coffe-rails memberi Anda sintaks yang lebih baik untuk menulis JavaScript Anda, dan uglifier pada gilirannya kompres aset-aset ini. By the way, sass-rails bertugas mengompresi file CSS itu sendiri. Ketiga permata akan ditambahkan ke Gemfile Anda secara otomatis saat Anda membuat aplikasi Rails baru. Jika Anda memiliki alasan untuk tidak menggunakan Sprockets dengan Rails, Anda dapat melewatinya dari baris perintah saat Anda memulai aplikasi:

Terminal

Perintah ini mencegah permata yang disebutkan di atas ditambahkan ke Gemfile Anda dan memberi Anda versi yang berbeda dari file config/application.rb. Sekarang Anda perlu mengatur solusi Anda sendiri untuk menangani aset Anda.

Processing

Ketika Anda melakukan preprocess sesuatu seperti CoffeeScript ke dalam JS yang valid, atau Sass ke dalam CSS, Anda juga memiliki opsi untuk memproses file-file ini lagi. Minfication dan kompresi adalah dua yang besar. Meminimalkan penghapusan hal-hal yang tidak disukai browser—ruang kosong dan komentar adalah kandidat yang baik, misalnya. Sass juga bisa berhubungan langsung dengan minification juga. Atau Anda cukup menggunakan standar Rails dari kompresor YUI ketika berhadapan dengan stylesheet. Hanya sebagai samping, Rails bahkan memungkinkan Anda menulis dan mengkonfigurasi kompresor kustom Anda sendiri.

Saya harus menyebutkan bahwa Sass memiliki versi keluaran yang terkompresi. Ini sebenarnya membingungkan karena itu meminimalkan stylesheet Anda. Kompresi adalah proses yang berbeda dan mengurangi ukuran file Anda secara signifikan lebih banyak. Kompresi, atau gzip, menargetkan bit kode yang berulang dan menggantinya dengan pointer yang mengambil sedikit ruang. Jadi, semakin berulang file aset Anda, semakin dikompresi dan berkurang ukurannya.

Minifikasi cukup bagus, tetapi Anda akan melihat pengurangan ukuran file terbesar saat menggunakan gzipping. Tidak jarang melihat file menyusut hingga 14% dari ukuran aslinya jika Anda berdua mengecilkan dan memampatkannya. Ketika Anda berpikir tentang mengunduh banyak aset melalui jaringan yang lebih lambat, ini bisa sangat bermanfaat.

Precompiling Assets

Untuk produksi, aset Anda harus dikompilasi terlebih dahulu. File yang Anda tempatkan di app/assets biasanya perlu dipreprocess sebelum dapat disajikan. apa yang sedang kita bicarakan di sini? Katakanlah Anda telah bekerja pada beberapa aplikasi baru yang berfungsi di server lokal Anda. File Sass Anda dan JavaScript yang dibumbui Javascript Anda bekerja secara ajaib di luar kotak. Keren, tetapi apa yang terjadi jika Anda ingin mendorong ini ke server produksi? Server semacam itu, yang bertanggung jawab untuk mengirimkan konten ini ke khalayak yang mungkin jauh lebih besar, memiliki beberapa tuntutan yang berbeda dari server lokal Anda.

Sebagai default, Rails akan mencari file yang diberi nama aplication dan mencoba mengkompilasi mereka untuk Anda. Dalam langkah ini, aset dikompilasi dari bahasa tingkat tinggi seperti Sass ke dalam CSS, dan mereka digabungkan bersama-sama—dari beberapa file menjadi lebih sedikit kumpulan file. Memiliki sesedikit mungkin file bermanfaat untuk kinerja dan kecepatan. Mengompresi ukuran mereka ke ukuran minimal juga sangat penting—terutama untuk aplikasi yang lebih besar. Di atas semua itu, file juga di-cache. Itu berarti Anda hanya memuat aset baru ketika mereka telah diubah di ujung Anda.

Compilation

Anda memiliki dua opsi di mana Anda ingin mengkompilasi aset Anda. Anda melakukan kompilasi di server produksi Anda atau secara lokal. Kompilasi lokal berarti Anda menjalankan proses ini pada mesin Anda sendiri terlebih dahulu dan kemudian mendorongnya ke produksi. Ini memiliki keuntungan bahwa Anda tidak perlu akses tulis ke sistem file di server produksi, dan jika Anda menerapkan ke beberapa server, Anda dapat melakukan proses ini hanya sekali. Tidak perlu mengkompilasi aset Anda di server jika perubahan yang diterapkan tidak termasuk perubahan aset adalah manfaat lain dari pengurutan lokal.

Aset precompiling adalah salah satu dari hal-hal yang perlu kita lakukan sebelum mengirim mereka “pure”, mengkompilasi CSS, HTML, dan JS. Server mungkin tidak perlu tahu tentang cara menangani bahasa tingkat tinggi seperti Sass, Slim, dan lainnya. Mereka sudah cukup tanggung jawab. Untuk itu untuk bekerja, Anda bertanggung jawab untuk memiliki kompresi dan permata minifying siap di mesin Anda. Anda dapat menempatkan aset yang dikompilasi ini di repositori Git Anda—atau alat kontrol versi apa pun yang Anda inginkan—dan hanya gunakan aset akhir ini untuk produksi.

Rails menawarkan Anda tugas Rake yang menangani precompiling assets. Tugas semacam itu hanyalah serangkaian langkah yang telah ditetapkan yang dilaksanakan untuk mencapai tujuan tertentu. Menggunakan alat Rake build untuk hal-hal seperti itu sangat umum di tanah Ruby. Anda dapat dengan mudah menulis tugas Anda sendiri di Rake sendiri. Rel membuat ini sangat mudah. Di luar kotak, Rails dilengkapi dengan direktori lib/tasks di mana Anda dapat dengan mudah memarkir tugas Rake Anda. Tidak diperlukan pengaturan lebih lanjut. Jadi ketika Anda menjalankan:

Terminal

Sprocket akan mengambil aset yang dapat ditemukan di jalur pencarian dan pra-proses atau mengkompilasinya ke public/assets. Outputnya akan terlihat seperti ini:

Terminal

Ketika Anda ingin mengkompilasi secara lokal, dianjurkan untuk mengubah lokasi di mana Rails menghasilkan aset Anda. Jika Anda tidak melakukannya, Anda perlu mengkompilasi ulang aset untuk pengembangan karena Anda tidak akan melihat perubahan lokal tanpanya. URL yang diubah akan digunakan oleh Sprocket untuk melayani aset Anda dalam mode pengembangan.

config/environments/development.rb

Untuk produksi, file yang dikompilasi akan tetap ditempatkan dalam direktori /assets secara default.

Anda akan berakhir dengan satu aset, alias manifes file seperti application.js dan application.css. Dengan begitu Anda tidak perlu menautkan secara manual ke semua aset Anda dengan menyerahkan markup Anda dan tidak perlu memuat beberapa file aset, bukan satu untuk setiap kategori.

Nomor panjang yang Anda lihat yang dilampirkan disebut sidik jari. Ini digunakan untuk membandingkan file dan melihat apakah konten mereka mungkin telah berubah sebelum mereka perlu di-cache lagi. Yang juga bisa Anda lihat adalah Anda mendapatkan dua versi file yang sama. Yang dengan ekstensi file .gz adalah versi gzip dari aset. gzip digunakan untuk kompresi dan dekompresi file dan untuk memotong sedikit lemak yang tidak ingin kami kirimkan melalui kabel. Perbaikan lain untuk meningkatkan kecepatan, pada dasarnya.

Jika Anda merasa perlu untuk mengkompilasi aset Anda di server produksi, perintah berikut di bawah ini akan membuat aset langsung di server Anda. Namun, saya hanya menambahkan ini demi kelengkapan. Saya tidak yakin Anda akan sangat membutuhkan ini sebagai pemula sekarang.

Terminal

File & Petunjuk Manifes

File manifes seperti application.css menyertakan logika untuk mengimpor semua file di jalur pencariannya. Rails mengimpor parsial ini terlebih dahulu dan kemudian mengumpulkannya ke dalam file otoritatif tunggal yang akan digunakan browser. Itu hanya default, dan Anda dapat mengubah itu tentu saja.

Setiap file manifes memiliki arahan, yang merupakan instruksi yang menentukan file mana yang perlu diminta untuk membangun file manifes ini. Urutan di mana mereka diimpor ditentukan di sana juga.

Hasil akhir berisi semua isi dari semua file yang memiliki akses ke arahan. Sprocket memuat file-file ini, melakukan preprocessing yang diperlukan, dan membulatkan semuanya dengan mengompresi hasilnya. Sangat sangat berguna!

Untuk file manifes CSS Anda, app/assets/stylesheets/application.css, ini terlihat seperti ini:

Setara JavaScript, app/assets/javascripts/application.js, tampak serupa:

Seperti yang Anda lihat dari contoh ini, membutuhkan jQuery pertama adalah suatu keharusan jika Anda mengandalkannya dalam kode JavaScript Anda.

MD5 Fingerprinting?

Secara default, Rails membuat sidik jari untuk setiap nama file selama proses precompilation. Lebih spesifik, Sprocket menciptakan hash MD5 dari konten file Anda. Heksadesimal string 32-karakter yang dihasilkan, alias digest, kemudian melekat pada nama file aset Anda.

Itu berarti bahwa jika isi file Anda berubah, nama file Anda, MD5 hash bagian dari itu, akan berubah juga. Mengapa ini disebut sidik jari? Hash semacam itu memiliki kemungkinan yang sangat tinggi untuk menjadi unik dan karenanya dapat digunakan untuk mengidentifikasi keunikan suatu file—seperti sidik jari.

Contoh Filename

Kami tidak berbicara tentang string heksadesimal acak. Isi file didorong melalui fungsi matematika yang mengubahnya menjadi urutan 32 karakter yang unik. Itu berarti Anda mendapatkan hasil hash yang sama ketika Anda menerapkan fungsi ke konten yang sama dua kali—atau seberapa pun sering Anda suka.

Melalui mekanisme cerdas itu, adalah mungkin untuk memeriksa perubahan dan hanya memperbarui file yang akan menghasilkan hash MD5 yang berbeda. Untuk tujuan cache, ini emas. Jika tidak ada yang berubah, cache oleh browser web untuk permintaan di masa mendatang. Dalam konteks itu, cache busting berarti klien jarak jauh akan meminta salinan file baru karena sidik jari telah berubah. Tentu saja, sidik jari baru akan dibuat dan ditambahkan ke nama file aset Anda.

Output

Anda dapat menonaktifkan sidik jari baik untuk produksi dan pengembangan:

config/environments/production.rb

config/environments/development.rb

Asset Links

Mari kita lupakan mengapa menyenangkan memiliki Saluran Pipa Aset. Ini bertujuan memudahkan Anda untuk berurusan dengan aset. Menulis gaya dan perilaku untuk aplikasi menjadi semakin bernuansa dan kompleks. Beberapa alat juga telah menjadi lebih menyenangkan untuk diajak bekerja sama. Menyiapkan aset untuk produksi dan melayani mereka setidaknya harus lebih sepele dan menghemat waktu Anda.

Memiliki sedikit otomatisasi dan konvensi untuk mengatur aset benar-benar bagus karena membuat pekerjaan Anda yang sebenarnya mudah di sepanjang jalan. The Asset Pipeline bahkan mempermanis kesepakatan itu dan membeberkan hal-hal dengan beberapa tautan aset manis. Ini menjadikannya sebuah ledakan untuk berurusan dengan aset dalam kode Anda. Mari kita lihat beberapa tersangka yang biasanya diharapkan meningkatkan tingkat kebahagiaan Anda lebih jauh lagi:

  • javascript_include_tag
  • stylesheet_link_tag
  • image_tag

Sejak ekstraksi, Sprocket tidak mengubah cara Anda menghubungkan aset Anda; masih berfungsi sama seperti sebelumnya. Contoh di atas adalah metode kenyamanan yang mengambil nama aset Anda sebagai argumen. Mereka kemudian mencari tahu nama-nama ekstensi untuk file yang terkorelasi sendiri. Metode penolong ini tidak hanya membuat tag yang diperlukan untuk HTML yang tepat tetapi juga mengurus penautan ke file aset. Mereka tidak wajib, tentu saja, tetapi masih bagus untuk dimiliki dan sangat mudah dibaca juga. Ada sedikit kekacauan dalam markup Anda jika Anda memanfaatkannya.

Beberapa Tampilan

Dalam file tata letak global Anda, Rails memberi Anda tiga di antaranya di luar kotak.

app/views/layouts/application.html.erb

Ini menghasilkan output berikut dalam HTML yang ditampilkan:

Mari kita lihat lebih dekat cara menangani aset gambar.

image_tag

Gambar yang ditempatkan di direktori public/assets/images dapat diakses melalui metode kenyamanan ini — tidak perlu bermain-main dengan nama jalur sendiri. Ini adalah contoh bagus dari "konvensi over konfigurasi" di tempat kerja.

file some.html.erb

Itu akan menghasilkan hal-hal berikut:

Jika diaktifkan, Sprocket akan melayani file seperti itu jika ditemukan. Ketika file seperti some-image.png adalah sidik jari, seperti some-image-9e107d9d372bb6826bd81d3542a419d6.png, itu akan diperlakukan dengan cara yang sama.

Jika Anda memerlukan direktori lain dalam public/assets/images atau dalam app/assets/images untuk mengatur gambar Anda, mungkin sesuatu yang ekstra untuk ikon atau file svg, Rails tidak akan kesulitan menemukannya. Anda hanya perlu menambahkan nama direktori terlebih dahulu:

Lihat, tidak ada ilmu roket, dan para pembantu aset lainnya ditangani dengan cara yang sama.

Efficient Styles

CSS & ERB

The Asset Pipeline disiapkan untuk mengevaluasi kode ERB dari awal. Yang perlu Anda lakukan adalah menambahkan ekstensi .erb ke sebuah file dan Anda baik untuk pergi—Sprocket akan mengurus sisanya. Ketika Anda menghasilkan pengendali, itu juga akan membuat tampilan yang sudah memiliki ekstensi .erb. Hal yang sama berlaku untuk perancah.

Tetapi ini juga berfungsi untuk stylesheet. Anda dapat meningkatkannya dengan menggunakan ERB di dalamnya. Anda cukup membuat sesuatu seperti file example.css.erb. Saya tidak yakin apakah itu teknik yang digunakan secara luas. Ini bisa sangat berguna, tetapi saya mungkin akan berhati-hati untuk menggunakan ini secara berlebihan karena Anda dapat membawanya jauh. File-file CSS dinamis ini mungkin tidak mengandung terlalu banyak logika. Rasanya seperti bau kode, tetapi kerusakan tampaknya terkandung jika Anda bergantung pada pembantu ERB kebanyakan.

Gambar ini akan ditemukan jika Anda memilikinya di salah satu jalur pemuatan Saluran Aset—biasanya di suatu tempat di bawah app/assets/images. Yang keren adalah, jika file ini sudah diproses dan sidik jari, maka Sprocket akan menggunakan jalur public/assets dan menemukannya di sana. Hal yang sama berlaku untuk jenis aset lain juga, tentu saja. Jangan lupa untuk menggunakan <%= %>, <% %> untuk menginterpolasi kode Ruby di sana. Ini tidak akan berfungsi tanpa mereka. Selama prekompilasi, Sprocket akan menginterpolasi kode yang digunakan dalam file CSS atau Sass dan menghasilkan file plain .css lagi—dengan atau tanpa sidik jari sesuai dengan pengaturan Anda, tentu saja.

Berikut ini beberapa opsi lain yang mungkin berguna untuk menautkan ke berbagai kategori aset:

  • asset_path
  • asset_url
  • image_path
  • image_url
  • audio_path
  • audio_url
  • font_path
  • font_url
  • video_path
  • video_url

Perbedaan antara saudara-saudara ini adalah bahwa versi _url memberi Anda jalur lengkap, seperti http://example.com/assets/application.css, sedangkan versi _path diterjemahkan ke jalur relatif ke aset, seperti /assets/aplication.css.

Pembantu Sass Asset

Saat Anda menggunakan permata sass-rails, Anda juga dapat memanfaatkan path dan url pembantu untuk aset Anda. Mereka benar-benar tidak punya otak. Sesederhana ini:

some-stylesheet.css.erb

Perhatikan bahwa para pembantu ini menggunakan tanda hubung ( - ) dan bukan garis bawah ( _ ).

image-path("some-image.png") diterjemahkan menjadi "/assets/some-image.png". image-url("some-image.png") akan diperluas ke url(/assets/some-image.png)—yang pada gilirannya diterjemahkan ke URL lengkap, seperti "http://www.example.com/assets/some-image.png". Hal yang sama berlaku untuk asset-path, tentu saja.

Menariknya, permata ini juga menawarkan citarasa tersendiri dari penolong aset lainnya dari Rails. Itu berarti Anda tidak perlu menggunakan file .erb dan melakukan <%= %> interpolasi di stylesheet Anda. Anda cukup menggunakan penolong aset ini dari sass-rails, yang terasa sedikit lebih elegan menurut saya. Juga, kurang berbau kode.

  • asset-path
  • asset-url
  • image-path
  • image-url
  • audio-path
  • audio-url
  • font-path
  • font-url
  • video-path
  • video-url

Metode penolong ini tahu persis di mana menemukan aset Anda—jika Anda menempatkannya di direktori konvensional, jalur pencarian pada dasarnya. Perbedaan antara path dan url adalah Anda memiliki jalur relatif dan satu jalur absolut. Pengingat cepat: path relatif adalah path ke tujuan file tertentu dari beberapa lokasi file lainnya. Jalur absolut memberi Anda lokasi referensi ke direktori root.

Pikiran Akhir

The Asset Pipeline diekstrak sejak Rails 4 dan bukan fungsi inti lagi. Ini diaktifkan secara default, tetapi Sprocket sekarang bertugas. Anda bebas untuk melewatinya ketika Anda memulai sebuah proyek.

Menggunakan pipa membuat manajemen aset dan kompilasi menjadi mudah. Anda tidak perlu menyiapkan apa pun dan dapat fokus hanya untuk bekerja dengan aset ini. Cherry di atas adalah bahwa Anda mendapatkan banyak metode kenyamanan praktis juga.

File Anda untuk CSS, JS, CoffeeScript, Sass, Haml, Slim, dan sebagainya Anda diatur dengan rapi di satu tempat sentral, di bawah app/assets. Sprocket bertanggung jawab untuk melayani file dari direktori ini. File di sana biasanya memerlukan beberapa preprocessing, seperti mengubah file Sass ke file CSS yang setara.

Saat ini Anda sudah mengetahui sebagian besar fitur-fitur Saluran Aset yang pemula biasanya memiliki waktu yang rumit untuk membungkus kepala mereka. Lebih penting daripada mengetahui fungsinya sendiri, Anda sekarang akrab dengan alasannya juga. Anda harus memiliki pemahaman pengantar kompilasi, fingerprinting, caching, minification, dan kompresi yang baik. Saya harap Anda akan menghargai seberapa banyak saluran ini bagi Anda untuk membuat kehidupan pengembang Anda sedikit lebih bebas masalah.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.