Ich bin auf das sehr, sehr gleiche Problem gestoßen.
Zusamenfassend:
- Bereit, Original-CSS in einem "internen" Verzeichnis zu haben (Ressourcen / Assets / CSS / a.css)
- Bereit, die Bilder im "öffentlichen" Verzeichnis zu haben (Resources / public / images / devil.png)
- Wenn Sie diesen Zweig bereitwillig nehmen, wird dieses CSS in web / css / a.css neu kompiliert und auf das Bild in /web/bundles/mynicebundle/images/devil.png ausgerichtet
Ich habe einen Test mit ALLEN möglichen (gesunden) Kombinationen der folgenden gemacht:
- @notation, relative Notation
- Mit cssrewrite analysieren, ohne es
- CSS-Bildhintergrund vs direktes <img> -Tag src = auf dasselbe Bild wie CSS
- CSS analysiert mit assetischer und auch ohne Analyse mit assetischer Direktausgabe
- Und das alles multipliziert mit einem "öffentlichen Verzeichnis" (as
Resources/public/css
) mit dem CSS und einem "privaten" Verzeichnis (as Resources/assets/css
).
Dies gab mir insgesamt 14 Kombinationen auf demselben Zweig, und diese Route wurde von gestartet
- "/app_dev.php/"
- "/app.php/"
- und "/"
Dies ergibt 14 x 3 = 42 Tests.
Darüber hinaus wurde all dies in einem Unterverzeichnis getestet, sodass es keine Möglichkeit gibt, sich durch Angabe absoluter URLs zu täuschen, da diese einfach nicht funktionieren würden.
Die Tests bestanden aus zwei unbenannten Bildern und Divs, die von 'a' bis 'f' für das aus dem öffentlichen Ordner erstellte CSS und von 'g bis' l 'für diejenigen, die aus dem internen Pfad erstellt wurden, benannt wurden.
Ich habe folgendes beobachtet:
Nur 3 der 14 Tests wurden auf den drei URLs angemessen angezeigt. Und NONE war aus dem "internen" Ordner (Ressourcen / Assets). Es war eine Voraussetzung, das Ersatz-CSS PUBLIC zu haben und dann mit assetic FROM von dort aus zu bauen.
Dies sind die Ergebnisse:
Ergebnis mit /app_dev.php/ gestartet
Ergebnis mit /app.php/ gestartet
Ergebnis mit / gestartet
Also ... NUR - Das zweite Bild - Div B - Div C sind die zulässigen Syntaxen.
Hier gibt es den TWIG-Code:
<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>
Die 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;
}
Und a.css, b.css, c.css usw .: alle identisch, nur die Farbe und die CSS-Auswahl ändern.
.a
{
background: red url('../images/devil.png');
}
Die Struktur "Verzeichnisse" lautet:
Verzeichnisse
All dies kam, weil ich nicht wollte, dass die einzelnen Originaldateien der Öffentlichkeit zugänglich gemacht wurden, insbesondere wenn ich mit "weniger" Filter oder "sass" oder ähnlichem spielen wollte ... Ich wollte nicht, dass meine "Originale" veröffentlicht wurden, sondern nur die einen zusammengestellt.
Aber es gibt gute Nachrichten . Wenn Sie das "Ersatz-CSS" nicht in den öffentlichen Verzeichnissen haben möchten ... installieren Sie sie nicht mit --symlink
, sondern erstellen Sie wirklich eine Kopie. Sobald "assetic" das zusammengesetzte CSS erstellt hat, können Sie das ursprüngliche CSS aus dem Dateisystem löschen und die Bilder belassen:
Kompilierungsprozess
Hinweis Ich mache das für die --env=prod
Umwelt.
Nur ein paar abschließende Gedanken:
Dieses gewünschte Verhalten kann erreicht werden, indem die Bilder im "öffentlichen" Verzeichnis in Git oder Mercurial und das "CSS" im "Assets" -Verzeichnis gespeichert werden. Das heißt, anstatt sie in "public" zu haben, wie in den Verzeichnissen gezeigt, stellen Sie sich a, b, c ... vor, die sich in den "Assets" statt "public" befinden, als Ihr Installationsprogramm / Deployer (wahrscheinlich ein Bash- Skript). Das CSS vorübergehend in das "öffentliche" Verzeichnis zu stellen, bevor assets:install
es ausgeführt wird, dann assets:install
, dann assetic:dump
, und dann das Entfernen von CSS aus dem öffentlichen Verzeichnis zu automatisieren, nachdem assetic:dump
es ausgeführt wurde. Dies würde genau das in der Frage gewünschte Verhalten erreichen.
Eine andere (wenn möglich unbekannte) Lösung wäre zu untersuchen, ob "Assets: Install" nur "public" als Quelle oder "Assets" als Quelle für die Veröffentlichung verwenden kann. Das würde bei der Installation mit der --symlink
Option bei der Entwicklung helfen .
Wenn wir das Entfernen aus dem "öffentlichen" Verzeichnis skripten, entfällt außerdem die Notwendigkeit, sie in einem separaten Verzeichnis ("Assets") zu speichern. Sie können in unserem Versionskontrollsystem in "public" leben, da diese bei der Bereitstellung für die Öffentlichkeit gelöscht werden. Dies ermöglicht auch die --symlink
Verwendung.
ABER JEDOCH, VORSICHT JETZT: Wie jetzt sind die Originale nicht mehr da (rm -Rf
da sind ), gibt es nur zwei Lösungen, nicht drei. Der Arbeitsbereich "B" funktioniert nicht mehr, da es sich um einen Asset () -Aufruf handelte, sofern der ursprüngliche Asset vorhanden war. Nur "C" (das kompilierte) funktioniert.
Also ... es gibt NUR einen ENDGÜLTIGEN GEWINNER: Div "C" erlaubt genau das, was im Thema gefragt wurde: Um kompiliert zu werden, respektieren Sie den Pfad zu den Bildern und setzen Sie die Originalquelle nicht der Öffentlichkeit aus.
Der Gewinner ist C.