I need to add another js script in a view.
So I created a new configuration in my assetic.yml file :
assetic:
debug: "%kernel.debug%"
use_controller: false
bundles:
- AppBundle
filters:
cssrewrite: ~
uglifyjs2:
bin: '%kernel.root_dir%/Resources/node_modules/uglify-js/bin/uglifyjs'
uglifycss:
bin: '%kernel.root_dir%/Resources/node_modules/uglifycss/uglifycss'
less:
node_paths: ['%kernel.root_dir%/Resources/node_modules/', '%kernel.root_dir%/Resources/node_modules/less/node_modules/']
apply_to: '\.less$'
assets:
app_gestion_poste_js:
inputs:
- '#AppBundle/Resources/public/js/GestionPoste/gestion.js'
filters: [?uglifyjs2]
output: js/poste/gestion-poste.js
And I added my script in my twig file :
{% block foot_script_assetic %}
{{ parent() }}
{% javascripts
'#app_another_script_js'
'#app_gestion_poste_js'
%}
<script type="text/javascript" src="{{ asset_url }}"></script>
{% endjavascripts %}
{% endblock %}
I ran these commands :
php bin/console assets:install
php bin/console assetic:dump
A lot of files are dumped in the web folder. I can find my file in web/js/poste/gestion-poste.js, and also in web/bunde/...
But when I run my page, there are some 404 not found error :
> GET http://myapp/js/d6e0c99_part_1.js?00.02.00 404 (Not Found)
> GET http://myapp/js/d6e0c99_part_2.js?00.02.00 404 (Not Found)
> GET http://myapp/js/d6e0c99_part_1.js?00.02.00 404 (Not Found)
> GET http://myapp/js/d6e0c99_part_2.js?00.02.00 404 (Not Found)
Both files are not found.
Why the files are loaded twice ?
If I remove my new script from the assetic instruction, the first script works and is found :
{% block foot_script_assetic %}
{{ parent() }}
{% javascripts
'#app_another_script_js'
%}
<script type="text/javascript" src="{{ asset_url }}"></script>
{% endjavascripts %}
{% endblock %}
If I add the script into another view, I have the same issue. All the scripts of the page are not found.
I tried to :
change the rights of my JS file
change the js file content by a simple script like : console.log('hello');
copy/paste another js file which works and use it in the assetic.yml configuration
There is the same issue in the prod environment :(
Thanks !
Related
I'd like to load JS code from JS file in Twig template and render it inline. As we can do it in PHP with file_get_contents('.../js/main.js').
I know I can load main.js.twig, but I need to load JS code from a file with .js extenstion
For example, main.js contains:
console.log('Works!');
And in my Twig template I try:
<script>
{% include "#{theme_dir}/js/main.js" %}
</script>
to render inline JS code like
<script>
console.log('Works!');
</script>
but I receive the error
Template ".../js/main.js" is not defined in ...
In my case Twig is used by CMS Grav
Grav has its Asset Manager with which js/css assets can be added to Twig. Assets can be added as bundle and minified or can be inlined.
In Twig you first define the assets to add in the <head> of the page:
{% block javascripts %}
{% do assets.addJs('jquery', 101) %}
{% do assets.addJs('theme://js/jquery.treemenu.js', { group: 'bottom' }) %}
{% do assets.addJs('theme://js/site.js', { group: 'bottom' }) %}
{% do assets.addJsModule('plugin://my_plugin/app/main.js', { group: 'bottom' }) %}
{% endblock %}
and then load the assets elsewhere in Twig:
{% block bottom %}
{{ assets.js('bottom')|raw }}
{% endblock %}
To enable/disable bundling and minification of assets, use the settings in /user/config/system.yaml. See AssetManager/Configuration
assets:
css_pipeline: true
css_minify: true
js_pipeline: true
js_minify: true
Oh, sorry - the problem was in the path: JS file should be in /templates/ directory of Grav theme. Now it works.
Also we can use Grav read_file() function to load file content from any directory as variable and change it before rendering if we need:
<script>
{% set js = read_file("#{theme_dir}/js/main.js") %}
{{ js|raw }}
</script>
I can't find the reason. Please help me.
I use this command generate .css file to web directory:
$sudo php app/console assetic:dump
Error information:
[Symfony\Component\Debug\Exception\OutOfMemoryException]
Error: Allowed memory size of 5368709120 bytes exhausted (tried to allocate 4205621120 bytes)
$ls /opt/webroot/symfony/web/css
//views/base.html.twig
{% block head_style %}
{% stylesheets filter='less,cssrewrite'
'#ScourgenPersonFinderBundle/Resources/public/less/style.less'
'#BloggerBlogBundle/Resources/css/style.css'
%}
<link href="{{ asset_url }}" type="text/css" rel="stylesheet" media="screen"/>
{% endstylesheets %}
{% endblock head_style %}
#app/config/config.yml
assetic:
debug: '%kernel.debug%'
# use_controller: '%kernel.debug%'
use_controller: false
bundles:
- ScourgenPersonFinderBundle
- MopaBootstrapBundle
- BloggerBlogBundle
filters:
cssrewrite: ~
# yui_css:
# jar: /usr/local/lib/node_modules/yuicompressor/build/yuicompressor-2.4.8.jarw
less:
node: /usr/local/bin/node
node_paths: [/usr/local/lib/node_modules, /opt/lessc]
When I launch this command :
assets:install web
Symfony copy my asset into something like :
web/bundles/mybundle/img/img.png
So when I use this ressources, I have to do something like that :
{{ asset("bundles/mybundle/img/img.png") }}
That way, this part "bundles/mybundle/" is public.
How can I hide this part ?
I know that it's easily done with assetics like that :
{% javascripts '#AcmeDemoBundle/Resources/public/js/*' output='js/main.js' %}
<script type="text/javascript" src="{{ asset_url }}"></script>
{% endjavascripts %}
But for media (images, videos...) it's a different story. Any Idea ?
Use Assetic for images as well as for js, then set the output to wherever you wish.
{% image '#AcmeFooBundle/Resources/public/images/example.jpg'
output='/images/example.jpg' %}
<img src="{{ asset_url }}" alt="Example"/>
{% endimage %}
assets.yml:
assetic:
assets:
base_js:
inputs:
- '%kernel.root_dir%/Resources/public/jquery-1.10.2.min.js'
- '%kernel.root_dir%/Resources/public/bootstrap3/js/bootstrap.min.js'
output: 'js/scripts.js'
base_css:
inputs:
- '%kernel.root_dir%/Resources/public/bootstrap3/css/bootstrap.min.css'
output: 'js/styles.css'
config.yml
imports:
- { resource: parameters.yml }
- { resource: security.yml }
- { resource: assets.yml }
#...
assetic:
debug: %kernel.debug%
use_controller: false
bundles: [MyAdminBundle]
#java: /usr/bin/java
filters:
cssrewrite: ~
And in template:
{% block javascripts %}
{% javascripts '#base_js' %}
<script src="{{ asset_url }}"></script>
{% endjavascripts %}
{% endblock %}
However as output I get js/80e3acc_part_1.js and this file only includes the jquery code, boostrap is missing. Any ideas how to fix this?
sadly the output filename configuration of an asset collection is currently not being used by default if none is specified within the {% image %},{% stylesheets %} or {% javascripts %} tag if only one #-resource is present - this explains the filename js/80e3acc_part_1.js.
Further the asset() function does not work with the # - syntax.
use the following to fix the filename issue.
{% javascripts '#base_js' output='js/scripts.js' %}
<script src="{{ asset_url }}"></script>
{% endjavascripts %}
or just include the output filename directly with the asset() function.
<script src="{{ asset('js/scripts.js') }}"></script>
This syntax is cleaner but leaves the downside of in case having to change the filename in configuration and the template if you want to rename the output file.
Please note that assetic in most cases does not automatically update the resources for cached collections if resources are added. Therefore always clear your cache using app/console cache:clear prior to dumping your assets.
That would explain why bootstrap was missing in the output file after dumping if you added it as second resource but did not clear the cache before using the assetic:dump command.
I'm using yui_compressor:
`
{% javascripts filter='?yui_js'
'#MyProjectBundle/Resources/public/js/libs/jquery/jquery-min.js'
'#MyProjectBundle/Resources/public/js/libs/bootstrap/bootstrap-modal.js'
'#MyProjectBundle/Resources/public/js/libs/bootstrap/bootstrap-tooltip-2.0.js'
'#MyProjectBundle/Resources/public/js/libs/bootstrap/bootstrap-popover.js'
'#MyProjectBundle/Resources/public/js/libs/bootstrap/bootstrap-dropdown.js'
'#MyProjectBundle/Resources/public/js/main.js' %}
<script src="{{ asset_url }}"></script>
<script>
window.basePath = "{{ url('index') }}";
</script>
{% endjavascripts %}
`
I'd like to have an output in subdomain, not in /js/xxx.js, probably one folder above than kernel_root (where my subdomain is pointing in).
Any idea about how could I solve this issue?
Thank you so much,
i use for my assets a cdn.
you can easily change it in the config_prog.yml
framework:
templating:
assets_base_urls:
http: [ http://cdn.domain.com ]
but you have to keep in mind also assets like images and so on are loaded from there...
besides it can be useful to bust your cache (e.g. your cdn has a long time expiration). you can do this by adding
framework:
templating: { engines: ['twig'], assets_version: v1 }
to your config.yml.