Laravel 5.4 - Mix - Как запустить перезагрузку браузера в реальном времени

Я использую Laravel 5.4 в своем проекте и пытаюсь настроить систему сборки внешнего интерфейса с помощью Mix. Все работает нормально, за исключением того, что я не смог получить опцию автоматической перезагрузки браузера. В документации об этом ничего нет.

Кто-нибудь, пожалуйста, помогите, как я могу этого добиться?


laravel laravel-mix laravel-elixir
person Selim Mahmud    schedule 05.02.2017    source источник
comment
Посмотрите на мой ответ, пожалуйста.   -  person zhekaus    schedule 12.02.2017

Ответы (5)


arrow_upward
23
arrow_downward

Важное обновление!

забудьте о том, что я сказал ранее, теперь Laravel Mix обновлен и с некоторыми улучшениями в функциональности и документации.

теперь вы можете просто:

mix.browserSync('my-domain.dev');

// Or:

mix.browserSync({
    proxy: 'my-domain.dev'
})

а затем npm run watch и все готово!

если вы хотите обновить версию веб-пакета, измените версию в package.json на *:

"laravel-mix": "*",

и запустите npm update laravel-mix.

проверьте обновленную документацию по миксу на github

Важное обновление завершено

в соответствии с документацией вам просто нужно запустить npm run hot в своем проекте, а в вашем сценарии или таблице стилей используйте ссылку:

<link rel="stylesheet" href="{{ mix('css/app.css') }}">

поэтому функция mix() укажет URL ваших ресурсов на http://localhost:8080/.

buuuuuuuut... Это именно то, что говорится в документации, как вы можете видеть здесь. Я не могу заставить его работать на свежей установке laravel под управлением Arch Linux, все компилируется, как и должно, и функция mix() указывает на 8080, но ничего не вводится, я вернулся в Ctrl+R возрасте.

надеюсь, вам повезет больше!

person Edu Ruiz    schedule 07.02.2017
comment
selim-mahmud (не могу отметить вас) и @jayswager, пожалуйста, взгляните на мое обновление, теперь все работает. :) - person Edu Ruiz; 23.02.2017
comment
Следование стандартным документам laravel и запуск npm update laravel-mix сработали для меня, спасибо +1 - person Rob; 30.05.2017

arrow_upward
12
arrow_downward

Вы по-прежнему можете использовать browser-sync. Laravel 5.4 поставляется с веб-пакетом, и для него есть плагин: browser-sync-webpack-plugin.

  1. Установите материалы browser-sync:

    npm install --save-dev browser-sync browser-sync-webpack-plugin

  2. Добавьте к webpack.mix.js:

const BrowserSyncPlugin = require('browser-sync-webpack-plugin');

mix.webpackConfig({
   plugins: [
       new BrowserSyncPlugin({
           files: [
               'app/**/*',
               'public/**/*',
               'resources/views/**/*',
               'routes/**/*'
           ]
       })
   ]
});

  1. Добавьте этот фрагмент внизу страницы прямо перед </body>:

    @if (getenv('APP_ENV') === 'local')
<script id="__bs_script__">//<![CDATA[
    document.write("<script async src='http://HOST:3000/browser-sync/browser-sync-client.js?v=2.18.6'><\/script>".replace("HOST", location.hostname));
    //]]>
</script>
@endif

  2. Запустите оба, Laravel и webpack-dev-server:

    php artisan serve & npm run watch

person zhekaus    schedule 12.02.2017
comment
как можно перекомпилировать или запустить gulp (эликсир) после того, как были затронуты файлы в assets/js? и могу ли я вместо этого поместить эту конфигурацию в свой gulpfile? - person blamb; 13.07.2017

arrow_upward
6
arrow_downward

Да, у меня была такая же проблема, я бы сказал, придерживайтесь эликсира, потому что, если вы посмотрите на github, это полный беспорядок. Есть проблемы с загрузкой шрифтов из начальной загрузки, проблемы с объединением потоков методов, слишком много проблем, чтобы даже вдаваться в подробности. Это слишком новое, и они не исправили все проблемы.

Мои 2 цента по этому поводу: если вы собираетесь перейти на что-то новое, по крайней мере, убедитесь, что все, что работает с эликсиром из коробки, находится в миксе.

person Jayswager    schedule 07.02.2017
comment
Я согласен с вами в этом, с самого веб-сайта hrm: обратите внимание, что замена горячего модуля (HMR) по-прежнему является экспериментальной функцией. Она является экспериментальной и тщательно не тестировалась. Ожидайте некоторых ошибок. Теоретически можно использовать в продакшене, но, возможно, еще слишком рано использовать его для чего-то серьезного. - person Edu Ruiz; 07.02.2017
comment
Вы по-прежнему можете использовать browser-sync. Laravel 5.4 поставляется с веб-пакетом, и для него есть плагин: browser-sync-webpack-plugin. - person zhekaus; 12.02.2017

arrow_upward
6
arrow_downward

Для своих проектов я делаю следующее:

1) установить расширение для браузера Chrome Livereload https://chrome.google.com/webstore/detail/livereload/jnihajbhpnppcggbcgedagnkighmdlei

2) глобально установить livereload (через CLI):

npm install -g livereload

или локально в папке вашего проекта (через CLI):

npm install livereload

3) поместите этот фрагмент в свой layout.blade.php или другой шаблон:

<script>
   document.write('<script src="http://' + (location.host || 'localhost').split(':')[0] +
        ':35729/livereload.js?snipver=1"></' + 'script>')
</script>

4) запустите livereload в папке вашего проекта (через CLI):

livereload

5) нажмите кнопку перезагрузки в браузере Chrome кнопка перезагрузки

Вот и все!

person Viktorminator    schedule 01.07.2017

arrow_upward
2
arrow_downward

Если кому-то нужен альтернативный способ заставить его работать, например, если микс не используется на бэкэнде, вот как я его решил:

отредактируйте server.php из корневого каталога проекта и замените return false;:

if ($uri !== '/' && file_exists(__DIR__.'/public'.$uri)) {
    return false;
}

следующим образом:

if ($uri !== '/' && file_exists(__DIR__.'/public'.$uri)) {

    // set log file for debugging purposes if needed
    #ini_set('error_log', __DIR__ . '/storage/logs/laravel.log');

    header("HTTP/1.1 301 Moved Permanently");
    header("Location: http://localhost:8080" . $uri);

    exit();
}

конечно нужно запустить и artisan serve и npm run hot

person CodeXP    schedule 04.06.2017