gremo/assetic-extra

此包已被废弃,不再维护。未建议替代包。

用于与 Symfony AsseticBundle 一起使用的额外 assetic 资源集合。

v1.1.0 2018-03-25 01:18 UTC

This package is auto-updated.

Last update: 2020-09-04 16:05:22 UTC


README

Latest stable Downloads total GitHub issues

用于与 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:要使用的预置的 stringarray(如果全局安装,则为预置名称,否则为路径)
  • plugins:要使用的插件的 stringarray(如果全局安装,则为插件名称,否则为路径)
  • 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 转换的 stringarray

用法

注意:只要您需要 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 过滤器转换您的源文件而不是转换后的文件,因此在第一个 importexport 关键字时将失败。 解决方案:仅使用带有 babelify 转换过滤器配置的 browserify 过滤器。

注意 如果 Browserify 找不到 babelify 模块,请在您的项目文件夹中本地安装它并使用绝对路径。

browserify:
    resource: '%kernel.root_dir%/../vendor/gremo/assetic-extra/Resources/filter/browserify.xml'
    transforms:
        - '[ babelify --presets env ]'