Elixir + Gulp + Laravel,根据URL,JS包含的内容有所不同 [英] Elixir + Gulp + Laravel with differents JS inclusions depending on URL
问题描述
我想开始使用Elixir + Gulp.在我的项目中,我只使用CSS + JS.
I'd like to begin use Elixir + Gulp. In my project, I just use CSS + JS.
今天,我像这样使用它:我在所有文件中都有一个dashboard.blade.php.
Today, I use it like that: I have a dashboard.blade.php that I include in all files.
然后,根据页面的不同,我对每个库都有一个条件包含:
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
....
我想要使用elixir,并在elixir方面进行此操作,因此我可以简化我的dashboard.blade.php并始终只有两个包含项:app.css和app.js
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
我只是不知道什么是最好的方法.
I just don't know what is the best way to do it.
有什么主意吗?
在gulp.js中,我定义了所有页面通用的通用样式:
In my gulp.js I defined my general styles common to all pages:
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')!!}
我可以用chrome打开文件,因此链接似乎没问题.
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:
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
中,您可以创建一个大型脚本,例如:
In your gulpfile.js
you can create one large script like:
/**
* 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
来创建文件.
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.
在您的tournementcreate.blade.php
@section('scripts')
<script src="{{ elixir('js/directory/from/above/tournamentCreate.js') }}"></script>
@endsection
您可以创建任意数量的内容.您只需使用具有相同布局的新mix.scripts()
.希望这一切都有道理!
And you can create as many as you'd like. You just use a new mix.scripts()
using the same layout. Hope it all makes sense!
这篇关于Elixir + Gulp + Laravel,根据URL,JS包含的内容有所不同的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!