web-dev-qa-db-ja.com

Laravel 5.4-Mix-ブラウザのライブリロードを実行する方法

私はプロジェクトでLaravel 5.4を使用しており、Mixを使用してフロントエンドビルドシステムをセットアップしようとしています。ドキュメンテーション上で。

誰か助けてください、どうすればそれを達成できますか？

laravel-5laravel-elixirmix
17
Selim Mahmud

重要な更新！

前に言ったことを忘れて、今laravel= mixが更新され、機能とドキュメントがいくつか改善されました。

今、あなたは簡単にすることができます：

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

// Or:

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

そして、_npm run watch_で、準備完了です！

webpackバージョンを更新する場合は、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 ... here を見るとわかるように、それはまさにドキュメントに書かれていることです。 Arch Linuxを実行しているlaravelフレッシュインストール、すべてが正常にコンパイルされ、mix()関数が_8080_を指しているが、何も指していません。注入され、私は_Ctrl+R_時代に戻っています。

もっと幸運を祈ります！

18
Edu Ruiz

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

8
zhekaus

私のプロジェクトでは、次のことを行います。

1）install 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 browser livereload button

それでおしまい！

6
Viktorminator

はい、私は同じ問題を抱えています。エリクサーに固執するのは、githubを見ると完全に混乱しているからです。ブートストラップからのフォントのロードには問題があり、メソッドストリームの結合には問題があり、詳細を説明することすらできないほど多くの問題があります。それはあまりにも新しく、すべての問題を修正しませんでした。

これに関する私の2セントは、もしあなたが何か新しいものにアップグレードしようとしているなら、エリクサーでうまくいったものがすべて箱に入っていることを確認してください。

6
Jayswager

誰かがそれを機能させるために別の方法が必要な場合、たとえばバックエンドでミックスが使用されていない場合、私はそれをどのように解決したのですか：

編集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

2
CodeXP

Laravel> = 5.4およびLaravel.mix https://komelin.com/articles/configuring-webpack-livereload-laravelmix でWebpack LiveReloadを動作させる方法は次のとおりです。

1
Konstantin Komelin