Share Quản lý tài nguyên CSS và JavaScript với thư viện Assetic

filiallion · 03/17/2018

Assetic là thư viện PHP dùng để quản lý tài nguyên CSS và JavaScript được sử dụng khá phổ biến, nhất là khi các bạn muốn phát triển các dự án web có thiết kế nhiều thành phần ghép nối lại với nhau thì thư viện Assetic sẽ giúp các bạn quản lý rất tốt các tập tin CSS (Kể cả biên dịch less, sass và scss thành CSS) và JavaScript. Thư viện Assetic quản lý các tài nguyên này bằng cách ghép nối các tập tin tài nguyên lại thành một tập tin duy nhất và nén nội dung này lại sao cho dung lượng tập tin là nhỏ nhất giúp cải thiện tốc độ của website khá nhiều.

Các bạn tải thư viện Assetic tại địa chỉ https://github.com/kriswallsmith/assetic.

Ví dụ tôi muốn ghép nối tất cả các tập tin CSS bên trong một thư mục và một tập tin CSS được chỉ định cụ thể các bạn thực hiện như sau:

PHP:

//Khai báo sử dụng các thư viện
use Assetic\Asset\AssetCollection;
use Assetic\Asset\FileAsset;
use Assetic\Asset\GlobAsset;

//Thực hiện ghép nối các tập tin CSS trong thư mục và một tập tin CSS được chỉ định cụ thể
$css = new AssetCollection(array(
    new GlobAsset('path/to/css/*'),
    new FileAsset('path/.o/filename.css')
));

//Xuất nội dung CSS đã được ghép nối
echo $css->dump();

Với tập tin JavaScript các bạn cũng thực hiện tương tự như ví dụ trên.

Các bạn cũng có thể biên dịch tập tin less thành CSS và ghép nối với các tập tin CSS khác như ví dụ sau:

PHP:

//Khai báo sử dụng các thư viện
use Assetic\Asset\AssetCollection;
use Assetic\Asset\FileAsset;
use Assetic\Asset\GlobAsset;
use Assetic\Filter\LessFilter;
use Assetic\Filter\Yui;

//Thực hiện biên dịch less thành CSS và ghép nối với các tập tin CSS khác trong thư mục được chỉ định đồng thời nén tập tin
$css = new AssetCollection(array(
    new FileAsset('path/to/filename.less', array(new LessFilter())),
    new GlobAsset('path/to/css/*'),
), array(
    new Yui\CssCompressorFilter('path/to/yuicompressor.jar'),
));

//Xuất nội dung CSS
echo $css->dump();

Thư viện Assetic còn nhiều chức năng khác các bạn có thể tìm hiểu thêm tại địa chỉ https://github.com/kriswallsmith/assetic.

Share Quản lý tài nguyên CSS và JavaScript với thư viện Assetic

filiallion

Administrator