How to add specific files to assetic?

Question

I have my custom resources directory for my bundle where there are some files:

/longpathtoSymfony/src/MyOwn/Bundle/MyOwnBundle/Resources/public
|-- bootstrap
|   |-- css
|   |   |-- bootstrap-theme.css
|   |   |-- bootstrap-theme.min.css
|   |   |-- bootstrap.css
|   |   |-- bootstrap.min.css
|   |   `-- carousel.css
|   |-- fonts
|   |   |-- glyphicons-halflings-regular.eot
|   |   |-- glyphicons-halflings-regular.svg
|   |   |-- glyphicons-halflings-regular.ttf
|   |   `-- glyphicons-halflings-regular.woff
|   `-- js
|       |-- bootstrap.js
|       |-- bootstrap.min.js
|       |-- holder.js
|       `-- respond.min.js
|-- css
|   `-- custom.css
|-- fonts
|   |-- glyphicons-halflings-regular.svg
|   |-- glyphicons-halflings-regular.ttf
|   `-- glyphicons-halflings-regular.woff
|-- images
|-- img
`-- js
    |-- html5shiv.js
    |-- jquery-1.10.2.min.map
    |-- jquery.js
    `-- less-1.3.3.min.js

And all js and css files are correctly put to public folder, thus i can access to bootstrap/css/xxx.css files and so on, except font files.

I dont know what I should do to get them copied to the web directory. If I try php app/console assetic:dump then only the css and js files are copied:

php app/console assetic:dump
Dumping all dev assets.
Debug mode is on.

18:41:17 [file+] /longpathToSymfony/app/../web/css/bef717e.css
18:41:17 [file+] /longpathToSymfony/app/../web/css/bef717e_bootstrap.min_1.css
18:41:17 [file+] /longpathToSymfony/app/../web/js/6f9045a.js
18:41:17 [file+] /longpathToSymfony/app/../web/js/6f9045a_html5shiv_1.js
18:41:17 [file+] /longpathToSymfony/app/../web/js/6f9045a_respond.min_2.js
18:41:17 [file+] /longpathToSymfony/app/../web/css/0c1e28e.css
18:41:17 [file+] /longpathToSymfony/app/../web/css/0c1e28e_carousel_1.css
18:41:17 [file+] /longpathToSymfony/app/../web/js/0aa0509.js
18:41:17 [file+] /longpathToSymfony/app/../web/js/0aa0509_jquery_1.js
18:41:17 [file+] /longpathToSymfony/app/../web/js/0aa0509_bootstrap.min_2.js
18:41:17 [file+] /longpathToSymfony/app/../web/js/0aa0509_holder_3.js
18:41:17 [file+] /longpathToSymfony/app/../web/js/0aa0509_less-1.3.3.min_4.js

What should I do to include font files too? I'm having the same problem with jquery-1.10.2.min.map, which is downloaded dynamically. Is there any way to say to symfony "hey put it in the web resource folder, because some of my components need it"?

Glassworker

Answer 1

I had the same problem and I just tried using the following as a workaround. Seems to work so far.

{% stylesheets
    output='assets/fonts/glyphicons-halflings-regular.ttf'
    'bundles/bootstrap/fonts/glyphicons-halflings-regular.ttf'
%}{% endstylesheets %}

Notice the omission of any output which means nothing shows up on the template. When I run assetic:dump the files are copied over to the desired location and the css includes work as expected.

Romanticist

This should be accepted as the correct answer. I was unaware of the output='' parameter. Thanks! – Resonate

Ok so I check your answera as valid – Glassworker

Answer 2

In twig you should have a javascripts block with something like this:

{% block javascripts %}
    {% javascripts
        'bundles/myown/bootstrap/js/bootstrap.js'
        'bundles/myown/bootstrap/js/respond.js'
        'bundles/myown/js/*'
    %}
    <script src="{{ asset_url }}"></script>
    {% endjavascripts %}
{% endblock %}

Same goes for your css.

{% block stylesheets %}
    {% stylesheets
        'bundles/myown/bootstrap/css/bootstrap-theme.css'
        'bundles/myown/css/*'
        filter='cssrewrite'
    %}
    <link rel="stylesheet" href="{{ asset_url }}">
    {% endstylesheets %}
{% endblock %}

Now you can install those assets for easy development (app_dev.php) with:

php app/console cache:clear --env=dev
php app/console assets:install web --symlink

At this point you should see symbolic link folders in /longpathtoSymfony/web/bundles/myown linking back to your bundle resources. The benefit of the symlink option is that you can make changes to the scripts in the bundle folder and you won't have to run the assets:install command to see those changes in the browser. Just refresh.

When you are ready to move to production use the assetic:dump command. This will only work with css, js and images. So you will need to move the fonts folder into the web directory manually or write your own script to move that stuff for you.

Make sure to let Assetic know about your bundle in the config.yml

assetic:
    bundles:        [ 'MyOwnBundle' ]

Now you can dump your production ready assets with:

php app/console cache:clear --env=prod
php app/console assetic:dump --env=prod

So when you go to check it out in the browser just remove app_dev.php and it should load your css and javascript from single files dumpped into the web/css and web/js folders. This is just one approach to using these tools but it seems to work for me in most cases.

Resonate

This will only work with css, js and images. That's the answer I wanted to read. There's room for improvement with assetics. Thank you for your answer, I check it as valid, but may I ask you to emphasize this sentence? I think it's a big problem, especially with CSS3 or even if some people want to share sound or video files... – Glassworker

Answer 3

1. install assets with php app/console assets:install target [--symlink] command

2. access your font files using asset() twig function:

   asset('bundles/myown/fonts/glyphicons-halflings-regular.ttf')

* verify your paths for asset function

Counterblast

If i access them in my css files, does symfony analyse this? – Glassworker

It seems it's not about assets, but about assetic, which, if I understand symfony, are two different things – Glassworker

It seems that if I look the source files (symfony 2.3), here: vendor/symfony/assetic-bundle/Symfony/Bundle/AsseticBundle/Factory/Loader/AsseticHelperFormulaLoader.php there are only javascripts, stylesheets and image know to assetic... – Glassworker

if you address your font files inside your css, then you should use cssrewrite filter as described here - symfony.com/doc/current/cookbook/assetic/… – Counterblast

I've already done that, but cssrewrite seems to operate only on the path, not on the ressource itself => the ressource is not copied to web and the {{ asset('@MyBundle/Resources/pubdlkfqsdfsd') }} is not analyzed (no error comes out). – Glassworker

Answer 4

Part of answer was taken from here

How to set assets path for js, css and fonts

{% stylesheets
    '@bootstrap_css'#this is some custom or bundled files which you want to include
    'bundles/mybundle/css/custom.css'
    filter="cssrewrite"
    output='some/path/to.css'
%}

this part will build all css which are presented in one file and put it to path which also presented in code sample. Now to.css will be placed in /web/some/path/to.css

the same is for JS:

{% javascripts
    '@jquery' #this is some custom or bundled files which you want to include
    '@bootstrap_js'
    'bundles/fosjsrouting/js/router.js'
    output='js/compiled/app.js'
%}

Now you'll have all js which build in 1 file with path /web/js/compiled/app.js

FY : In latest versions of symfony Assetic bundle doesn't exist from box - it should be installed additionally via composer by composer require symfony/assetic-bundle

Marchellemarcher