使用以下配置,即使在开发环境(我目前正在使用的环境)中,我的css和javascript文件也会缩小并组合到浏览器中。
如何让Assetic既不会在开发环境中合并也不会缩小这些文件?
应用/配置/配置/ YML
assetic:
debug: %kernel.debug%
use_controller: false
bundles: [ MyFirstBundle, MySecondBundle, MyThirdBundle ]
filters:
cssrewrite: ~
yui_css:
jar: %kernel.root_dir%/Resources/java/yuicompressor-2.4.7.jar
yui_js:
jar: %kernel.root_dir%/Resources/java/yuicompressor-2.4.7.jar
less:
node: %less_node_bin%
node_paths: [%less_node_modules%]
apply_to: ".less$"
assets:
main_css:
inputs:
- %kernel.root_dir%/../web/css/file01.css
- %kernel.root_dir%/../web/css/file02.css
- %kernel.root_dir%/../web/css/file03.css
output: css/main.css
filter:
- yui_css
- less
other_css:
inputs:
- %kernel.root_dir%/../web/css/file04.css
- %kernel.root_dir%/../web/css/file05.css
- %kernel.root_dir%/../web/css/file06.css
output: css/other.css
filter:
- yui_css
- less
other_js:
inputs:
- %kernel.root_dir%/../src/My/FirstBundle/Resources/public/js/file01.js
- %kernel.root_dir%/../src/My/FirstBundle/Resources/public/js/file02.js
- %kernel.root_dir%/../src/My/FirstBundle/Resources/public/js/file03.js
output: js/other.js
filter:
- yui_js
main_js:
inputs:
- %kernel.root_dir%/../src/My/FirstBundle/Resources/public/js/file01.js
- %kernel.root_dir%/../src/My/FirstBundle/Resources/public/js/file02.js
- %kernel.root_dir%/../src/My/FirstBundle/Resources/public/js/file03.js
output: js/main.js
filter:
- yui_js
应用/配置/ config_dev.yml
assetic:
debug: %kernel.debug%
use_controller: true
bundles: [ MyFirstBundle, MySecondBundle, MyThirdBundle ]
filters:
cssrewrite: ~
yui_css:
jar: %kernel.root_dir%/Resources/java/yuicompressor-2.4.7.jar
yui_js:
jar: %kernel.root_dir%/Resources/java/yuicompressor-2.4.7.jar
assets:
树枝模板:
<head>
<meta charset="utf-8">
<title>My title</title>
{% block stylesheets %}
<link rel="stylesheet" href="{{ asset('css/main.css') }}">
{% endblock %}
{% block javascripts %}
<script src="{{ asset('js/main.js') }}"></script>
{% endblock %}
<!--
Also tried this type of block, without success:
{% block javascripts %}
{% javascripts '@main_js' %}
<script src="{{ asset_url }}"></script>
{% endjavascripts %}
{% endblock %}
-->
</head>
答案 0 :(得分:2)
所有环境中使用的“config.yml”文件始终。例如,在开发环境中,“config.yml”和“config_dev.yml”文件被合并以形成最终配置。
例如,我们有 config.yml 文件:
foo:
go: run
我们 config_dev.yml 的内容如下:
foo:
bar: baz
go: run
最终配置将
assetic:
assets:
my_js_asset:
inputs:
...
你看到了问题吗?你需要在 config.yml 文件中放置 prod 特定的配置参数(你只想在prod环境中使用,比如你的情况下的js minifiers),但是 config_prod.yml 文件。
所以你应该在你的 config.yml :
中有这样的东西assetic:
assets:
my_js_asset:
filters: [yui_js]
output: scripts.min.js
在 config_prod.yml 文件
中有类似内容<<<<<<<<<<<<<< CSS >>>>>>>>>>>>>
<style>
#container {width:100%; margin:0px; padding:0px;}
.inner-container {max-width:1140px; width:100%;margin:0 auto;}
.red {display:inline-block; width:30%; margin:1%;}
</style>
<<<<<<<<<<<< HTML >>>>>>>>>>>>>
<div id="container">
<div class="inner-container">
<div class="red red-1"> Content for div #1</div>
<div class="red red-2"> Content for div #2</div>
<div class="red red-3"> Content for div #3</div>
</div>
</div>
但是,这只会解决缩小(和其他可能的过滤器)问题。
也许我错了,但据我所知,现在不可能将同一命名资产中定义的各种输入文件分开。这背后的逻辑在于相应的twig标签(节点)的资产实现,因为生成单独的文件生成,并且可以在dev中执行assetic:dump命令后在目标目录中找到环境(或者如果stylesheets \ javascripts twig标记的参数“combine”属性设置为true)。如果您想检查并更好地理解实现,这是一个很好的起点:https://github.com/kriswallsmith/assetic/blob/master/src/Assetic/Extension/Twig/AsseticNode.php
答案 1 :(得分:1)
config_dev.yml
中的所有配置,只需覆盖use_controller
选项即可。config.yml
中,正如文档所说,您应该使用- ?yui_css
代替- yui_css
,请注意主要问号(与yui_js
相同)。然后这些过滤器将不会在调试模式下使用(在dev env中)答案 2 :(得分:1)
我的建议是简化config.yml,如下所示:
assetic:
debug: %kernel.debug%
use_controller: %kernel.debug%
bundles: [ MyFirstBundle, MySecondBundle, MyThirdBundle ]
filters:
cssrewrite: ~
yui_css:
jar: %kernel.root_dir%/Resources/java/yuicompressor-2.4.7.jar
yui_js:
jar: %kernel.root_dir%/Resources/java/yuicompressor-2.4.7.jar
less:
node: %less_node_bin%
node_paths: [%less_node_modules%]
apply_to: ".less$"
然后,在布局模板中配置CSS和JS文件:
<head>
<meta charset="utf-8">
<title>My title</title>
{% stylesheets 'css/file01.css' 'css/file02.css' 'css/file03.css'
filter='?yui_css, less' output='css/main.css' %}
<link rel="stylesheet" href="{{ asset_url }}" />
{% endstylesheets %}
{% stylesheets 'css/file04.css' 'css/file05.css' 'css/file06.css'
filter='?yui_css, less' output='css/other.css' %}
<link rel="stylesheet" href="{{ asset_url }}" />
{% endstylesheets %}
{% javascripts
'@FirstBundle/Resources/public/js/thirdparty/file01.js'
'@FirstBundle/Resources/public/js/thirdparty/file02.js'
'@FirstBundle/Resources/public/js/thirdparty/file03.js'
filter='?yui_js' output='js/other.js' %}
<script src="{{ asset_url }}"></script>
{% endjavascripts %}
{% javascripts
'@FirstBundle/Resources/public/js/thirdparty/file04.js'
'@FirstBundle/Resources/public/js/thirdparty/file05.js'
'@FirstBundle/Resources/public/js/thirdparty/file06.js'
filter='?yui_js' output='js/main.js' %}
<script src="{{ asset_url }}"></script>
{% endjavascripts %}
</head>