-->

Install vendor resources in web directory

2020-04-17 03:59发布

问题:

I have in my bundle in Resources a directory called vendor which contains JavaScript libraries, etc. Some of those vendors contain images.

I can import css/less/js files using assets with:

assetic:
    assets:
        flot:
            inputs:
                - @MyBundle/Resources/vendor/flot/jquery.flot.js
                - @MyBundle/Resources/vendor/flot/jquery.flot.time.js
            filters:
                - ?yui_js

However if vendor contains images, I have no idea, how to put them into web/ directory.

I'd rather not symlink them manually.

回答1:

Assetic's asset collections like

assetic:
    assets:
        collection_name:
            inputs:
                 - ...
            output: 
                 - desired_filename # relative to assetic.output_path
            filters:
                 - ?lessphp          # scss, optipng, jpegoptim ... whatever
                                     # the ? (question mark) prevents the 
                                     # filter to be applied in dev mode 

can also contain images. but you have to specify them one by one

assetic:
    assets:

        [...] 

        my_image:
            inputs:
                 - /path/to/image/image.png
            output: 
                 - images/smushed_image.png  
            filters:
                 - optipng    

        my__second_image:
            inputs:
                 - /path/to/image/image2.jpg
            output: 
                 - images/smushed_image2.jpg
            filters:
                 - jpegoptim       

Then use the assetic:dump command to have them written ( and compiled / smushed ) to your web folder. The --no-debug option prevents assetic from creating debug files for every single file in every package. Use for production systems or if you have another way of debugging ( i.e. the awesome Source Maps )

app/console assetic:dump --no-debug

Use the packages like this:

 {% stylesheets '@collection_name' %}
     <link rel="stylesheet" type="text/css" href="{{ asset_url }}" />
 {% endstylesheets %}

or

 {% image '@my_image' %}
     <img src="{{ asset_url }}" alt="Example"/>
 {% endimage %}