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
|           


        

Answer 1

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

Answer 2

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

Answer 3

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.

Answer 4

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.