我想开始使用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:
在我的口中.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
来创建文件。
在你的巡回赛中创造刀片.php
@section('scripts')
<script src="{{ elixir('js/directory/from/above/tournamentCreate.js') }}"></script>
@endsection
您可以根据需要创建任意数量。您只需使用相同的布局使用新mix.scripts()
。希望这一切都有意义!