Elixir + Gulp + Laravel with differents JS inclusions depending on URL

Question

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???

I use `@section('scripts')` inside one of the other blades of a particular view. So if you have a blade specific to `tournaments/create` view, in that blade you can do `@section('scripts') — camelCase, Feb 01 '16 at 16:42
but elixir is all in gulp.js no? How do you get unified and minified scripts and styles? — Juliatzin, Feb 01 '16 at 16:56
Using the `gulpfile.js`, I create multiple `mix.scripts()` and `mix.styles()`, as well as create the `mix.version()`. Then those "packages" that you just gulp'd are available using the code above. — camelCase, Feb 01 '16 at 16:59
ok, So I gulp.js, you make 1 mix.script per blade you need, is it correct? — Juliatzin, Feb 01 '16 at 17:04

camelCase · Accepted Answer · 2016-02-01T17:35:35.837

3

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'
]);

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.

In your 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. Hope it all makes sense!

edited Feb 01 '16 at 17:35

answered Feb 01 '16 at 17:10

camelCase

5,460
3
34
37

Tx, I did it, it seems to work, I have created a unique app.css, but then, everything fails in the chrome console: Uncaught SyntaxError: Unexpected token < jquery.min.js:1 Uncaught SyntaxError: Unexpected token < bootstrap.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 – Juliatzin Feb 01 '16 at 17:46
I will put it in question – Juliatzin Feb 01 '16 at 17:46
Just chrome? Cache issue? The font decoding I think might be related to [formatting](http://stackoverflow.com/a/30442416) although I'm not positive. And did you do the `mix.version()` because it seems there are some errors there too. – camelCase Feb 01 '16 at 18:02
Did you check the link I provided above? Others experienced same issue, Chrome only, when dealing with the font as well. – camelCase Feb 01 '16 at 18:10
1

yep, I'm checking it. – Juliatzin Feb 01 '16 at 18:13
I get this: resources/assets/css/https:/fonts.googleapis.com/css?family=Roboto:400,300,100,500,700,900 – Juliatzin Feb 01 '16 at 19:00
Well personally I don't use it like that. I use the link outside of gulp, like ``. But I believe you can also use with `@import url(...)` in your `.css` file and it should work. – camelCase Feb 01 '16 at 19:08

Elixir + Gulp + Laravel with differents JS inclusions depending on URL

1 Answers1

Linked