Laravel 5.4-Mix - как запустить браузер live reload

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

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

16
laravel-5 laravel-elixir mix

6 ответов

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

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

4

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

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

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

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

// Or:

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

а то npm run watch и вы хорошо идти!

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

"laravel-mix": "*",

и работать npm update laravel-mix.

пожалуйста, проверьте обновленный микс документация на github

важное обновление end

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

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

так mix() функция укажет url ваших активов на http://localhost:8080/.

buuuuuuuut... Это именно то, что говорится в документации, как вы можете видеть здесь. Я не могу заставить его работать на новой установке laravel запуск arch linux, все компилируется как должно и

14

вы все еще можете использовать browser-sync. Laravel 5.4 поставляется с webpack и есть плагин для него: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

7

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

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

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

npm install -g livereload

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

npm install livereload

3) поставить этот фрагмент в свой макет.лезвие.в PHP или другой шаблон:

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

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

livereload

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

вот именно!

3

вот как я сделал работу печени Webpack в Laravel >=5.4 и Laravel.mix https://komelin.com/articles/configuring-webpack-livereload-laravelmix

2

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

редактировать сервер.в 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

2