Elixir + Gulp + Laravel 包含不同的 JS 内含物，具体取决于 URL

Question

我想开始使用 Elixir + Gulp。在我的项目中，我只是使用 CSS + JS.

今天，我这样使用它：我有一个 dashboard.blade.php 包含在所有文件中。

然后，我根据页面对每个库进行条件包含：

@if (Request::is("tournaments") || Request::is("invites"))
    {!! Html::script('js/plugins/tables/footable/footable.min.js') !!}
@endif
@if (Request::is("tournaments/create"))
    {!! Html::script('js/plugins/forms/inputs/duallistbox.min.js') !!}
    {!! Html::script('js/plugins/pickers/pickadate/picker.js') !!}
    {!! Html::script('js/plugins/pickers/pickadate/picker.date.js') !!}

@endif
....

我想要的是使用长生不老药，并在长生不老药方面做这些事情，这样我就可以简化我的 dashboard.blade.php 并且总是只有 2 个包含物：app.css 和 app.js

我只是不知道最好的方法是什么。

有什么想法吗？

编辑 1：

在我的 gulp.js 中，我定义了所有页面通用的通用样式：

mix.styles([
  'icons/icomoon/styles.css',
  'bootstrap.css',
  'components.css',
  'colors.css'

], 'public/css/app.css');

然后，在我的页面中，我这样包含它：

    {!! Html::style('css/app.css')!!}

我可以打开 chrome 中的文件，所以 link 似乎没问题。

但是当我打开我的网站时，一切都出错了，我在 Chrome 控制台：

Uncaught SyntaxError: Unexpected token <
jquery.min.js:1 Uncaught SyntaxError: Unexpected token <
bootstrap.min.js:1 Uncaught SyntaxError: Unexpected token <
blockui.min.js:1 Uncaught SyntaxError: Unexpected token <
app.js:1 Uncaught SyntaxError: Unexpected token <
pnotify.min.js:1 Uncaught SyntaxError: Unexpected token <
switch.min.js:1 Uncaught SyntaxError: Unexpected token <
(index):1 Failed to decode downloaded font:     http://laravel.dev/css/fonts/icomoon.woff?3p0rtw
(index):1 OTS parsing error: invalid version tag
(index):1 Failed to decode downloaded font:     http://laravel.dev/css/fonts/icomoon.ttf?3p0rtw
(index):1 OTS parsing error: invalid version tag

我做错了什么？？？

Answer 1

在您的 gulpfile.js 中，您可以创建一个大型脚本，例如：

/**
 * Tournaments create package
 */
mix.scripts([
    'forms/inputs/dualistbox.min.js',
    'pickers/pickadate/picker.js',
    'pickers/pickadate/picker.date.js'
    // ↑ these are the files you are wanting to merge
], 'js/directory/where/you/want/script/saved/tournamentCreate.js', 'js/plugins');
//  ↑ this is directory you want the merged file to be in           ↑ this is the directory to look in for the scripts above

/**
 * Version control (might use, might not...I do)
 */
mix.version([
    'js/directory/from/above/tournamentCreate.js'
]);

现在您已经有了包含您的脚本的合并脚本，您可以使用 elixir 将其拉入。请注意，您需要运行 gulp 在控制台中创建文件。

在你的tournementcreate.blade.php

@section('scripts')
<script src="{{ elixir('js/directory/from/above/tournamentCreate.js') }}"></script>
@endsection

您可以根据需要创建任意多个。您只需使用相同布局的新 mix.scripts()。希望一切都有意义！

Elixir + Gulp + Laravel 包含不同的 JS 内含物，具体取决于 URL

Elixir + Gulp + Laravel with differents JS inclusions depending on URL

javascript

css

php

laravel

laravel-elixir