I'd like to begin use Elixir + Gulp. In my project, I just use CSS + JS.
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
....
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.
Any idea?
EDIT1:
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');
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.
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
What did I do wrong???
In your
gulpfile.js
you can create one large script like:Now that you have a merged script containing your scripts, you can use
elixir
to pull it in. Note that you need to rungulp
in the console to create the files.In your tournementcreate.blade.php
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!