Asset management - maintaining a reference to relative assets after concatenation and version control

Question

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

Want to explain how to handle concatenation and version control (in my case, I use Elixir styles() and version() ). The problem I am facing is that the new file after concat / version will be in the new folder, breaking any links to assets from the source css or js files.

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

• Move the required assets one at a time (using mix.copy () for each asset folder) to the new build path (i.e. the build path used by the Elixir version).
• Manually edit the paths in each asset file to reference the absolute path.

Despite the fact that both of these options will work, I feel that maybe something is missing. It also becomes quite impractical when working with javascript plugins (for example, with their own images, fonts, styles, etc.).

Is there a more practical way to manage relative paths in concatenation and version control?

Answer 1

EDIT:

I just passed the delete 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:

In fact, if you only use mix.copy(...) , you simply cannot use gulp watch , and you will need to recompile your entire stack for this to work.

You can achieve the same results using the solution below and you do not need to recompile everything, because it will work only when changing the version 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)'); } 

Answer 2

Here is the solution for Laravel Elixir after creating version control. For the copy command, you need to specify it as the 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 3

These are relative paths - so keep a relative relationship.

Just move the images to the public/build/ directory as part of the gulp after viewing.