Laravel Elixir 6 在“gulp watch”上出现异常答案

【问题标题】：Laravel Elixir 6 getting exception on "gulp watch"Laravel Elixir 6 在“gulp watch”上出现异常
【发布时间】：2017-01-19 23:34:49
【问题描述】：

当我尝试运行 gulp watch 时，我收到此错误：

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)

我尝试将client.scss 文件留空，错误消失了。我发现当我的client.scss 中有这些行时，有时会出现错误：

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

我已经检查了它们中的每一个，语法或类似的东西没有任何问题。更重要的是，当我运行 gulp 时，它可以正常工作。

这是我的 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'])
});

这是文件结构：

我在这里做错了吗？

【问题讨论】：

你可以把你的文件放在哪里？，我昨天遇到了同样的问题，我意识到我的文件路径错误
@OrlandoCharles，已更新。无论如何，我不认为路径是错误的，因为当我运行gulp时它正在编译那些文件。
“你们都应该只使用一个 mix.webpack() 直到我们推送一个提交来修复一些事情。” - github.com/laravel/elixir/issues/626#issuecomment-252322287

标签： javascript laravel compilation gulp laravel-elixir

【解决方案1】：

正如您在我的 gulpfile.js 中看到的，我将文件/文件夹复制到 /build 文件夹中，这可能是 Laravel Elixir 6 上的一个问题，当我现在考虑时，这听起来也是一个糟糕的方法。

所以我解决这个问题的方法是：

从gulpfile.js 中删除这些行：

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

将fonts 和images 文件夹放入storage/app/public
正在运行php artisan storage:link(storage:link artisan command)
将资产文件中的路径更改为新目录
正在运行gulp

它解决了我的问题。现在我又可以gulp watch了。

归功于ejdelmonico on laracasts。

【讨论】：

【解决方案2】：

把我的两分钱扔在这里。我遇到了同样的问题，一旦我停止使用起始/相对路径选项，它就消失了，而是使用了完整的相对路径（相对于 /resources）。

所以而不是：

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

这成功了，gulp watch 又跑了：

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

它不漂亮，但它有效。

【讨论】：