Mi sono imbattuto nello stesso problema.
In breve:
- Disponibilità ad avere CSS originale in una directory "interna" (Resources / assets / css / a.css)
- Disponibilità ad avere le immagini nella directory "public" (Resources / public / images / devil.png)
- Volendo quel ramoscello prende quel CSS, lo ricompila in web / css / a.css e fa in modo che punti l'immagine in /web/bundles/mynicebundle/images/devil.png
Ho effettuato un test con TUTTE le possibili (sane) combinazioni di quanto segue:
- @notation, notazione relativa
- Analizza con cssrewrite, senza di essa
- Sfondo dell'immagine CSS vs tag <img> diretto src = alla stessa immagine del CSS
- CSS analizzato con assetic e anche senza analizzare con output diretto assetic
- E tutto questo si è moltiplicato provando una
Resources/public/css"directory pubblica" (as ) con il CSS e una directory "privata" (as Resources/assets/css).
Questo mi ha dato un totale di 14 combinazioni sullo stesso ramoscello, e questa via è stata lanciata da
- "/App_dev.php/"
- "/App.php/"
- e "/"
dando così 14 x 3 = 42 test.
Inoltre, tutto questo è stato testato lavorando in una sottodirectory, quindi non c'è modo di ingannare fornendo URL assoluti perché semplicemente non funzionerebbero.
I test erano due immagini senza nome e poi div denominati da "a" a "f" per il CSS compilato DALLA cartella pubblica e denominati da "g a" l "per quelli creati dal percorso interno.
Ho osservato quanto segue:
Solo 3 dei 14 test sono stati mostrati adeguatamente sui tre URL. E NESSUNO proveniva dalla cartella "interna" (Risorse / risorse). Era un prerequisito avere il CSS PUBLIC di riserva e quindi compilare con assetic FROM lì.
Questi sono i risultati:
Risultato lanciato con /app_dev.php/
Risultato lanciato con /app.php/
Risultato lanciato con /
Quindi ... SOLO - La seconda immagine - Div B - Div C sono le sintassi consentite.
Ecco il codice TWIG:
<html>
<head>
{% stylesheets 'bundles/commondirty/css_original/container.css' filter="cssrewrite" %}
<link href="{{ asset_url }}" rel="stylesheet" type="text/css" />
{% endstylesheets %}
{# First Row: ABCDEF #}
<link href="{{ '../bundles/commondirty/css_original/a.css' }}" rel="stylesheet" type="text/css" />
<link href="{{ asset( 'bundles/commondirty/css_original/b.css' ) }}" rel="stylesheet" type="text/css" />
{% stylesheets 'bundles/commondirty/css_original/c.css' filter="cssrewrite" %}
<link href="{{ asset_url }}" rel="stylesheet" type="text/css" />
{% endstylesheets %}
{% stylesheets 'bundles/commondirty/css_original/d.css' %}
<link href="{{ asset_url }}" rel="stylesheet" type="text/css" />
{% endstylesheets %}
{% stylesheets '@CommonDirtyBundle/Resources/public/css_original/e.css' filter="cssrewrite" %}
<link href="{{ asset_url }}" rel="stylesheet" type="text/css" />
{% endstylesheets %}
{% stylesheets '@CommonDirtyBundle/Resources/public/css_original/f.css' %}
<link href="{{ asset_url }}" rel="stylesheet" type="text/css" />
{% endstylesheets %}
{# First Row: GHIJKL #}
<link href="{{ '../../src/Common/DirtyBundle/Resources/assets/css/g.css' }}" rel="stylesheet" type="text/css" />
<link href="{{ asset( '../src/Common/DirtyBundle/Resources/assets/css/h.css' ) }}" rel="stylesheet" type="text/css" />
{% stylesheets '../src/Common/DirtyBundle/Resources/assets/css/i.css' filter="cssrewrite" %}
<link href="{{ asset_url }}" rel="stylesheet" type="text/css" />
{% endstylesheets %}
{% stylesheets '../src/Common/DirtyBundle/Resources/assets/css/j.css' %}
<link href="{{ asset_url }}" rel="stylesheet" type="text/css" />
{% endstylesheets %}
{% stylesheets '@CommonDirtyBundle/Resources/assets/css/k.css' filter="cssrewrite" %}
<link href="{{ asset_url }}" rel="stylesheet" type="text/css" />
{% endstylesheets %}
{% stylesheets '@CommonDirtyBundle/Resources/assets/css/l.css' %}
<link href="{{ asset_url }}" rel="stylesheet" type="text/css" />
{% endstylesheets %}
</head>
<body>
<div class="container">
<p>
<img alt="Devil" src="../bundles/commondirty/images/devil.png">
<img alt="Devil" src="{{ asset('bundles/commondirty/images/devil.png') }}">
</p>
<p>
<div class="a">
A
</div>
<div class="b">
B
</div>
<div class="c">
C
</div>
<div class="d">
D
</div>
<div class="e">
E
</div>
<div class="f">
F
</div>
</p>
<p>
<div class="g">
G
</div>
<div class="h">
H
</div>
<div class="i">
I
</div>
<div class="j">
J
</div>
<div class="k">
K
</div>
<div class="l">
L
</div>
</p>
</div>
</body>
</html>
Il container.css:
div.container
{
border: 1px solid red;
padding: 0px;
}
div.container img, div.container div
{
border: 1px solid green;
padding: 5px;
margin: 5px;
width: 64px;
height: 64px;
display: inline-block;
vertical-align: top;
}
E a.css, b.css, c.css, ecc: tutti identici, cambiando solo il colore e il selettore CSS.
.a
{
background: red url('../images/devil.png');
}
La struttura delle "directory" è:
Elenchi
Tutto questo è venuto, perché non volevo che i singoli file originali fossero esposti al pubblico, specialmente se volevo giocare con filtri "less" o "sass" o simili ... non volevo che i miei "originali" fossero pubblicati, solo il compilato uno.
Ma ci sono buone notizie . Se non vuoi avere il "CSS di riserva" nelle directory pubbliche ... installali non con --symlink, ma facendone una copia. Una volta che "assetic" ha costruito il CSS composto, puoi CANCELLARE il CSS originale dal filesystem e lasciare le immagini:
Processo di compilazione
Nota che lo faccio per l' --env=prodambiente.
Solo alcune considerazioni finali:
Questo comportamento desiderato può essere ottenuto avendo le immagini nella directory "public" in Git o Mercurial e il "css" nella directory "assets". Cioè, invece di averli in "pubblico" come mostrato nelle directory, immagina a, b, c ... risiedere nelle "risorse" invece di "pubblico", piuttosto che avere il tuo installatore / deployer (probabilmente uno script Bash ) per mettere il CSS temporaneamente all'interno della directory "public" prima assets:installviene eseguito, poi assets:install, poi assetic:dump, e quindi automatizza la rimozione del CSS dalla directory pubblica dopo che assetic:dumpè stato eseguito. Ciò otterrebbe ESATTAMENTE il comportamento desiderato nella domanda.
Un'altra soluzione (sconosciuta se possibile) sarebbe quella di esplorare se "assets: install" può prendere solo "public" come fonte o potrebbe anche prendere "asset" come fonte da pubblicare. Ciò sarebbe utile se installato con l' --symlinkopzione durante lo sviluppo.
Inoltre, se stiamo per eseguire la rimozione tramite script dalla directory "public", la necessità di memorizzarli in una directory separata ("assets") scompare. Possono vivere in "pubblico" nel nostro sistema di controllo della versione poiché verranno rilasciati al momento della distribuzione al pubblico. Ciò consente anche l' --symlinkutilizzo.
MA IN OGNI MODO, ATTENZIONE ORA: poiché ora gli originali non ci sono più ( rm -Rf), ci sono solo due soluzioni, non tre. Il div funzionante "B" non funziona più poiché era una chiamata asset () assumendo che ci fosse l'asset originale. Solo "C" (quello compilato) funzionerà.
Quindi ... c'è SOLO un VINCITORE FINALE: Il Div "C" permette ESATTAMENTE quello che è stato chiesto nel topic: Per essere compilato, rispettare il percorso delle immagini e non esporre la fonte originale al pubblico.
Il vincitore è C
