Asset management - maintaining reference to relative assets after concatenation and versioning

Question

I know that L5 and Elixir are still under development, but I'm excited to start thinking about ways to reorganize my code. I think my question has more to do with asset management, in the context of L5 and Elixir.

Want to clarify how concatenation and versioning should be handled (in my case I'm using Elixir's styles() and version()). The issue I'm having is that the new file after concat/version will be located in a new folder, breaking any references to assets from the original css or js files.

For example, an original CSS file that has background-image: url('../img.png') will no longer work. I've tried a couple of things, but both are not ideal especially in the case of vendor plugins:

1. Move required assets over one-by-one (using mix.copy() for each folder of assets), to the new build path (ie. the build path used by Elixir's versioning).
2. Manually edit the paths in each asset file to refer to an absolute path

Although both of these options will make things work, I feel as though I may be missing something. It also becomes quite impractical when working with javascript plugins (ex. ones that come with their own images, fonts, stylesheets, etc).

Is there a more practical way of managing relative paths when concatenating and versioning?

Answer 1

Here is the solution for Laravel Elixir after you build for versioning. For copy command you need reference it as full path.

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/');
});

Answer 2

They are relative paths - so keep the relative relationship.

Just move the images over to the public/build/ directory as part of the gulp command, after the visioning.

Answer 3

EDIT:

I just submitted a pull request to Elixir, so you can just do:

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

---

OLD ANSWER:

Actually, if you use mix.copy(...) alone, you just can't use gulp watch and you'll need to recompile your entire stack in order to get this working.

You can achieve the same results with the solution below and don't need to recompile everything, because it'll just work when you change a versioned file:

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)');

}