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

ជំហានទី៣៖ ការប្រើប្រាស់ Assetic សម្រាប់ Image Optimization ជាមួយនឹង Twig Function ក្នុងចំណោម filters ជាច្រើនតែ Assetic មាន ៤ filters ដែលអាចប្រើសម្រាប់ក្នុងការបង្កើនគុណភាពនៃរូបភាព។ នេះអាចអោយអ្នកទទួលនូវប្រយោជន៏នៃទំហំរូបភាពដ៏តូចក្រៅពីការប្រើប្រាស់នូវការកែសម្រួលរូបភាព។

ក) ការប្រើប្រាស់ Jpegoptim

Jjpegoptim គឺជាឧបករណ៏ប្រើក្នុងការធ្វើ JPEG files ។ ដើម្បីប្រើវាជាមួយ Assetic គឺត្រូវច្បាស់ថាវាត្រូវបានតម្លើងនៅលើប្រព័ន្ធនិង configure ទីតាំងរបស់វាដោយប្រើ bin option នៃ jpegoptim filter៖

 

ពេលនេះអាចប្រើវាបានហើយពីក្នុង template៖

 

ខ) ការយកចេញនូវទិន្នន័យ EXIF ទាំងអស់

តាំងពីដើម jpegoptim filter ធ្វើការយកចេញនូវ ព័ត៌មាន meta ខ្លះៗដែលរក្សាទុកក្នុងរូបភាព។ ដើម្បីយកទិន្នន័យ EXIF និង comments ចេញបានត្រូវកំណត់នូវ strip_all option ទៅជា true

 

គ) ការធ្វើអោយគុណភាពទៅជាតូចបំផុត

ពីដើមមក jpegoptim filter មិនបានធ្វើការកែប្រែនូវគុណភាពនៃ រូបភាព JPEG ទេ។ ការប្រើ max option ដើម្បី configure នូវការកំណត់គុណភាពដែលធំបំផុត (ក្នុង scale នៃ 0 ទៅ 100)។ ការកាត់បន្ថយទំហំនៃរូបភាព ការពិតណាស់គឺជាការចំណាយនូវគុណភាពរបស់វា។

 

ឃ) វាក្យសម្ព័ន្ធខ្លី (Shorter Syntax): Twig Function

ប្រសិនបើអ្នកកំពុងតែប្រើ Twig នោះវាអាចសម្រេចនូវ វាក្យសម្ព័ន្ធខ្លីទាំងអស់នោះបានដោយការបើកនិងប្រើនូវ Twig function ពិសេស។ ធ្វើដូចនេះដោយចាប់ផ្ដើមនូវការ configure ដូចខាងក្រោម៖

 

Twig template អាចប្ដូរដូចខាងក្រោម៖

 

អ្នកអាចបញ្ជាក់នូវ output directory នៃរូបភាពក្នុង Assetic configuration file៖

 

ជំហានទី៤៖ ការរួមបញ្ចូល ការប្រមូលផ្ដុំ និងការបង្រួមអោយតូចនៃ Web Assets ជាមួយ PHP Libraries

ក) ការតម្លើង Third-Party Compression Libraries

Assetic បញ្ចូលនូវ filters ដែលអាចប្រើប្រាស់បានជាច្រើនប៉ុន្តែវាមិនបានបញ្ចូលនូវ associated libraries របស់ពួកគេទេ។ ហេតុនេះហើយបានជាមុននឹងបើក filters ដែលប្រើរួចក្នុង article អ្នកត្រូវតម្លើង libraries ចំនួន២ជាមុនសិន។ សូមបើក command console ហើយស្វែងរកទីតាំងនៃ project រួចដំណើរការនូវ command ខាងក្រោម៖

 

ខ) ការរៀបចំ Web Asset Files របស់អ្នក

ឧទាហរណ៏នេះនឹងបញ្ចូលនូវការប្រើប្រាស់ Bootstrap CSS framework, jQuery, FontAwesome និង CSS ព្រមទាំង JavaScript application files ធម្មតាខ្លះៗ (ហៅថា main.css និង main.js) ។ សូមងាកទៅមើលឧទាហរណ៏ខាងក្រោម៖

 

គ) ការរួមបញ្ចូល និងធ្វើអោយ CSS Files ទៅជាតូច និង ចងក្រង SCSS Files

ជាដំបូងត្រូវ configure scssphp Assetic filter ថ្មី៖

 

តម្លៃនៃ formatter option គឺ class name ពោរពេញទៅដោយគុណភាពនៃទំរង់ដែលប្រើដោយ filter ដែលផលិតនូវការចងក្រង CSS file។ ការប្រើ compresed formatter នឹងធ្វើអោយលទ្ធផលទៅជាតូចបំផុត ដោយមិនគិតទៅលើ files ដើមដូចជា CSS files រឺក៏ SCSS files ធម្មតាទេ។

បន្ទាប់មកទៀត ធ្វើការកែទៅលើ Twig template ដោយបន្ថែម {% stylesheets %} tag ដែលកំណត់ដោយAssetic៖

 

ការ configuration ធម្មតាមួយនេះធ្វើការចងក្រង រួមបញ្ចូលគ្នានិងធ្វើអោយ SCSS files ទៅជាតូចទៅក្នុង CSS file ធម្មតាដែលដាក់ក្នុង web/css/app.css

ឃ) ការរួមបញ្ចូលនិងធ្វើអោយតូចនូវ JavaScript Files

ដំបូងត្រូវ configure jsqueeze Assetic filter ថ្មីដូចខាងក្រោម៖

 

បន្ទាប់មក ធ្វើការកែកូដនៃ Twig template របស់អ្នកដោយបន្ថែម {% javascripts %} tag ដោយកំណត់ដោយ Assetic៖

 

ការ configuration ធម្មតាមួយនេះធ្វើការចងក្រង រួមបញ្ចូលគ្នានៃ JavaScript files ទាំងអស់ និងធ្វើអោយ អត្ថបទទៅជាតូច និងរក្សាទុកក្នុង web/js/app.js

ចែករំលែក​អត្ថបទនេះទៅកាន់៖

Exit mobile version