ทำความเข้าใจเกี่ยวกับท่อส่งทรัพย์สิน Rails

Ruby on Rails เป็นเฟรมเวิร์กการพัฒนาเว็บแบบฟูลสแตกที่เขียนด้วยภาษา Ruby สำหรับนักพัฒนาที่เพิ่งเริ่มทำงานกับ Ruby on Rails หลายๆ อย่างจะรู้สึกมหัศจรรย์ เช่น ตัวแปรอินสแตนซ์ที่กำหนดไว้ในคอนโทรลเลอร์ที่มุมมองสามารถเข้าถึงได้ อีกสิ่งหนึ่งคือท่อส่งสินทรัพย์ แต่บางครั้งก็สร้างความโกลาหล โดยเฉพาะอย่างยิ่งเมื่อต้องเคลื่อนย้ายสิ่งของไปยังการผลิต การค้นหาโดย Google แบบง่ายๆ จะช่วยแก้ปัญหาได้ในขณะนั้น แต่รู้สึกว่ายังไม่สมบูรณ์ โพสต์นี้จะทำให้คุณเข้าใจมากขึ้นเกี่ยวกับไปป์ไลน์ของ Rails เพื่อที่คุณจะไม่รู้สึกติดขัดในครั้งต่อไป

ท่อส่งทรัพย์สิน Rails

รหัสที่เขียนในโฟลเดอร์แอป/สินทรัพย์และผู้ขาย/สินทรัพย์ประกอบขึ้นสำหรับส่วนหน้าส่วนใหญ่ในแอปพลิเคชัน Ruby on Rails Javascript หรือ CSS ใดๆ ที่เราเขียนในโฟลเดอร์นี้จะถูกคอมไพล์และลดขนาดก่อนที่จะให้บริการในเบราว์เซอร์ที่ใช้งานจริง ทั้งหมดนี้ได้รับการดูแลโดยอัตโนมัติโดยไปป์ไลน์สินทรัพย์ซึ่งจัดส่งพร้อมกับ Rails เป็นค่าเริ่มต้น ไปป์ไลน์สินทรัพย์นี้ดำเนินการโดยอัญมณีรางเฟือง นอกจากนี้ยังช่วยให้เราสามารถเขียนเนื้อหาในภาษาอื่นหรือตัวประมวลผลล่วงหน้า และคอมไพล์ไปยัง CSS และ Javascript ที่เบราว์เซอร์เข้าใจได้

แอปพลิเคชัน Ruby on Rails ในขณะที่สร้างจะได้รับไฟล์รายการสองไฟล์ application.js และ application.css โดยค่าเริ่มต้นทั้งสองไฟล์นี้มีโค้ดที่มีความหมายสองสามบรรทัดซึ่งถือว่าจำเป็น ให้เราดูที่เนื้อหาของไฟล์เหล่านั้นและลองหาว่าพวกมันมีไว้เพื่ออะไร

ไฟล์ Manifest

/*
* นี่คือไฟล์ Manifest ที่จะคอมไพล์เป็น application.css ซึ่งจะรวมไฟล์ทั้งหมด
* รายการด้านล่าง
*
* ไฟล์ CSS และ SCSS ใดๆ ภายในไดเร็กทอรีนี้, lib/assets/stylesheets, vendor/assets/stylesheets,
* หรือผู้ขาย/สินทรัพย์/สไตล์ชีตของปลั๊กอิน หากมี สามารถอ้างอิงได้ที่นี่โดยใช้เส้นทางที่เกี่ยวข้อง
*
* คุณสามารถเพิ่มสไตล์ทั้งแอปพลิเคชันให้กับไฟล์นี้ได้อย่างอิสระและสไตล์เหล่านั้นจะปรากฏที่ด้านบนของไฟล์
* ไฟล์ที่คอมไพล์แล้ว แต่โดยทั่วไป จะดีกว่าถ้าสร้างไฟล์ใหม่ตามขอบเขตสไตล์
*= require_self
*= require_tree
*/

นี่คือไฟล์รายการ CSS เริ่มต้น ซึ่งรวมถึงไฟล์ที่กล่าวถึงทั้งหมดไว้ในไฟล์ application.css ไฟล์เดียว คีย์เวิร์ด require ที่นี่ทำงานเหมือนกับคีย์เวิร์ด require ใน ruby ทำให้ไฟล์สามารถเข้าถึงได้ภายในไฟล์ที่เรียกจาก คีย์เวิร์ด require จะค้นหาไฟล์ที่กล่าวถึงในแอพ/สินทรัพย์/ โฟลเดอร์ก่อน หากไม่พบที่นั่น คีย์เวิร์ดจะค้นหาในโฟลเดอร์ vendor/assets/

'require_self' และ 'require_tree '

'require_self' โหลดเนื้อหาทั้งหมดของไฟล์นั้นที่มันถูกเรียก ในกรณีของเรา application.css ลงในบรรทัดที่กล่าวถึง 'require_tree .' โหลดเนื้อหาทั้งหมดในโฟลเดอร์เดียวกันที่มีการอ้างอิงไปยังบรรทัดที่กล่าวถึง หากเราต้องการรวมไฟล์ทั้งหมดของโฟลเดอร์ย่อย ให้ใช้ 'require_tree ./folder_name/' สิ่งนี้มีประโยชน์เมื่อใช้ CSS ธรรมดา แต่ถ้าเราต้องการใช้ SASS/SCSS เพื่อใช้ตัวแปรส่วนกลางสำหรับสี ฯลฯ เราจำเป็นต้องนำเข้าไฟล์ CSS โดยใช้วิธี SCSS `@import' แทนที่จะเป็น 'require'

เส้นทางสินทรัพย์

ไม่มีความแตกต่างอย่างมากระหว่างโฟลเดอร์แอป/สินทรัพย์และผู้ขาย/สินทรัพย์ ตามธรรมเนียมแล้ว ขอแนะนำให้ใช้โฟลเดอร์แอป/สินทรัพย์สำหรับไฟล์ CSS และ Javascript แบบกำหนดเองที่เราสร้างและโฟลเดอร์ผู้ขาย/สินทรัพย์ของผู้ใช้สำหรับ CSS และ Javascript ของปลั๊กอินของบุคคลที่สาม

ลำดับการค้นหาสินทรัพย์มีดังนี้:

/app/assets/images

/app/assets/javascripts

/app/assets/stylesheets

/vendor/assets/images

/assets/javascripts

/assets/stylesheet

/[ทรัพย์สินรวมโดยอัญมณี]

การคอมไพล์เนื้อหาล่วงหน้า

ในการคอมไพล์ไฟล์ทั้งหมดและย่อให้เล็กลง เราควรรัน rake asset:precompile. คำสั่งนี้เริ่มต้นงาน rake ซึ่งค้นหาไฟล์ที่กล่าวถึงใน application.css หากเขียนด้วย SCSS/SASS ไฟล์นั้นจะถูกคอมไพล์ไปยัง CSS แล้วเพิ่มเป็นส่วนหนึ่งของไฟล์ application.css ไฟล์ application.css นี้เชื่อมโยงกับแต่ละหน้าโดยใช้แท็กลิงก์สไตล์ชีต ซึ่งเป็นโปรแกรมช่วยดู Rails เช่นเดียวกันกับ application.js

โดยค่าเริ่มต้น เฉพาะ application.css และ application.js เท่านั้นที่เป็นไฟล์ manifest และด้วยเหตุนี้จึงถูกคอมไพล์ล่วงหน้า แต่เราอาจต้องการใช้ไฟล์ตั้งแต่หนึ่งไฟล์ขึ้นไปเป็นไฟล์รายการสำหรับเลย์เอาต์ที่แตกต่างกัน ในกรณีดังกล่าว ควรเพิ่มไฟล์เหล่านี้ในอาร์เรย์พรีคอมไพล์ที่ config/initializers/asset.rb

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

ที่นี่ พร้อมกับไฟล์ application.css และ application.js ไฟล์ dashboard.css และ dashboard.js ถือเป็นรายการ ดังนั้นในระหว่างการคอมไพล์ล่วงหน้า ไฟล์เหล่านี้จะถูกคอมไพล์ล่วงหน้าด้วย หลังจากการคอมไพล์ล่วงหน้า ไฟล์ที่สร้างขึ้นใหม่เหล่านี้จะถูกวางไว้ในโฟลเดอร์สาธารณะ/สินทรัพย์

ใบสมัคร-8cf9a6a42ecd8238b5d928c5ad7b4f4b440061daa2da0a0fe2016c7e92c9d955.css

แอปพลิเคชัน-ca682b893b6c32b8d053913db011cb78977866d8d1d6d95cf676e804adef35da.js

ใบสมัคร-8cf9a6a42ecd8238b5d928c5ad7b4f4b440061daa2da0a0fe2016c7e92c9d955.css.gz

โปรแกรม ca682b893b6c32b8d053913db011cb78977866d8d1d6d95cf676e804adef35da.js.gz

แดชบอร์ด-fb0bd7de7060c10f28a74d784f046a519ef3b170645b00ee91a66953dc686554.css

แดชบอร์ด-fb0bd7de7060c10f28a74d784f046a519ef3b170645b00ee91a66953dc686554.css.gz

โฟลเดอร์สาธารณะ/สินทรัพย์

นี่คือโฟลเดอร์ที่สามที่เราสามารถค้นหาเนื้อหาในแอปพลิเคชัน Rails ได้ แต่ไม่แนะนำให้เพิ่มเนื้อหาที่นี่โดยตรง เว้นแต่จะเป็นสินทรัพย์แบบคงที่และไม่เปลี่ยนแปลงเลย นอกจากนี้ เราไม่สามารถอ้างอิงไฟล์ใดๆ ที่อยู่ในโฟลเดอร์นี้โดยใช้ตัวช่วย URL ของ Rails โดยทั่วไป แอสเซทจะถูกคอมไพล์ล่วงหน้าในสภาพแวดล้อมที่ใช้งานจริงเท่านั้น หากคุณต้องการคอมไพล์เนื้อหาล่วงหน้าในโลคัล ให้รัน rake asset:precompile RAILS_ENV=production ในโลคัล

แดชบอร์ด-fb0bd7de7060c10f28a74d784f046a519ef3b170645b00ee91a66953dc686554.css

แดชบอร์ด-fb0bd7de7060c10f28a74d784f046a519ef3b170645b00ee91a66953dc686554.css.gz

หากคุณดูที่ชื่อไฟล์ด้านบน ไฟล์เหล่านี้จะมีอักขระ 64 ตัวที่แนบอยู่ กระบวนการนี้เรียกว่าลายนิ้วมือ ซึ่งทำให้ชื่อไฟล์ทั้งหมดขึ้นอยู่กับเนื้อหาของไฟล์ เทคนิคนี้มีประโยชน์มากในการแคชสินทรัพย์ หากเนื้อหาของไฟล์ยังคงเหมือนเดิม ชื่อของไฟล์จะยังคงเหมือนเดิม จึงสามารถแคชได้ หากเนื้อหาเปลี่ยนไป ชื่อจะเปลี่ยนไปและแคชก็เช่นกัน

ผู้ช่วย URL สินทรัพย์ Sass

เมื่อใดก็ตามที่เราใส่แบบอักษร รูปภาพลงในโฟลเดอร์ app/assets จากนั้นพยายามเข้าถึงจากไฟล์ CSS, SCSS มันจะทำงานได้ดีในการพัฒนา แต่โดยส่วนใหญ่แล้วมันหยุดทำงานโดยบอกว่าไม่พบทรัพยากร /assets/bg-image.jpg สิ่งนี้เกิดขึ้นโดยเฉพาะสำหรับแพ็คเกจฟอนต์ที่เรารวมไว้ นั่นก็เพราะว่าเราจะให้อะไรประมาณนี้กับภาพพื้นหลัง

ภาพพื้นหลัง: url('/images/header_background.jpg');

ในการผลิต จะพยายามดึงภาพจาก /images/header_background.jpg แต่จะไม่มีไฟล์อยู่ในโฟลเดอร์สาธารณะชื่อ 'header_background.jpg' เว้นแต่เราจะวางไฟล์นั้นไว้ในไดเรกทอรีสาธารณะ ปกติเราจะใส่ไว้ในแอพ/สินทรัพย์หรือผู้ขาย/สินทรัพย์ ดังนั้นในระหว่างการคอมไพล์ล่วงหน้า จะมีการคอมไพล์และจะเพิ่มลายนิ้วมือไปยังแอสเซ็ท no js/CSS ทั้งหมด ดังนั้นไฟล์รูปภาพทั้งหมด ไฟล์ฟอนต์จะมีลายนิ้วมืออยู่ในชื่อ และสิ่งนี้จะไม่ทำงาน

header_background-5c2d30983dca95c015dda3f0a581ff39e9dbef809ec6290d1f8a771cc6a42e2b.png company_logo-ad045423017cb12f23b6c2ccb746518586f0cb77080d7cb38b41800af736a4b

ไฟล์ถูกคอมไพล์และเพิ่มตามที่แสดงด้านบนในโฟลเดอร์สาธารณะ ดังนั้นหากต้องการอ้างอิงสิ่งนี้ใน CSS เราจำเป็นต้องใช้ตัวช่วยพาธสินทรัพย์ที่รางจัดหาให้ แทนที่จะใช้ 'url('/images/header_backgroung.png')' ให้ใช้ 'image-url('header_background.png')' หลังจากคอมไพล์ล่วงหน้าแล้ว จะถูกเพิ่มเป็น

ภาพพื้นหลัง: url('/images/header_background-5c2d30983dca95c015dda3f0a581ff39e9dbef809ec6290d1f8a771cc6a42e2b.png');

ฉันหวังว่าโพสต์นี้จะช่วยให้คุณได้รับการระงับเกี่ยวกับท่อส่งทรัพย์สินของ Rails ความเข้าใจที่ดีขึ้นเกี่ยวกับไปป์ไลน์สินทรัพย์จะช่วยให้คุณจัดระเบียบและบำรุงรักษาโค้ดที่เกี่ยวข้องกับส่วนหน้าได้ดียิ่งขึ้น หากคุณต้องการสำรวจเพิ่มเติมเกี่ยวกับท่อส่งทรัพย์สิน นี่คือลิงค์สำหรับคำแนะนำอย่างเป็นทางการ

คอยติดตามบทความต่อไปของเราเพื่อดูว่าคุณมีข้อมูลที่เหมาะสมสำหรับการวิเคราะห์ความเชื่อมั่นหรือไม่

วางแผนที่จะรับข้อมูลจากเว็บหรือไม่? เราอยู่ที่นี่เพื่อช่วย แจ้งให้เราทราบ เกี่ยวกับความต้องการของคุณ