Asset (CSS, Javascript, Bilder oder Schriften)

ab Version 5.1

Assets sind Dateien wie CSS, Javascript, Bilder oder Schriften. Diese sollten nicht über den tatsächlichen Dateipfad aufgerufen werden, sondern über ein öffentliches Verzeichnis an den Browser ausgeliefert werden.

Assets für ein Plugin definieren

Alle Assets für ein Plugin sollten in der asset.json definiert werden.

{
  "my/plugin" : [
    // asset from path my/plugin/css/button.css
    "./css/button.css",
    // all files from path my/plugin/js
    "./js/*.*",
    // all files with the extension .png from folder my/plugin/images
    "./images/*.png",
    // all files and folders from folder my/plugin/images
    "./images/*/*.*",
    // assets not from this plugin
    "plugin/remote/web_component/font_awesome/css/font-awesome.min.css",
    "plugin/remote/web_component/font_awesome/fonts/*.*"
  ],

  // additional assets for some other plugin
  "some/other": [
    // all images from my/plugin
    "public/remote/my/plugin/images/*/*.*"    
  ]
}

Assets verwenden

Das definierte Asset können Sie mit dem Template-Helper asset verwenden. Dieser liefert eine URL zum Asset im Asset-Ordner.

view.hbs

// href from link
<link rel="stylesheet" href="{{asset "my/plugin" "css/style.css" }}" type="text/css">
// image
<img src="{{asset "my/plugin" "images/logo.png"}}" />

CSS und Javascript

Diese Dateien werden pro Plugin gesammelt und mit jeweils einer Datei ausgeliefert. CSS wird dabei unter css/style.css zusammengeführt und Javascript unter js/script.js.

Cache

Die Assets werden unter temp/cache/assets abgelegt. Dieser Ordner dient als öffentliches Verzeichnis für das Web. Die Logik für das Sammeln der Assets wird dabei nur einmal pro Cache-Generierung ausgeführt, was dazu führt, dass für neue Assets der Cache geleert werden muss.