繁体   English   中英

Elixir + Gulp + Laravel,根据网址的不同,JS包含内容也不同

[英]Elixir + Gulp + Laravel with differents JS inclusions depending on URL

我想开始使用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,并且始终只有两个包含: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中打开文件,因此链接似乎正常。

但是,当我打开自己的网站时,一切都出了问题,而且我在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

我做错了什么???

在您的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() 希望这一切都有道理!

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM