assetic Winter CMS 팀에서 관리하는 PHP용 자산 관리 프레임워크입니다.
<?php
use assetic Asset AssetCollection ;
use assetic Asset FileAsset ;
use assetic Asset GlobAsset ;
$ js = new AssetCollection ( array (
new GlobAsset ( ' /path/to/js/* ' ),
new FileAsset ( ' /path/to/another.js ' ),
));
// the code is merged when the asset is dumped
echo $ js -> dump ();
assetic 자산은 로드 및 덤프할 수 있는 필터링 가능한 콘텐츠가 포함된 자산입니다. 자산에는 메타데이터도 포함되어 있으며 그 중 일부는 조작할 수 있고 일부는 변경할 수 없습니다.
재산 | 접속자 | 돌연변이원 |
---|---|---|
콘텐츠 | getContent | setContent |
시간 | getLastModified | 해당 없음 |
소스 루트 | getSourceRoot | 해당 없음 |
소스 경로 | getSourcePath | 해당 없음 |
대상 경로 | getTargetPath | setTargetPath |
"대상 경로" 속성은 자산(또는 자산 모음)을 덤프해야 하는 위치를 나타냅니다.
필터를 적용하여 자산을 조작할 수 있습니다.
<?php
use assetic Asset AssetCollection ;
use assetic Asset FileAsset ;
use assetic Asset GlobAsset ;
use assetic Filter LessFilter ;
use assetic Filter UglifyCssFilter ;
$ css = new AssetCollection ( array (
new FileAsset ( ' /path/to/src/styles.less ' , array ( new LessFilter ())),
new GlobAsset ( ' /path/to/css/* ' ),
), array (
new UglifyCssFilter ( ' /path/to/uglifycss ' ),
));
// this will echo CSS compiled by LESS and compressed by uglifycss
echo $ css -> dump ();
컬렉션에 적용된 필터는 반복할 경우 각 자산 리프에 계단식으로 적용됩니다.
<?php
foreach ( $ css as $ leaf ) {
// each leaf is compressed by uglifycss
echo $ leaf -> dump ();
}
코어는 assetic Filter
네임스페이스에 다음 필터를 제공합니다.
CoffeeScriptFilter
: CoffeeScript를 Javascript로 컴파일합니다.CssImportFilter
: 가져온 스타일시트를 인라인합니다.CSSMinFilter
: CSS를 축소합니다.CssRewriteFilter
: 새 URL로 이동할 때 CSS 자산의 상대 URL을 수정합니다.GoogleClosureCompilerApiFilter
: Google Closure Compiler API를 사용하여 자바스크립트를 컴파일합니다.HandlebarsFilter
: Handlebars 템플릿을 Javascript로 컴파일합니다.JavaScriptMinifierFilter
: 자바스크립트를 축소합니다.JpegoptimFilter
: JPEG 최적화JpegtranFilter
: JPEG 최적화LessFilter
: LESS를 CSS로 구문 분석합니다(node.js와 함께 less.js 사용).LessphpFilter
: LESS를 CSS로 구문 분석합니다(lessphp 사용).OptiPngFilter
: PNG 최적화PackerFilter
: Dean Edwards의 Packer를 사용하여 Javascript를 압축합니다.PhpCssEmbedFilter
: 스타일시트에 이미지 데이터를 삽입합니다.ReactJsxFilter
: React JSX를 JavaScript로 컴파일합니다.ScssphpFilter
: SCSS를 CSS로 구문 분석합니다.SeparatorFilter
: 병합 실패를 방지하기 위해 자산 사이에 구분 기호를 삽입합니다.StylesheetMinifyFilter
: 스타일시트 CSS 파일을 압축합니다.StylusFilter
: STYL을 CSS로 구문 분석합니다.TailwindCssFilter
: Tailwind CSS 독립 실행형 CLI 유틸리티를 사용하여 Tailwind CSS 스타일시트를 빌드합니다.TypeScriptFilter
: TypeScript를 Javascript로 구문 분석합니다.UglifyCssFilter
: CSS를 축소합니다.UglifyJs2Filter
: Javascript를 축소합니다.UglifyJs3Filter
: Javascript를 축소합니다. 자산 정리를 위해 자산 관리자가 제공됩니다.
<?php
use assetic AssetManager ;
use assetic Asset FileAsset ;
use assetic Asset GlobAsset ;
$ am = new AssetManager ();
$ am -> set ( ' jquery ' , new FileAsset ( ' /path/to/jquery.js ' ));
$ am -> set ( ' base_css ' , new GlobAsset ( ' /path/to/css/* ' ));
중복을 피하기 위해 자산 관리자를 사용하여 자산을 참조할 수도 있습니다.
<?php
use assetic Asset AssetCollection ;
use assetic Asset AssetReference ;
use assetic Asset FileAsset ;
$ am -> set ( ' my_plugin ' , new AssetCollection ( array (
new AssetReference ( $ am , ' jquery ' ),
new FileAsset ( ' /path/to/jquery.plugin.js ' ),
)));
필터 정리를 위한 필터 관리자도 제공됩니다.
<?php
use assetic FilterManager ;
use assetic Filter ScssFilter ;
use assetic Filter CssMinFilter ;
$ fm = new FilterManager ();
$ fm -> set ( ' sass ' , new ScssFilter ( ' /path/to/parser/scss ' ));
$ fm -> set ( ' cssmin ' , new CssMinFilter ());
이러한 객체를 모두 직접 생성하고 싶지 않다면 자산 팩토리를 사용하면 대부분의 작업을 대신 수행할 수 있습니다.
<?php
use assetic Factory AssetFactory ;
$ factory = new AssetFactory ( ' /path/to/asset/directory/ ' );
$ factory -> setAssetManager ( $ am );
$ factory -> setFilterManager ( $ fm );
$ factory -> setDebug ( true );
$ css = $ factory -> createAsset ( array (
' @reset ' , // load the asset manager's "reset" asset
' css/src/*.scss ' , // load every scss files from "/path/to/asset/directory/css/src/"
), array (
' scss ' , // filter through the filter manager's "scss" filter
' ?cssmin ' , // don't use this filter in debug mode
));
echo $ css -> dump ();
AssetFactory
는 상대 자산 경로의 기본 디렉터리로 사용되는 루트 디렉터리로 구성됩니다.
cssmin
이 여기에 있는 것처럼 필터 이름 앞에 물음표를 붙이면 팩토리가 디버그 모드에 있을 때 해당 필터가 생략됩니다.
또한 공장에 작업자를 등록할 수 있으며 공장에서 생성된 모든 자산은 반환되기 전에 작업자의 process()
메서드에 전달됩니다. 예시는 아래의 캐시 무효화를 참조하세요.
AssetManager가 보유하는 모든 자산을 디렉터리의 파일로 덤프할 수 있습니다. 파일이 정적으로 제공될 수 있도록 이는 아마도 웹 서버의 문서 루트 아래에 있을 것입니다.
<?php
use assetic AssetWriter ;
$ writer = new AssetWriter ( ' /path/to/web ' );
$ writer -> writeManagerAssets ( $ am );
그러면 자산의 대상 경로가 활용됩니다.
방금 설명한 대로 정적 파일에서 자산을 제공하는 경우 CacheBustingWorker를 사용하여 자산의 대상 경로를 다시 작성할 수 있습니다. 특정 버전의 자산에 대해 고유한 파일 이름 확장자 앞에 식별자를 삽입합니다.
이 식별자는 자산의 수정 시간을 기반으로 하며 적용된 필터가 이를 지원하는 경우 종속 자산도 고려합니다.
<?php
use assetic Factory AssetFactory ;
use assetic Factory Worker CacheBustingWorker ;
$ factory = new AssetFactory ( ' /path/to/asset/directory/ ' );
$ factory -> setAssetManager ( $ am );
$ factory -> setFilterManager ( $ fm );
$ factory -> setDebug ( true );
$ factory -> addWorker ( new CacheBustingWorker ());
$ css = $ factory -> createAsset ( array (
' @reset ' , // load the asset manager's "reset" asset
' css/src/*.scss ' , // load every scss files from "/path/to/asset/directory/css/src/"
), array (
' scss ' , // filter through the filter manager's "scss" filter
' ?yui_css ' , // don't use this filter in debug mode
));
echo $ css -> dump ();
불필요한 작업을 피하기 위해 간단한 캐싱 메커니즘이 제공됩니다.
<?php
use assetic Asset AssetCache ;
use assetic Asset FileAsset ;
use assetic Cache FilesystemCache ;
use assetic Filter JavaScriptMinifierFilter ;
$ jsMinifier = new JavaScriptMinifierFilter ();
$ js = new AssetCache (
new FileAsset ( ' /path/to/some.js ' , array ( $ jsMinifier )),
new FilesystemCache ( ' /path/to/cache ' )
);
// the JavaScriptMinifierFilter compressor will only run on the first call
$ js -> dump ();
$ js -> dump ();
$ js -> dump ();
assetic Twig 확장을 사용하려면 이를 Twig 환경에 등록해야 합니다.
<?php
$ twig -> addExtension ( new assetic Extension ( $ factory ));
일단 설치되면 확장 기능은 자산 팩토리에서 사용하는 것과 유사한 구문을 사용하여 스타일시트와 자바스크립트 태그를 노출합니다.
{% stylesheets '/path/to/sass/main.sass' filter = 'sass,?yui_css' output = 'css/all.css' %}
< link href = " {{ asset_url }} " type = " text/css " rel = " stylesheet " />
{% endstylesheets %}
이 예에서는 필터링된 자산을 찾을 수 있는 URL이 포함된 페이지에 하나의 link
요소를 렌더링합니다.
확장이 디버그 모드에 있을 때 이 동일한 태그는 css/src/*.sass
glob에서 참조하는 각 자산에 대해 하나씩 여러 link
요소를 렌더링합니다. ?
를 사용하여 선택 사항으로 표시하지 않는 한 지정된 필터는 계속 적용됩니다. 접두사.
이 동작은 태그에 debug
속성을 설정하여 트리거될 수도 있습니다.
{% stylesheets 'css/*' debug = true %} ... {% stylesheets %}
이러한 자산은 웹 디렉터리에 기록되어야 해당 URL이 404 오류를 반환하지 않습니다.
<?php
use assetic AssetWriter ;
use assetic Extension Twig TwigFormulaLoader ;
use assetic Extension Twig TwigResource ;
use assetic Factory LazyAssetManager ;
$ am = new LazyAssetManager ( $ factory );
// enable loading assets from twig templates
$ am -> setLoader ( ' twig ' , new TwigFormulaLoader ( $ twig ));
// loop through all your templates
foreach ( $ templates as $ template ) {
$ resource = new TwigResource ( $ twigLoader , $ template );
$ am -> addResource ( $ resource , ' twig ' );
}
$ writer = new AssetWriter ( ' /path/to/web ' );
$ writer -> writeManagerAssets ( $ am );
assetic Python webassets 라이브러리(GitHub에서 사용 가능)를 기반으로 합니다.