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 的工具 (http://postcss.org).

配置

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 ]'

gremo / assetic-extra

维护者

详细信息

README

目录

安装

过滤器

Babel

Browserify

CSSO

PostCSS

Node-sass

食谱

ES6 模块与 Browserify