Framework: Elixir not able to version multiple files?

Created on 9 Feb 2015  路  33Comments  路  Source: laravel/framework

I'm not sure if the website is lacking documentation on this, whether it's a genuine bug or if I'm just being derp. I'm also getting some other issues with it but I'll create separate issues tickets for them.

I'm trying to version two scripts and a css file, but no matter how I call the version method it only ever hashes the last file passed to it, or possibly it hashes them all but removes any files preceding the last one and my computer is too fast to for me to spot it.

Here's the contents of my package.json file:

{
  "dependencies": {
    "gulp": "^3.8.8",
    "laravel-elixir": "*"
  }
}

And here's the content of my gulpfile.js:

elixir(function (mix) {
    mix.less('bootstrap.less', 'public/assets/css/styles.min.css')
        .scripts([
            'dropdown.js',
            'collapse.js',
            'transition.js',
            'affix.js',
            'modal.js',
            'switch.js',
            'select2.js',
            'link.js',
            'custom.js'
        ], 'public/assets/js/global/main.js')
        .scriptsIn('resources/js/ie-hacks', 'public/assets/js/ie/ie-hacks.min.js')
        .version([
            'public/assets/css/styles.min.css',
            'public/assets/js/global/main.js',
            'public/assets/js/ie/ie-hacks.min.js'
        ]);
});

And my terminal outputs this a result:

/usr/bin/node /home/ben/source/www_icb/node_modules/gulp/bin/gulp.js --color --gulpfile /home/ben/source/www_icb/gulpfile.js
[17:40:01] Using gulpfile ~/source/www_icb/gulpfile.js
[17:40:01] Starting 'default'...
[17:40:01] Starting 'less'...
[17:40:02] Finished 'default' after 387 ms
[17:40:03] gulp-notify: [Laravel Elixir]
[17:40:03] Finished 'less' after 1.85 s
[17:40:03] Starting 'scripts'...
[17:40:03] Finished 'scripts' after 146 ms
[17:40:03] Starting 'version'...
[17:40:03] Finished 'version' after 27 ms

Process finished with exit code 0

Most helpful comment

Pretty big useless bump (400+ days)

All 33 comments

"laravel-elixir": "*" is a bad idea. Set a constraint on the minor version at least. We have bc breaks that will screw your builds.

I am seeing this exact same thing. Only my last .version is running.

I installed Laravel 5 from fresh only last Thursday, via the composer laravel/installer script as documented on the site. which gave me those dependency versions in my packages.json.

I've now removed those dependencies and run the following:
sudo npm install gulp --save and sudo npm install laravel-elixir --save, which has updated my packages.json file to the below:

{
  "dependencies": {
    "gulp": "~3.8.11",
    "laravel-elixir": "~0.10.7"
  }
} 

I'm still getting the same issues as before.

I also have trouble versioning multiple scripts. But it's not always the last file that is kept.

mix.less('app.less')
    .scripts([
        'bootstrap/dist/js/bootstrap.min.js'
    ], 'public/js/vendor.js', 'resources/bower')
    .scripts(['app.js'], 'public/js/app.js')
    .copy('resources/bower/jquery/dist/jquery.min.js', 'public/js/jquery.min.js')
    .copy('resources/bower/bootstrap/dist/fonts/', 'public/fonts/bootstrap')
    .version(['css/app.css', 'js/vendor.js', 'js/app.js', 'js/jquery.min.js']);

Only app.css and app.js are always in the build dir/rev file, vendor.js an jquery sometimes. So might be a timing issue?

Same, but when I use gulp watch, the file doesn't version, but does compile.

elixir(function(mix) {

    mix.less('app.less')

    mix.scriptsIn('public/js', 'public/js/compiled.js')

    mix.version([
        'css/app.css',
        'js/compiled.js'
    ])

});

js/compiled.js is never versioned when using gulp watch. I need to continuously run gulp to have scripts compile AND be versioned.

@natedavis are you trying to call .version multiple times? I did that too, but found out that you have to make a single call with an array if you want to version multiple files. I submitted a PR to the docs for this, but it hasn't been accepted yet.

Also, to note that when using gulp watch, the files do not get versioned, but they do get compiled. (Defeats the purpose though)

This is happening to me too. I'm not calling version more than once either.

Ping @JeffreyWay. :)

Not getting this on latest version (and the gulp version --production is build during forge deployment).

https://github.com/orchestral/orchestraplatform.com/blob/master/gulpfile.js#L48 works fine.

Thanks @crynobone.

@crynobone in your example, you are only versioning 1 JS file and 1 CSS file vs many as is given in this example.

The one particular file not being versioned has over 12 .js files (vendors). When I whittle this down to about 6, all my files version correctly.

mix.scripts([
            "vendor/jquery.1.11.2.js",
            "vendor/bootstrap.3.3.2.js",
            "vendor/enquire.min.js",
            "vendor/media.match.min.js",
            "vendor/placeholdr.min.js",
            "vendor/bootstrap-editable.min.js",
            "vendor/bootstrap-notify.js",
            "vendor/select2.full.js",
            "vendor/bootstrap-tabdrop/js/bootstrap-tabdrop.js"
        ], "public/assets/js/vendor.js")

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

@GrahamCampbell , upon removing everything but vendor.js from version, _no_ builds are versioned (expecting 1 - vendor.js). But the compressed and merged vendor.js file is created and appears in the specified folder. Versioning still fails.

As @barryvdh said, perhaps there is a time issue because I have so many scripts being merged because in removing jquery and bootstrap.js, vendor.js compiles just fine.

In your example, you are only versioning 1 JS file and 1 CSS file vs many as is given in this example.

In the earlier comment, the argument was only one build file was available.

The one particular file not being versioned has over 12 .js files (vendors). When I whittle this down to about 6, all my files version correctly.

Have you tried separating the process such as my example.

mix.scripts(...);

// separate mix.
mix.version(..);

This way you can call gulp version directly, if you need to.

Hi all,

I have the same problem. The version() method is not working when I try to version a file that was created with more than 2 files (with 2 files it works ok).

Here is the example:

// Compile app.js
mix.scripts([
    'vendor/jquery.js',
    'vendor/bootstrap.js',
    'controllers/general-controller.js'
], 'public/js/app.js', 'public/js');

// Version scripts
mix.version(["js/app.js"]);

The rev-manifest.json file doesn麓t include the file, and the build folder is empty. If I remove one file on the list of compiled scripts works as expected.

I tried running "gulp version" and it worked ok. So, I think that is an issue when you try to do all the tasks at the same time.

Yeah - this is odd. I just reproduced your exact structure, and it merged and versioned perfectly.

@JeffreyWay @SergioGregorutti @jaketoolson @crynobone - what development environments are you using?

I'm wondering if people who are having the bug are using Windows environments, while people using Mac/Linux are passing ok?

Windows users (even on Homestead using Ubuntu), can have a 'race condition' with gulp doing files and the sync between the VM and drive.

I know I had this issue myself (as a Windows + Homestead user). I am trying to remember how I fixed it - but before I spend more time on it - lets confirm if that is the problem?

@JeffreyWay - before I used Exilir - I used to do automatic versioning in gulp. But I had issues sometimes where versioned files would randomly not be created etc (very similar to the above).

After much debugging - the issue was a race condition, where gulp would want to start versioning files, even though other processes hadnt finished writing the output css files first.

I ended up using run-sequence (https://www.npmjs.com/package/run-sequence) - to ensure that everything else ran first, and the once _everything_ was 100% complete - it would then run the versioning as a final command.

This fixed the issue for me. Although I dont have the issues with Exilir described above - it sounds similar to what used to affect me.

Maybe add it to a dev branch and see if it fixes the problem?

@TheShiftExchange I have the issue on Mac and Linux.

On package.json I have:

"laravel-elixir": "*"

Maybe I need to use a specific version? Which one is the last one?

I can't get versioning to work either with sass, it works fine for my js, just not my sass. My sass compiles fine.

elixir(function(mix) {
    mix.sass('app.scss')
    .version(["css/all.css"]);
});

I麓m trying with:

"laravel-elixir": "0.13.1"

But is still not working. Which are the steps to update the package version? Maybe Im doing something wrong. I tried executing "npm install" but the issue still persist.

Btw, Im just trying to help to improve Elixir. It seems like there're anothers guys like me having this problem.

Thanks!

I found that if I have an incorrect path in mix.scripts then mix.version doesn't produce the versioned files, or include them in the manifest.

For eg this won't produce anything in the public/build/js dir.

mix.scripts([
        'bower_components/foundation/js/foundation/foundsss-obvious-path-error-ssation.js',
], 'public/js/site.js');

mix.version([
        'public/js/site.js',
]);

But this will...

mix.scripts([
        'bower_components/foundation/js/foundation/foundation.js',
], 'public/js/site.js');

mix.version([
        'public/js/site.js',
]);

public/js/site.js appears to still get created though...

I don't think this is a problem regarding # of files (as I original thought), but somehow related to size of combined files which in-turn causes compiling to take longer so time might be an issue similar to what @TheShiftExchange is saying.

@crynobone -- by separating out everything as you suggested, after running gulp and the file is not versioned, when I call gulp version it does work. So there's certainly something happening :)

Yeah.. After a lot of tests I can confirm that if I run "gulp version" everything works as expected.

But, if I run just "gulp" or "gulp watch" the issue still persist. Maybe not always, but is happening with large gulp files.

P.S.: Im using the last version of Elixir.

I am having this problem as well.

I thought it was the number of files, but the fact that it is skipping vendor.js (which is not the last file being versioned), I also think it might have to do with the file size and timing.

vendor.js is compiled but not versioned when running gulp, unless I run gulp version separately.

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

require('elixir-react-jsx');

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

    .jsx()

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

});

Hey, everyone -

I pushed a commit over the weekend which ensures that mix.script() calls are triggered sequentially. I _think_ this commit might solve some of your issues. Can you npm update and see?

@JeffreyWay I updated to v0.14.0 and the above gulpfile now skips app.js instead of vendor.js =P

I wasn't transforming jsx before, so maybe app.js is taking longer to be transformed and that's why that is the one being skipped now. Either way though, it still seems like something is up.

I have this problem on one machine and not the other. With laravel-elixir 0.10.7 it works fine, with 0.14.0 it does not (skips the last file in the version array). Both have gulp 3.8.11. Just did some other testing and found the most recent version that worked was 0.13.2.

After updating from 0.14.0 to 0.14.2, it now works for me.

0.14.2 fixed the problem for me as well.

for one file js or css.styles('your file name') and js file scripts.(['your file name ']) . for Example :

elixir(function(mix) {

        .copy("node_modules/semantic-ui/dist/themes/default/assets/fonts","public/fonts/semantic-ui")
        .copy("node_modules/semantic-ui/dist/semantic.min.css","resources/assets/css/semantic.min.css")
        .copy("node_modules/semantic-ui/dist/semantic.min.js","resources/assets/js/semantic.min.js")
        .copy("node_modules/jquery/dist/jquery.min.js","resources/assets/js/jquery.min.js")
        .copy("node_modules/semantic-ui/dist/components/form.js","resources/assets/js/form.js")
        .copy("node_modules/semantic-ui/dist/components/transition.js","resources/assets/js/transition.js")
        .styles(['semantic.min.css'])
        .styles('system.css')
        .scripts(['jquery.min.js','semantic.min.js','form.js','transition.js'])
        .version(['css/all.css','js/all.js','css/system.css']);

});

Pretty big useless bump (400+ days)

Hello Everyone,

I'm running Laravel 5.3 with laravel-elixir version ^6.0.0-14 and I had this issue today as well. All i did to fix it was add an array containing the multiple compiled files i want to version.

elixir((mix) => {
    mix.sass('app.scss' ,null,  null, { includePaths: ['node_modules/bootstrap/scss']})
    .webpack('app.js')
    //add file versioning for multiple files
    .version([
        'public/css/app.css',
        'public/js/app.js'
    ])
    //turn brwoserSync on
    .browserSync({proxy: "laraexpo.app"});
});

Hope that helps.

Be carefull that you don`t call the version method multiple times. I had the same problem, but i was calling the .version method 2 times. Now i added all the to-be-versioned files in the same .version method, and now it works perfectly.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

RomainSauvaire picture RomainSauvaire  路  3Comments

gabriellimo picture gabriellimo  路  3Comments

YannPl picture YannPl  路  3Comments

PhiloNL picture PhiloNL  路  3Comments

CupOfTea696 picture CupOfTea696  路  3Comments