ការប្រើប្រាស់ Assetic នៅក្នុង Symfony3 (ភាគទី០៣)
ជំហានទី៥៖ របៀប Minify CSS/JS Files (ប្រើប្រាស់ UglifyJS និង UglifyCSS)។ UglifyJS ជា JavaScript parser/compressor/beautifier toolkit ។ វាអាចប្រើក្នុងការរួមបញ្ចូលគ្នានិងធ្វើអោយ JavaScript assets ទៅជាតូចដូចនេះហើយដែលពួកគេទាមទារនូវ HTTP requests តិច និងធ្វើអោយវេបសាយរបស់អ្នកដំណើរការបានលឿន។ UglifyCSS ជា CSS compressor/beautifier ដែលវាស្រដៀងទៅនឹង UglifyJS ដែរ។
ក) ការតម្លើង UglifyJS
UglifyJS គឺអាចប្រើបានជា Node.js module។ ដំបូងអ្នកត្រូវតម្លើង Node.js បន្ទាប់មកត្រូវសម្រេចចិត្តថាត្រូវតម្លើង method global រឺក៏ local ។
ខ) ការតម្លើង Global
ការតម្លើង global method គឺធ្វើអោយ projects ទាំងអស់របស់អ្នកប្រើនូវ UglifyJS version ដូចគ្នា ដែលសម្រួលដល់ការថែទាំរបស់វា។ បើក command console របស់អ្នកនិងដំណើរការនូវ command ដូចខាងក្រោម៖
ពេលនេះអ្នកអាចដំណើរការ global uglifyjs command នៅកន្លែងណាមួយនៃ system របស់អ្នក៖
វាក៏អាចទៅរួចដែរក្នុងការតម្លើង UglifyJS នៅក្នុង project របស់អ្នក ដែលជារបស់ពេញនិយមនៅពេលដែល project របស់អ្នកទាមទារអោយបញ្ជាក់នូវ UglifyJS version ។ ដើម្បីធ្វើបានអ្នកត្រូវតម្លើងវាក្រៅពី -g option និង បញ្ជាក់ពីទីតាំងនៃកន្លែងដាក់ module ៖
វាណែនាំដែលអ្នកតម្លើង UglifyJS ក្នុង app/Resource folder របស់អ្នកនិងបន្ថែម node_modules folder ទៅ version control ។ ជាជម្រើស អ្នកអាចបង្កើត npm package.json file និងបញ្ជាក់អំពីការអាស្រ័យទីនោះ។
ពេលនេះអ្នកអាចដំណើរការ uglifyjs command ដែលមានក្នុង node_modules directory ៖
គ) ការ configure uglifyjs2 Filter
ពេលនេះយើងត្រូវ configure Symfony ដើម្បីប្រើ uglifyjs2 filter ពេលដំណើរការ JavaScripts៖
ឃ) ការ configure node Binary
Assetic ព្យាយាមស្វែងរក node binary ដោយស្វ័យប្រវត្តិ។ប្រសិនបើវារកមិនឃើញ អ្នកអាច configure ទីតាំងរបស់វា ដោយប្រើ node key៖
ង) ការធ្វើអោយ Assets របស់អ្នកទៅជាតូច
ក្នុងដំណាក់កាលស្នើរ UglifyJS លើ assets អ្នកត្រូវបន្ថែម filter option ក្នុង asset tags នៃ templates របស់អ្នកដើម្បីប្រាប់ទៅកាន់ Assetic ដែលប្រើនូវ uglifyjs2 filter៖
ច) ការតម្លើង ការ configure និងប្រើ UglifyCSS
ការប្រើ UglifyCSS គឺដូចទៅនឹង UglifyJS ដែរ គឺដំបូងត្រូវប្រាកដថា node package គឺបានតម្លើងហើយ៖
បន្ទាប់មកបន្ថែម configuration សម្រាប់ filter៖
ដើម្បីប្រើ filter សម្រាប់ CSS files គឺត្រូវថែម filter ទៅកាន់ Assetic stylesheets helpter៖
ជំហានទី៦៖ របៀប Minify JavaScripts និង Stylesheets ជាមួយ YUI Compressor
ក) ការទាញយក YUI Compressor JAR
YUI Compressor គឺសរសេរក្នុង java និងចែកចាយជា JAR។ ការដោនឡូតយក JAR ពី វេបសាយ Yahoo! និងរក្សាវាទុកក្នុង app/Resources/java/yuicompressor.jar ។
ខ) ការ configure YUI Filters
ពេលនេះអ្នកត្រូវ configure Assetic filters ចំនួន២ ក្នុង application ដែលមួយសម្រាប់ ការធ្វើអោយ JavaScripts ជាមួយនឹង YUI Compressor ទៅជាតូច និងមួយទៀតគឺសម្រាប់ធ្វើអោយ stylesheets ទៅជាតូច៖
ពេលនេះអ្នកអាចចូលទៅកាន់ Assetic filters ថ្មីទាំង២នោះបានហើយ (yui_css និង yui_js)។ យើងនឹងប្រើ YUI Compressor ដើម្បីបង្រួម stylesheet និង JavaScripts។
គ) ការធ្វើអោយ Assets ទៅជាតូច
អ្នកបាន configure YUI Compressor រួចហើយប៉ុន្តែ វាមិនមានអ្វីកើតឡើងនៅលើ filters ទាំង២នោះទេ។ តាំងពី assets ជាផ្នែកមួយនៃ view layer ការងារនេះគឺត្រូវបានធ្វើក្នុង templates៖
ជាមួយនឹងការបន្ថែមនៃ yui_js filter ទៅកាន់ asset tags ខាងលើ អ្នកគួរមើលទៅលើការបង្រួម JavaScripts ទៅជាតូច។ ដូចគ្នាទៅនឹងដំណើរការដែលអាចនឹងកើតឡើងម្ដងទៀតក្នងការបង្រួម stylesheets។
