gremo / assetic-extra
用于与 Symfony AsseticBundle 一起使用的额外 assetic 资源集合。
Requires
- php: >=5.3.2
Requires (Dev)
- php: >=5.3.2
- kriswallsmith/assetic: ^1.1
README
用于与 Symfony AsseticBundle 一起使用的 assetic 资源集合。
目录
安装
使用 Composer 安装此库
composer require gremo/assetic-extra
过滤器
注意:在 Symfony 3.3 中,您可以用
%kernel.root_dir%/..
替换%kernel.project_dir%
以进行过滤器配置。
以下额外的过滤器可以配置并用于您的模板中。
Babel
node.js 的 JavaScript 编译器(https://babel.node.org.cn)。
配置
assetic: # ... babeljs: resource: '%kernel.root_dir%/../vendor/gremo/assetic-extra/Resources/filter/babeljs.xml' # options here
选项(参考)
bin
:您的babel
二进制文件的路径(默认:/usr/bin/babel
)retain_lines
presets
:要使用的预置的string
或array
(如果全局安装,则为预置名称,否则为路径)plugins
:要使用的插件的string
或array
(如果全局安装,则为插件名称,否则为路径)compact
minified
no_babel_rc
auxiliary_comment_before
auxiliary_comment_after
parser_opts
generator_opts
注意:Babel 将在当前资产目录中查找
.babelrc
文件,并将遍历目录树(见 查找行为),除非您指定了no_babel_rc
选项。这意味着您可以将.babelrc
文件放在您的项目根目录中,而不会使config.yml
文件杂乱。
用法
{% javascripts '../app/Resources/js/*.js' filter='babeljs' %} <script src="{{ asset_url }}"></script> {% endjavascripts %}
Browserify
允许您在浏览器中 require('modules')
(http://browserify.org)。
归功于原作者(https://github.com/kriswallsmith/assetic/pull/669),我对其进行了一些修改,并添加了转换支持。
配置
assetic: # ... browserify: resource: '%kernel.root_dir%/../vendor/gremo/assetic-extra/Resources/filter/browserify.xml' # options here
选项
bin
:您的browserify
二进制文件的路径(默认:/usr/bin/browserify
)node
:您的node
二进制文件的路径(默认:%assetic.node.bin%
,设置为null
以使用browserify
二进制文件)node_paths
:在使用node
选项时添加到 Node.js 环境的路径(默认:%assetic.node.paths%
)transforms
:要应用的 Browserify 转换的string
或array
用法
注意:只要您需要
module
,就不需要组合资产(例如示例中的modules/module1.js
)。Browserify 过滤器将负责在输出文件中将它们组合在一起。
{% javascripts '../app/Resources/js/main.js' filter='browserify' %} <script src="{{ asset_url }}"></script> {% endjavascripts %}
注意:只有当您更改“主”脚本时,
assetic:watch
命令才会重新生成资产。模块更改不会被监视,因为它们不包括在javascripts
标签中。
main.js
的示例
// main.js require('./modules/module1.js'); console.log('main.js');
modules/module1.js
的示例
// modules/module1.js console.log('modules/module1.js');
CSSO
CSSO (CSS Optimizer) 是一个 CSS 最小化工具 (https://github.com/css/csso).
配置
assetic: # ... csso: resource: '%kernel.root_dir%/../vendor/gremo/assetic-extra/Resources/filter/csso.xml' # options here
选项 (参考)
bin
:您的csso
二进制文件的路径(默认:/usr/bin/csso
)注释
force_media_merge
restructure_off
用法
用法
{% stylesheets '../app/Resources/css/*' filter='csso' %} <link rel="stylesheet" href="{{ asset_url }}" /> {% endstylesheets %}
提示:快速且安全的选择
csso: # ... comments: none restructure_off: true
PostCSS
一个使用 JavaScript 转换 CSS 的工具 (https://postcss.org.cn).
配置
assetic: # ... postcss: resource: '%kernel.root_dir%/../vendor/gremo/assetic-extra/Resources/filter/postcss.xml' # options here
选项 (参考)
bin
:您的postcss
二进制文件的路径(默认:/usr/bin/postcss
)no_map
:禁用默认的行内源映射use
:要使用的 postcss 插件列表parser
:自定义 postcss 解析器stringifier
:自定义 postcss 字符串化器syntax
:自定义 postcss 语法config
:设置查找配置文件的自定义路径
用法
{% stylesheets '../app/Resources/css/*' filter='postcss' %} <link rel="stylesheet" href="{{ asset_url }}" /> {% endstylesheets %}
Node-sass
使用 node.js 的 LibSass 绑定将 SASS/SCSS 解析为 CSS (https://github.com/sass/node-sass).
配置
assetic: # ... nodesass: resource: '%kernel.root_dir%/../vendor/gremo/assetic-extra/Resources/filter/nodesass.xml' # options here
选项 (参考)
bin
:您的node-sass
二进制文件的路径(默认:/usr/bin/node-sass
)import_paths
indent_type
indent_width
linefeed
output_style
precision
source_comments
source_map_location
source_map_public_dir
用法
{% stylesheets '../app/Resources/scss/style.scss' filter='nodesass' %} <link rel="stylesheet" href="{{ asset_url }}" /> {% endstylesheets %}
提示:Bootstrap 4
使用这些选项用于 Bootstrap 4(见 package.json)
nodesass: # ... precision: 6
提示:源映射
为了生成源映射,您需要指定一个公开可访问的目录,其中可以放置 .map
文件(source_map_location
),以及用于生成映射文件 URL 的基本路径(source_map_public_dir
)
nodesass: # ... source_map_location: '%kernel.root_dir%/../web/assets/maps' source_map_public_dir: '/assets/maps'
食谱
ES6 模块与 Browserify
使用 import/export 风格编写 ES6 JavaScript 模块,并在浏览器中使其工作 https://caniuse.cn/#feat=es6-module。
问题:Browserify 过滤器转换您的源文件而不是转换后的文件,因此在第一个 import
或 export
关键字时将失败。 解决方案:仅使用带有 babelify 转换过滤器配置的 browserify
过滤器。
注意 如果 Browserify 找不到 babelify 模块,请在您的项目文件夹中本地安装它并使用绝对路径。
browserify: resource: '%kernel.root_dir%/../vendor/gremo/assetic-extra/Resources/filter/browserify.xml' transforms: - '[ babelify --presets env ]'