checkdomain/assets-extra-bundle

This package is abandoned and no longer maintained. No replacement package was suggested.

Symfony2 Bundle to extend built-in asset-management

0.2.5 2013-11-25 13:09 UTC

Requires

• php: >=5.3.3
• symfony/framework-bundle: >=2.1

MIT

• Florian Koerner

• asset
• bundle
• assetic

README

Erweitert die Konfiguration der internen Symfony 2 Assets-Verwaltung, um Bundlenamen im Dateipfad zu verschlüsseln oder auch den Assets-Ordner von "bundles" auf einen anderen umzustellen. Beinhaltet Erweiterungen der Twig asset()-Funktion, des Assetic LessPHP-Compilers und CssRewrite-Filters, welche das Verweisen mit Logical File Names erlauben sowie einen Assetic CssRewrite-Filter-Bug Fix.

Installation

Befolge folgende Schritte, um das Bundle in deiner Symfony-Umgebung zu installieren.

1. Schritt

Füge die folgende Zeile zu deiner composer.json hinzu:

"require" :  {
	// ...
	"checkdomain/assets-extra-bundle": "dev-master",
}

2. Schritt

Führe ein composer update aus, um die Pakete neu zu laden.

3. Schritt

Registriere das Bundle mit folgender Codezeile:

<?php
// app/AppKernel.php

public function registerBundles()
{
	$bundles = array(
    		// ...
    		new Checkdomain\AssetsExtraBundle\CheckdomainAssetsExtraBundle(),
	);
	// ...
}

4. Schritt

Wenn du LessPHP nutzen möchtest, aktiviere die Erweiterung wie gewohnt in deiner Konfiguration. Eine Anleitung dazu findest du zum Beispiel auf howto24.net.

Wir empfehlen das aktivieren des CssRewrite-Filters von Assetic auf alle Dateiendungen, wie:

• *.css
• *.less
• *.sass
• und *.scss

Bearbeite deine Konfiguration dazu einfach wie folgt:

assetic:
	filters:
		cssrewrite:
    		apply_to: '\.(css|less|sass|scss)$'

Konfiguration

Folgende Konfigurationen stehen dir zur Verfügung

checkdomain_assets_extra:
	write_to: web
	encrypt_bundle: false
	assets_path: bundles

• write_to
  ist bekannt aus dem AsseticBundle. Du kannst angeben, in welchen Ordner die Assets beim Ausführen von app/console assetic:install standardmäßig geschrieben werden sollen.

• encrypt_bundle
  verschleiert, wenn aktiviert, den Bundle-Namen im Asset-Pfad. Aus bundles/acmedemo/test.jpg wird zum Beispiel bundles/e0b6011f/test.jpg

• assets_path
  gibt das Verzeichnis für Assets an. Als Standard ist bei Symfony der Wert bundles gesetzt, aber vielleicht findet ja der ein oder andere zum Beispiel assets schöner.

Anwendung

Im folgenden werden die verschiedenen Anwendungsbereiche kurz erklärt. In den Beispielen nutzen wir folgende Konfiguration.

checkdomain_assets_extra:
	encrypt_bundle: true
	assets_path: assets

Assets installieren

Mit dem Konsolen-Kommando assets:install lassen sich alle Assets entsprechend der Konfiguration installieren. Weitere Informationen liefert der Befehl assets:install --help.

Twig asset()-Funktion

Die Twig-Funktion funktioniert wie gewohnt. Zusätzlich ist der Gebrauch von Logical File Names möglich.

test.html.twig

{{ asset('bundles/acmedemo/test.jpg') }}
{{ asset('@AcmeDemoBundle/test.jpg') }}

Ergebnis

/assets/e0b6011f/test.jpg
/assets/e0b6011f/test.jpg

Css-Rewrite-Filter

Ohne dieses Bundle funktioniert dieser Filter nur, wenn keine Logical File Names in der Twig-Extension für Assetic genutzt werden. Dieses Problem ist gelöst und zudem sind auch Logical File Names in den CSS-Dateien selbst möglich.

/src/Acme/DemoBundle/Resources/public/css/test.css

// Zeigt auf: /src/Checkdomain/TwitterBootstrapBundle/Resources/public/css/bootstrap.css
@import url(@CheckdomainTwitterBootstrapBundle/css/bootstrap.css);

.logo {
	// Zeigt auf: /src/Acme/DemoBundle/Resources/public/img/logo.jpg
	background-image: url(../img/logo.jpg);
}

Ergebnis

@import url(/assets/19e3eda3/css/bootstrap.css);
	
.logo {
	background-image: url(/assets/19e3eda3/img/logo.jpg);
}

LessPHP-Compiler

Interessant sind hier Imports aus verschiedenen Bundles, welche ohne dieses Bundle nur durch mühselige Angabe des kompletten Verzeichnispfades möglich wären. Wir nutzen einfach Logical File Names. In diesem Beispiel nutzen wir das TwitterBootstrapBundle.

/src/Acme/DemoBundle/Resources/public/css/test.css

// Zeigt auf: /src/Checkdomain/TwitterBootstrapBundle/Resources/private/less/bootstrap.less
@import url(@CheckdomainTwitterBootstrapBundle/Resources/private/less/bootstrap.less);

Achtung: Da die Less-Dateien nicht zwangsläufig im public-Ordner liegen müssen, ist hier die Angabe des kompletten Pfades nötig, während in den anderen Beispielen der Pfad Resources/public/ komplett weggelassen werden muss und automatisch von diesem Ordner ausgegangen wird, da nur dieser bei einem assets:install kopiert wird.