ការប្រើប្រាស់ Assetic នៅក្នុង Symfony3 (ភាគទី០១)

Assetic បញ្ចូលគំនិត២ផ្សេងគ្នា៖ assets និង filters ។ Assets ជា files ដូចជា CSS, JavaScript និង រូបភាព។ filter ជាវត្ថុដែលអាចស្នើរទៅ files ទាំងនោះបានមុននឹងពួកគេត្រូវបានប្រើនៅក្នុង browser ។ ការអនុញ្ញាតនេះគឺជាការបំបែករវាង asset files ដែលរក្សាទុកក្នុង application និង files នោះគឺជា file ដែលបានបង្ហាញដល់អ្នកប្រើ។

៦ ជំហ៊ាននៃការប្រើប្រាស់ Assetic៖

ជំហានទី១៖ របៀបដាក់ការស្នើរ Assetic Filter ទៅ File Extension ជាក់លាក់ណាមួយ

Assetic filter អាចនឹងស្នើរបានទៅកាន់ files រឺ groups នៃ files ផ្សេងៗពីគ្នា ដូចដែលអ្នកឃើញនៅទីនេះ files ដែលមាន extension ជាក់លាក់។ ដើម្បីបង្ហាញអ្នកពីរបៀបក្ដោប option នីមួយៗ ឧបមាថា អ្នកចង់ប្រើ Assetic’s CoffeeScript filter ដែលបំលែង CoffeeScript file ទៅជា JavaScript។

ចំនុចសំខាន់នៃការ configure គឺគ្រាន់តែជា path ទៅ coffee, node និង node_modules ។ ខាងក្រោមនេះជាឧទាហរណ៏៖

Filter a single File

អ្នកអាចប្រើ single CoffeeScript file ជា JavaScript ពី templates របស់អ្នកបាន៖

នេះជាអ្វីដែលត្រូវការក្នុងការបំលែង CoffeeScript file និងប្រើវាជា compiled JavaScript  ។

Filter multiple Files

អ្នកក៏អាច បំលែង CoffeeScript files ច្រើនទៅជា output file តែមួយបាន៖

គ ការ filter ដោយផ្អែកលើ File Extension

គុណសម្បត្តិមួយដែលល្អជាងគេនៃការប្រើ Assetic នោះគឺកាត់បន្ថយនូវតួលេខនៃ asset file អោយទាបបំផុតនៃ HTTP requests។ ក្នុងគោលបំណងដើម្បីធ្វើអោយមានការប្រើប្រាស់ពេញលេញនេះ វាជាការល្អដើម្បីបញ្ចូលគ្នានូវ JavaScript និង CoffeeScript files ទាំងអស់របស់អ្នកចាប់តាំងពីពួកគេត្រូវបានប្រើជា JavaScript ។ តែជាអកុសល ដោយគ្រាន់តែបន្ថែមនូវ JavaScript files ទៅជា files ដែលត្រូវបានរួមបញ្ចូលគ្នាដូចខាងលើនឹងមិនធ្វើការដូចជា JavaScript files ធម្មតាដែលនឹងមិនបានចងក្រងដូច CoffeeScript ឡើយ។ បញ្ហានេះអាចនឹងត្រូវជៀសវាងបានដោយប្រើនូវ apply_to  option ដែលអនុញ្ញាតអោយអ្នកបញ្ជាក់បានថា filter ណាមួយដែលនឹងត្រូវបានស្នើរទៅ file extensions ពិសេសណាមួយ។ ដំណាក់កាលនេះអ្នកអាចបញ្ជាក់ថា coffee filter បានស្នើរទៅ .coffee files ទាំងអស់៖

Option នេះ អ្នកមិនចាំបាច់បញ្ជាក់ coffee filter ក្នុង template ទេ។ អ្នកអាច list JavaScript files ធម្មតាទាំងអស់ណាមួយដែលអាចនឹងបញ្ចូលនិងបង្កើតជា Single JavaScript file មួយ (ជាមួយ .coffee files ដែលកំពុងតែដំណើរការដោយ CoffeeScript filter) ៖

ជំហានទី២៖ របៀបប្រើប្រាស់ Assetic សម្រាប់ Asset Management

) តម្លើងនិងបើក Assetic

Assetic គឺមិនបានបញ្ចូលទៅក្នុង Symfony Standard Edition ដោយ default ជាយូរមកហើយ។ មុននឹងប្រើប្រាស់ features ណាមួយរបស់វា ត្រូវតម្លើងនូវ AsseticBundle ដោយដំណើរការនូវ console command ក្នុង project របស់អ្នក៖

បន្ទាប់មកបើកនូវ bundle ក្នុង AppKernel.php file នៃ Symfony application៖

ចុងក្រោយគឺបន្ថែមនូវ ការ configure ដើម្បីបើក Assetic ដើម្បី support application របស់អ្នក៖

ខ) ការបញ្ចូលនូវ JavaScript Files

ដើម្បីបញ្ចូលនូវ JavaScript files គឺត្រូវប្រើ javascripts tag ក្នុង template ណាមួយ៖

នៅក្នុងឧទាហរណ៏នេះ files ទាំងអស់ក្នុង Resources/public/js/ directory នៃ AppBundle នឹង load និងប្រើពីទីតាំងផ្សេងគ្នា។ tag ដែលបានបង្កើតអាចនឹងដូចនេះ៖

គ) ការបញ្ចូលនូវ CSS Stylesheets

ការហៅ CSS គឺដូចទៅនឹង JavaScript ដែរតែប្រើប្រាស់ stylesheets tag៖

ឃ) ការបញ្ចូលរូបភាព

ដើម្បីបញ្ចូលរូបភាពគឺត្រូវប្រើ image tag ។

ង) ការបញ្ចូល Assets

Feature មួយនៃ Assetic គឺវាអាចបញ្ចូល files ច្រើនទៅជាតែមួយបាន។ នេះគឺអាចជួយកាត់បន្ថយតួលេខនៃ HTTP requests បាន។

 

ក្នុង dev environment, file នីមួយៗគឺនៅតែប្រើដោយឡែកពីគ្នា ដូចនេះអ្នកអាចស្វែងរកបញ្ហាបានយ៉ាងងាយស្រួល។មិនតែប៉ុណ្ណោះនៅក្នុង prod environment នេះអាចនឹងបង្កើតជា single script tag ដែលផ្ទុកនូវអត្ថបទនៃ JavaScript files ទាំងនោះបាន។

ច) ការប្រើប្រាស់ឈ្មោះ Assets

AsseticBundle configuration directives អនុញ្ញាតអោយអ្នកកំណត់ឈ្មោះនូវសំណុំ asset។ អ្នកអាចធ្វើដោយកំណត់ Input files, filters និង output files ក្នុង configuration ដែលស្ថិតក្រោម assetic section ។

បន្ទាប់ពីកំណត់ឈ្មោះ assets អ្នកអាចតាងពួកគេក្នុង templates ជាមួយនឹង @named_asset notation៖

ឆ) ការគ្រប់គ្រងតំណភ្ជាប់ (URL)

ប្រសិនបើអ្នកចង់គ្រប់គ្រង់ URLs ដែល Assetic ផលិតនោះសូមធ្វើនៅក្នុង template និង ពាក់ព័ន្ធជាមួយនឹង public document root ដូចឧទាហរណ៏ខាងក្រោម៖