Laravel Elixir 6 getting exception on “gulp watch”

Question

When I try to run gulp watch, I'm getting this error:

stream.js:74
      throw er; // Unhandled stream error in pipe.
      ^

Error: ENOENT: no such file or directory, stat 'XXXX\public\build\css\client-18724fe72d.css'
    at Error (native)

I tried to leave the client.scss file empty, and the error disappeared. I found out that the errors sometimes is appearing when I have these lines in my client.scss:

// Pages
@import 'pages/client/auth';
@import 'pages/client/normals';
@import 'pages/client/orders';

I've already checked each one of them, and there's nothing wrong with the syntax or something like that. Even more, when I run gulp, it works without any errors.

This is my gulpfile.js:

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

elixir(mix => {
    mix
        .sass('app.scss')
        .sass('client.scss', 'public/css/client.css')
        .sass('panel.scss', 'public/css/panel.css')
        .copy('resources/assets/fonts', 'public/build/fonts')
        .copy('resources/assets/images', 'public/build/images')
        .webpack('app.js')
        .webpack('panel.js')
        .version(['css/app.css', 'css/client.css', 'css/panel.css', 'js/app.js', 'js/panel.js'])
});

This is the file structure:

Is there something that I'm doing wrong here?

Answer 1

As you can see in my gulpfile.js, I copied files/folders to /build folder which is probably a problem on Laravel Elixir 6, and when I think about it now, it's sounds a bad approach too.

So what I did to fix the issue was:

• removing these lines from gulpfile.js:

  .copy('resources/assets/fonts', 'public/build/fonts')
  .copy('resources/assets/images', 'public/build/images')
  

• placing the fonts and images folders into the storage/app/public

• running php artisan storage:link (storage:link artisan command)
• changing the paths in the assets files to the new directory
• running gulp

And it fixed my problem. Now I can do gulp watch again.

Credit to ejdelmonico on laracasts.

Answer 2

Throwing my two cents in here. I had the same issue and it went away as soon as I stopped using the starting / relative path option, and used full relative paths (relative to /resources) instead.

So instead of:

mix.styles([
    'vendors/jquery-steps/demo/css/jquery.steps.css',
    'vendors/pace/pace-minimal.css',
    'vendors/bootstrap/dist/css/bootstrap.min.css',
    '../node_modules/sweetalert2/dist/sweetalert2.min.css',
], 'public/css/vendors.css', 'public');

This worked, and gulp watch ran again:

mix.styles([
    '../../../public/vendors/jquery-steps/demo/css/jquery.steps.css',
    '../../../public/vendors/pace/pace-minimal.css',
    '../../../public/vendors/bootstrap/dist/css/bootstrap.min.css',
    '../../../node_modules/sweetalert2/dist/sweetalert2.min.css',
], 'public/css/vendors.css');

It's not pretty, but it works.