Asset Management - Verweis auf relative Assets nach Verkettung und Versionierung beibehalten

Question

Ich weiß, dass L5 und Elixir noch in der Entwicklung sind, aber ich freue mich darauf, darüber nachzudenken, wie ich meinen Code reorganisieren kann. Ich denke, meine Frage hat mehr mit Asset Management im Zusammenhang mit L5 und Elixir zu tun.

Wollen Sie klären, wie Verkettung und Versionierung behandelt werden sollte (in meinem Fall verwende ich Elixir styles() und version()). Das Problem, das ich habe, ist, dass die neue Datei nach concat/version in einem neuen Ordner gefunden wird, wobei alle Verweise auf Assets aus den ursprünglichen css- oder js-Dateien entfernt werden.

Zum Beispiel wird eine ursprüngliche CSS-Datei mit background-image: url('../img.png') nicht mehr funktionieren. Ich habe ein paar Dinge ausprobiert, aber beide sind nicht ideal vor allem im Fall von Lieferanten Plugins:

1. Verschieben erforderliche Vermögenswerte über one-by-one (mit mix.copy() für jeden Ordner von Vermögenswerten) auf den neuen Build-Pfad (dh den Build-Pfad, der von Elixirs Versionierung verwendet wird).
2. manuell die Pfade in jeder Asset-Datei bearbeiten, um einen absoluten Pfad zu verweisen

Obwohl beide Optionen der Dinge arbeiten, ich fühle mich, als ob ich etwas fehlen. Es wird auch ziemlich unpraktisch, wenn man mit JavaScript-Plugins arbeitet (zB solche, die mit eigenen Bildern, Schriften, Stylesheets usw. geliefert werden).

Gibt es eine praktikablere Möglichkeit, relative Pfade beim Verketten und Versionieren zu verwalten?

Answer 1

EDIT:

Ich reichte nur pull request zu Elixir, so können Sie einfach tun:

mix.version(
    ['css/style.css', 'css/vendor/style.css'], //files to be versioned 
    ['fonts', 'css/vendor/icons'] //dependent files/dirs to be copied 
); 

---

ALTE ANTWORT:

Eigentlich, wenn Sie verwenden mix.copy(...) allein, Sie können einfach nicht verwenden gulp watch und Sie werden Sie müssen Ihren gesamten Stack neu kompilieren, damit das funktioniert.

Sie können die gleichen Ergebnisse mit der Lösung unter erreichen und müssen nicht alles neu zu kompilieren, weil es wird nur funktionieren, wenn Sie eine versionierte Datei ändern:

var shell = require('gulp-shell'); 

gulp.task('cp', shell.task(['cp -R public/fonts public/build/', 
          'cp -R path/to/vendor/dir public/build/vendor/', 
          '... etc ...'])); 

elixir(function(mix) { 

    ... 

    //register a watcher to run 'cp' when you rebuild 
    mix.task('cp','public/build/**/*.(js|css)'); 

} 

Answer 2

Sie sind relative Pfade - also behalten Sie die relative Beziehung.

Verschieben Sie die Bilder einfach in das Verzeichnis public/build/ als Teil des Befehls gulp, nach der Vision.

Answer 3

Hier ist die Lösung für Laravel Elixir nachdem Sie für die Versionierung erstellt haben. Für den Kopierbefehl müssen Sie ihn als vollständigen Pfad referenzieren.

var elixir = require('laravel-elixir'); 

/* 
|-------------------------------------------------------------------------- 
| Elixir Asset Management 
|-------------------------------------------------------------------------- 
| 
| Elixir provides a clean, fluent API for defining some basic Gulp tasks 
| for your Laravel application. By default, we are compiling the Less 
| file for our application, as well as publishing vendor resources. 
| 
*/ 

elixir(function(mix) { 
    mix.version('themes/default/assets/css/styles.css') 
     .copy('public/themes/default/assets/img/', 'public/build/themes/default/assets/img/'); 
});