eusonlito / laravel-packer
一个打包 CSS 和 JavaScript 文件的包
v3.0.0
2023-03-02 23:44 UTC
Requires
- php: >=5.5
- imagecow/imagecow: ^2.4
Requires (Dev)
- mikey179/vfsstream: ^1.6
- phpunit/phpunit: ^7.5
README
灵感来源于: https://github.com/ceesvanegmond/minify
使用本包,您可以打包和压缩现有的 CSS 和 JavaScript 文件。这个过程可能有点困难,但这个包简化了此过程并自动化了它。
此外,您还可以调整/裁剪图片以适应布局中的缩略图。
如果您需要一个与 Laravel <= 4.2 兼容的版本,请使用 v4.2
分支。
安装
首先通过 Composer 安装此包。
{ "require": { "eusonlito/laravel-packer": "master-dev" } }
Laravel 安装
// config/app.php 'providers' => [ '...', 'Eusonlito\LaravelPacker\PackerServiceProvider', ]; 'aliases' => [ '...', 'Packer' => 'Eusonlito\LaravelPacker\Facade', ];
发布配置文件
php artisan vendor:publish --provider="Eusonlito\LaravelPacker\PackerServiceProvider"
现在您有一个可用的 Packer
门面。
CSS
// resources/views/hello.blade.php <html> <head> // Pack a simple file {!! Packer::css('/css/main.css', '/storage/cache/css/main.css') !!} // Pack a simple file using cache_folder option as storage folder to packed file {!! Packer::css('/css/main.css', 'css/main.css') !!} // Packing multiple files {!! Packer::css(['/css/main.css', '/css/bootstrap.css'], '/storage/cache/css/styles.css') !!} // Packing multiple files using cache_folder option as storage folder to packed file {!! Packer::css(['/css/main.css', '/css/bootstrap.css'], 'css/styles.css') !!} // Packing multiple files with autonaming based {!! Packer::css(['/css/main.css', '/css/bootstrap.css'], '/storage/cache/css/') !!} // pack and combine all css files in given folder {!! Packer::cssDir('/css/', '/storage/cache/css/all.css') !!} // pack and combine all css files in given folder using cache_folder option as storage folder to packed file {!! Packer::cssDir('/css/', 'css/all.css') !!} // Packing multiple folders {!! Packer::cssDir(['/css/', '/theme/'], '/storage/cache/css/all.css') !!} // Packing multiple folders with recursive search {!! Packer::cssDir(['/css/', '/theme/'], '/storage/cache/css/all.css', true) !!} // Packing multiple folders with recursive search and autonaming {!! Packer::cssDir(['/css/', '/theme/'], '/storage/cache/css/', true) !!} // Packing multiple folders with recursive search and autonaming using cache_folder option as storage folder to packed file {!! Packer::cssDir(['/css/', '/theme/'], 'css/', true) !!} </head> </html>
CSS 的 url()
值将被转换为绝对路径,以避免文件引用问题。
JavaScript
// resources/views/hello.blade.php <html> <body> ... // Pack a simple file {!! Packer::js('/js/main.js', '/storage/cache/js/main.js') !!} // Pack a simple file using cache_folder option as storage folder to packed file {!! Packer::js('/js/main.js', 'js/main.js') !!} // Packing multiple files {!! Packer::js(['/js/main.js', '/js/bootstrap.js'], '/storage/cache/js/styles.js') !!} // Packing multiple files using cache_folder option as storage folder to packed file {!! Packer::js(['/js/main.js', '/js/bootstrap.js'], 'js/styles.js') !!} // Packing multiple files with autonaming based {!! Packer::js(['/js/main.js', '/js/bootstrap.js'], '/storage/cache/js/') !!} // pack and combine all js files in given folder {!! Packer::jsDir('/js/', '/storage/cache/js/all.js') !!} // pack and combine all js files in given folder using cache_folder option as storage folder to packed file {!! Packer::jsDir('/js/', 'js/all.js') !!} // Packing multiple folders {!! Packer::jsDir(['/js/', '/theme/'], '/storage/cache/js/all.js') !!} // Packing multiple folders with recursive search {!! Packer::jsDir(['/js/', '/theme/'], '/storage/cache/js/all.js', true) !!} // Packing multiple folders with recursive search and autonaming {!! Packer::jsDir(['/js/', '/theme/'], '/storage/cache/js/', true) !!} // Packing multiple folders with recursive search and autonaming using cache_folder option as storage folder to packed file {!! Packer::jsDir(['/js/', '/theme/'], 'js/', true) !!} </body> </html>
图片
所有可用的转换选项请见 https://github.com/oscarotero/imageCow
// resources/views/hello.blade.php <html> <body> ... // Set width size to 500px using cache_folder default parameter (from settings) <img src="{{ Packer::img('/images/picture.jpg', 'resize,500') }}" /> // Crop image to 200px square with custom cache folder (full path) <img src="{{ Packer::img('/images/picture.jpg', 'resizeCrop,200,200', '/storage/cache/images/') }}" /> // Crop image to 200px square center middle with custom cache folder (using cache_folder as base) <img src="{{ Packer::img('/images/picture.jpg', 'resizeCrop,200,200', 'images/') }}" /> // Crop image to 200px square center top with custom cache folder (using cache_folder as base) <img src="{{ Packer::img('/images/picture.jpg', 'resizeCrop,200,200,center,top', 'images/') }}" /> </body> </html>
配置
return array( /* |-------------------------------------------------------------------------- | Current environment |-------------------------------------------------------------------------- | | Set the current server environment. Leave empty to laravel autodetect | */ 'environment' => '', /* |-------------------------------------------------------------------------- | App environments to not pack |-------------------------------------------------------------------------- | | These environments will not be minified and all individual files are | returned | */ 'ignore_environments' => ['local'], /* |-------------------------------------------------------------------------- | Public accessible path |-------------------------------------------------------------------------- | | Set absolute folder path to public view from web. If you are using | laravel, this value will be set with public_path() function | */ 'public_path' => realpath(getenv('DOCUMENT_ROOT')), /* |-------------------------------------------------------------------------- | Asset absolute location |-------------------------------------------------------------------------- | | Set absolute URL location to asset folder. Many times will be same as | public_path but using absolute URL. If you are using laravel, this value | will be set with asset() function | */ 'asset' => 'http://'.getenv('SERVER_NAME').'/', /* |-------------------------------------------------------------------------- | Base folder to store packed files |-------------------------------------------------------------------------- | | If you are using relative paths to second paramenter in css and js | commands, this files will be created with this folder as base. | | This folder in relative to 'public_path' value | */ 'cache_folder' => '/storage/cache/', /* |-------------------------------------------------------------------------- | Check if some file to pack have a recent timestamp |-------------------------------------------------------------------------- | | Compare current packed file with all files to pack. If exists one more | recent than packed file, will be packed again with a new autogenerated | name. | */ 'check_timestamps' => true, /* |-------------------------------------------------------------------------- | Check if you want minify css files or only pack them together |-------------------------------------------------------------------------- | | You can check this option if you want to join and minify all css files or | only join files | */ 'css_minify' => true, /* |-------------------------------------------------------------------------- | Check if you want minify js files or only pack them together |-------------------------------------------------------------------------- | | You can check this option if you want to join and minify all js files or | only join files | */ 'js_minify' => true, /* |-------------------------------------------------------------------------- | Use fake images stored in src/images/ when original image does not exists |-------------------------------------------------------------------------- | | You can use fake images in your developments to avoid not existing | original images problems. Fake images are stored in src/images/ and used | with a rand | */ 'images_fake' => true );
如果您设置了 'check_timestamps'
选项,则会在最终文件名中添加时间戳值。
在 Laravel 外部使用 Packer
require (__DIR__.'/vendor/autoload.php'); // Check default settings $config = require (__DIR__.'/src/config/config.php'); $Packer = new Eusonlito\LaravelPacker\Packer($config); echo $Packer->css([ '/resources/css/styles-1.css', '/resources/css/styles-2.css' ], 'css/styles.css')->render(); echo $Packer->js('/resources/js/scripts.js', 'js/scripts.js')->render(); echo $Packer->js([ '/resources/js/scripts-1.js', '/resources/js/scripts-2.js' ], 'js/')->render();