[英]Elixir + Gulp + Laravel with differents JS inclusions depending on URL
I'd like to begin use Elixir + Gulp. 我想开始使用Elixir + Gulp。 In my project, I just use CSS + JS. 在我的项目中,我只使用CSS + JS。
Today, I use it like that: I have a dashboard.blade.php that I include in all files. 今天,我这样使用它:在所有文件中都包含一个dashboard.blade.php。
Then, I have a conditional include for each libs depending on the page: 然后,根据页面的不同,我为每个库提供了一个条件包含:
@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
....
What I would like is use elixir, and doing this stuff in elixir side, so I can simplify my dashboard.blade.php and always have only 2 inclusions: app.css and app.js 我想要的是使用长生不老药,并在长生不老药方面进行此操作,因此我可以简化我的dashboard.blade.php,并且始终只有两个包含:app.css和app.js
I just don't know what is the best way to do it. 我只是不知道什么是最好的方法。
Any idea? 任何想法?
EDIT1: 编辑1:
In my gulp.js I defined my general styles common to all pages: 在gulp.js中,我定义了所有页面通用的通用样式:
mix.styles([
'icons/icomoon/styles.css',
'bootstrap.css',
'components.css',
'colors.css'
], 'public/css/app.css'); ],'public / css / app.css');
Then, In my pages, I include it like that: 然后,在我的页面中添加如下内容:
{!! Html::style('css/app.css')!!}
I can open the file in chrome, so link seems to be ok. 我可以在Chrome中打开文件,因此链接似乎正常。
But when I open my site, everything goes wrong, and I have in Chrome Console: 但是,当我打开自己的网站时,一切都出了问题,而且我在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
What did I do wrong??? 我做错了什么???
In your gulpfile.js
you can create one large script like: 在您的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'
]);
Now that you have a merged script containing your scripts, you can use elixir
to pull it in. Note that you need to run gulp
in the console to create the files. 现在,您已经包含了包含脚本的合并脚本,您可以使用elixir
将其拉入。请注意,您需要在控制台中运行gulp
才能创建文件。
In your tournementcreate.blade.php 在你的tournementcreate.blade.php中
@section('scripts')
<script src="{{ elixir('js/directory/from/above/tournamentCreate.js') }}"></script>
@endsection
And you can create as many as you'd like. 您可以创建任意数量的内容。 You just use a new mix.scripts()
using the same layout. 您只需使用具有相同布局的新mix.scripts()
。 Hope it all makes sense! 希望这一切都有道理!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.