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

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/*'
    %}
    
    {% endjavascripts %}
{% endblock %}

Same goes for your css.

{% block stylesheets %}
    {% stylesheets
        'bundles/myown/bootstrap/css/bootstrap-theme.css'
        'bundles/myown/css/*'
        filter='cssrewrite'
    %}
    
    {% 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.