Laravel Elixir - Unable to use .version with css and multiple js files

Question

I am having issues with Laravel Elixir .version('xxxxxx.js'). For some reason, it appears as though I cannot use .version with js files or in addition to .css or even have multiple versioned js files.

elixir(function(mix) {

    /**
     * My Less
     */

    mix.less('app.less').version('public/css/app.css');

    /**
     * Vendor Scripts
     */

    mix.scripts([
        'jquery/dist/jquery.js'
    ], 'public/js/vendor.js', 'resources/assets/bower_components/').version('public/js/vendor.js');

    /**
     * My Scripts
     */

    mix.scripts(['app.js','app2.js'], 'public/js/app.js', 'resources/assets/scripts').version('public/js/vendor.js');

});

My laravel-elixir config is as follows:

var config = {
    production: !! util.env.production,
    srcDir: 'app',
    assetsDir: 'resources/assets/',
    cssOutput: 'public/css',
    jsOutput: 'public/js',
    bowerDir: 'resources/assets/bower_components',
    tasks: [],
    watchers: { default: {} },
    duplicate: [],
    concatenate: { css: [], js: [] }
};

Answer 1

I run into the same problem. It appears that version() overides the build folder at each call.

You need to call version only once at the end with all the files, like the following:

elixir(function(mix) {

    /**
     * My Less
     */

    mix.less('app.less')

    /**
     * Vendor Scripts
     */

    .scripts([
        'jquery/dist/jquery.js'
    ], 'public/js/vendor.js', 'resources/assets/bower_components/')

    /**
     * My Scripts
     */

    .scripts(['app.js','app2.js'], 'public/js/app.js', 'resources/assets/scripts')

    /**
     * My Versioning
     */
    .version([
        'public/css/app.css',
        'public/js/vendor.js', // BTW you are calling version twice on this file
        'public/js/app.js'
    ])

});

Answer 2

There were 2 issues with my question and BeS's solution did work but created another problem when I concatenated several vendor files:

1. mix.less and mix.scripts are called asynchronously. I was thinking of it procedurally.
2. As @BeS mentioned, I need to call version once at the end.

My Solution - Combination of BeS's solution but amended to chain the methods ensuring all scripts and less etc... have been concatenated prior to calling .version:

elixir(function(mix) {

    mix.less('app.less')
        .scripts([
           'jquery/dist/jquery.js',
           'other.js',
           'another.js'
        ], 'public/js/vendor.js','resources/assets/bower_components/')
        .scripts(['app.js','app2.js'], 'public/js/app.js', 'resources/assets/scripts')
        .version(['public/css/app.css', 'public/js/app.js', 'public/js/vendor.js']);
});

Answer 3

I also had a versioning problem and found that there is currently a bug with elixir versioning. (note: at the time of writing, Elixir version <= v0.14.0)

It looks like when concatenating a lot of files (or more likely, the output file is large), then it will not get versioned with the rest of the files.

It looks like you can run gulp version separately and they will get versioned. If you are experiencing this issue then gulp or gulp watch will not do it.

Here is my gulp file, vendor.js was being compiled but not versioned. It is not even the last file being versioned:

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

elixir(function(mix) {

    mix.sass('app.scss')

    .scripts([
        'react/react-with-addons.min.js',
        'jquery/dist/jquery.min.js',
        'bootstrap-sass-official/assets/javascripts/bootstrap.js'
    ], 'public/js/vendor.js', 'resources/assets/bower')

    .scripts(['app.js'], 'public/js/app.js', 'resources/assets/js')

    .version([
        'css/app.css',
        'js/vendor.js',
        'js/app.js'
    ]);

});

Running gulp version afterwards will version it.

Update:

This seems to be fixed >= v0.14.2