Using Mix to version combined files

Good question. I haven't tried passing anything in. I just call version() and everything seems to work out fine. Mix versions everything in their current directory so no more build directory.

@ejdelmonico Any idea how to accomplish what I am going for with Mix, combine 1 or more LESS files and 1 or more CSS files into one versioned CSS file?

@JoshMountain Let me have a look at the code and get back to you.

UPDATE: There is a mix.combine() that takes an array which might help.

mix.combine(files, destination);

@ejdelmonico Yeah that is what I'm using above, it works well but doesn't version properly.

Hey guys, there is an Issue on Github linked to this problem.

https://github.com/JeffreyWay/laravel-mix/issues/153

Temp fix provided by kenvunz: https://github.com/JeffreyWay/laravel-mix/issues/153#issuecomment-274954022

@z.bruce I'm not sure that is really related to the issue here. Versioning is working it just isn't versioning the right file. Also I'm not using hot reloading.

@JeffreyWay Was this functionality (the ability to pass things in to version()) removed in mix?

@JoshMountain are you worried about syntax or about getting it up and running? Have you tried it like this?

mix.js([
    'resources/assets/js/bootstrap.js',
    'node_modules/bootstrap/dist/js/bootstrap.js',
    'node_modules/rangetouch/dist/rangetouch.js',
    'node_modules/select2/dist/js/select2.full.js',
    'node_modules/spectrum-colorpicker/spectrum.js',
    'node_modules/flatpickr/dist/flatpickr.js',
    'resources/assets/js/app.js',
], 'public/js/app.js').version()

.less('resources/assets/less/app.less', '../resources/assets/build/app.css')

.combine([
    'resources/assets/build/app.css',
    'node_modules/font-awesome/css/font-awesome.css',
    'node_modules/select2/dist/css/select2.css',
    'node_modules/plyr/dist/plyr.css',
    'node_modules/spectrum-colorpicker/spectrum.css',
    'node_modules/flatpickr/dist/flatpickr.css',
    'node_modules/flatpickr/dist/themes/airbnb.css'
], 'public/css/app.css').version()

@colourmill Trying it like that it versions my JS properly but my CSS winds up in /resources/assets/build (versioned).

If I change line 11 to this:

.less('resources/assets/less/app.less', 'public/css/app.css')

it works properly, however now I have this useless app.css intermediary file in the public directory. I was hoping I could have it tucked away as a build file, or remove it but I don't think mix can remove files.

@JoshMountain a quick solution could be to .less() the file to public/css/app.css, it should then get overwritten in the combine step.

@colourmill Oddly enough, when I do that it versions the file before the combination. I get app.css which is a combined but not versioned file and then app.xxxxx.css in the same directory which is versioned but only includes the less file.

Jeffrey closed an issue over at Github explaining this behavior:

https://github.com/JeffreyWay/laravel-mix/issues/211#issuecomment-276095424

Thanks @barbarouspony that solves my dilemma. I guess the fact that you can't pass in an array threw me, I'll just have to @include everything in app.less

laravel-mix is a great tool that simplifies the process of bundling via webpack. However, it should not considered as a replacement of laravel-elixir (a gulp wrapper), since gulp and webpack are two different tools with different philosophies.

Having said that, ΙΜΗΟ removing completely ly `laravel-el from 5.3 and substituting it with th `laravel in 5.4 a hasty decision, since laravel users that used to simply concatenate and versioning their static assets cannot relay on laravel-mix for doing this

@iraklisg exactly, i feel the same. It seems to me that it was a rush decision to ditch elixir for mix in 5.4. Elixir still offers better flexibility for small-medium projects (obviously IMHO)

@gfabrizi, all, the good news is that already has been contributed a PR by @forehalo (many thanks dude :+1:) that deals with the versioning of combined files. Moreover, since [email protected] the combined files are automatically added to the mix-manifest.json so that the laravel's mix() helper function can be actually used to reference them see also here.

I just wrote this disccussion: https://laracasts.com/discuss/channels/elixir/laravel-54-mix-alternative-way-to-perform-a-versionning-of-compiled-files

I was facing same problem. I wanted to combine file using laravel:mix and have them versionised. So I created a php function that will handle both npm run dev and npm run production PLUS, your combined files will be versionnised. You can add them to view the same way.

Maybe my solution can help, here is the original thread from github : https://github.com/JeffreyWay/laravel-mix/issues/211

And here is my contribution :

The problem is that css files generated from sass compilation are versioned, so they have a different name from original, just use wildcard for styles() or combine() use.

mix
.sass('resources/assets/sass/app.scss', 'public/css/app.css')
.styles([
        'public/css/app.*.css',
        ...
])
.version()
;

Hope it helps!