Elixir + Gulp + Laravel с различными включениями JS в зависимости от URL

Я хотел бы начать использовать Elixir + Gulp. В своем проекте я использую только CSS + JS.

Сегодня я использую его так: у меня есть панель инструментов.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
....

Я бы хотел использовать elixir и делать это на стороне elixir, поэтому я могу упростить свой dashboard.blade.php и всегда иметь только 2 включения: app.css и app.js.

Я просто не знаю, как лучше всего это сделать.

Есть идеи?

РЕДАКТИРОВАТЬ1:

В моем gulp.js я определил свои общие стили, общие для всех страниц:

mix.styles([
  'icons/icomoon/styles.css',
  'bootstrap.css',
  'components.css',
  'colors.css'

], 'public/css/app.css');

Затем на своих страницах я включаю это так:

    {!! Html::style('css/app.css')!!}

Я могу открыть файл в хроме, поэтому ссылка в порядке.

Но когда я открываю свой сайт, все идет не так, и у меня в консоли 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

Что я сделал не так???


javascript php css laravel laravel-elixir
person Juliatzin    schedule 01.02.2016    source источник
comment
Я использую @section('scripts') внутри одного из других лезвий определенного представления. Таким образом, если у вас есть колонка, относящаяся к представлению tournaments/create, в этой колонке вы можете сделать @section('scripts')<script src="{{ elixir('....') }}></script>@endsection, которая добавит сценарий в ваш тег script.   -  person camelCase    schedule 01.02.2016
comment
То же самое и со стилями...@section('styles')   -  person camelCase    schedule 01.02.2016
comment
но эликсир весь в gulp.js нет? Как получить унифицированные и минимизированные скрипты и стили?   -  person Juliatzin    schedule 01.02.2016
comment
Используя gulpfile.js, я создаю несколько mix.scripts() и mix.styles(), а также создаю mix.version(). Затем те пакеты, которые вы только что проглотили, становятся доступными с помощью приведенного выше кода.   -  person camelCase    schedule 01.02.2016
comment
Итак, я gulp.js, вы делаете 1 mix.script для каждого нужного вам блейда, это правильно?   -  person Juliatzin    schedule 01.02.2016
comment
Смотрите мой ответ ... здесь было слишком много, чтобы печатать :)   -  person camelCase    schedule 01.02.2016

Ответы (1)


arrow_upward
3
arrow_downward

В вашем 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 в консоли, чтобы создать файлы.

В вашем турнире create.blade.php

@section('scripts')
<script src="{{ elixir('js/directory/from/above/tournamentCreate.js') }}"></script>
@endsection

И вы можете создать столько, сколько захотите. Вы просто используете новый mix.scripts(), используя тот же макет. Надеюсь, все это имеет смысл!

person camelCase    schedule 01.02.2016
comment
Tx, я сделал это, вроде работает, я создал уникальный app.css, но потом в консоли chrome все вылетает: Uncaught SyntaxError: Unexpected token ‹ jquery.min.js:1 Uncaught SyntaxError: Unexpected token ‹ bootstrap .min.js:1 Uncaught SyntaxError: Неожиданный токен ‹ (индекс):1 Не удалось декодировать загруженный шрифт: laravel.dev/css/fonts/icomoon.woff?3p0rtw (index):1 Ошибка синтаксического анализа OTS: недопустимый тег версии (index):1 Не удалось декодировать загруженный шрифт: laravel.dev/css/fonts/icomoon.ttf?3p0rtw (индекс): 1 Ошибка синтаксического анализа OTS: недопустимо тег версии - person Juliatzin; 01.02.2016
comment
Я поставлю это под вопрос - person Juliatzin; 01.02.2016
comment
Просто хром? Проблема с кешем? Я думаю, что декодирование шрифта может быть связано с форматированием, хотя я не уверен. И вы сделали mix.version(), потому что там тоже есть ошибки. - person camelCase; 01.02.2016
comment
Вы проверили ссылку, которую я дал выше? У других возникла такая же проблема, только в Chrome, при работе со шрифтом. - person camelCase; 01.02.2016
comment
ага, проверяю. - person Juliatzin; 01.02.2016
comment
Я получаю это: resources/assets/css/https:/fonts.googleapis.com/css?family=Roboto:400,300,100,500,700,900 - person Juliatzin; 01.02.2016
comment
Ну лично я таким не пользуюсь. Я использую ссылку вне gulp, например <link type="text/css" rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:400,600,300">. Но я считаю, что вы также можете использовать с @import url(...) в вашем файле .css, и это должно работать. - person camelCase; 01.02.2016