Laravel 5.4 - Mix - Wie ausgeführt-browser-live-reload

Bin ich mit Laravel 5.4 in meinem Projekt und versuche die frontend-build-system mit Mix. Alles ist in Ordnung, es sei denn, ich könnte nicht in der Lage, browser auto-reload-option. Es gibt nichts über es auf Dokumentation.

Bitte jemand helfen, wie kann ich das erreichen?

InformationsquelleAutor der Frage Selim Mahmud | 2017-02-05

4

Ja, ich habe das gleiche Problem würde ich sagen stick zu elixir, weil wenn man sich den github seine ein komplettes Chaos. Es gibt Probleme mit dem laden von Schriftarten von bootstrap, die Probleme mit der Kombination der Methode strömen, zu viele Probleme, um auch ins detail gehen. Es ist einfach zu neu und Sie hat nicht alle Probleme beheben.

Meine 2 cents über dieses ist, wenn Sie gehen, um ein upgrade auf etwas neues atleast stellen Sie sicher, was auch immer gearbeitet Elixier aus der box ist auf Mischung.

InformationsquelleAutor der Antwort Jayswager
14

Wichtiges update!

vergessen, was ich gesagt habe, jetzt laravel Mischung wird aktualisiert und mit einigen Verbesserungen in der Funktionalität und der Dokumentation.

können Sie jetzt einfach:
```
mix.browserSync('my-domain.dev');

//Or:

mix.browserSync({
    proxy: 'my-domain.dev'
})
```
dann npm run watch und Sie sind gut zu gehen!

wenn Sie möchten, aktualisieren Sie Ihr webpack-version, ändern Sie die version auf der Verpackung.json *:
```
"laravel-mix": "*",
```
und führen npm update laravel-mix.

bitte überprüfen Sie die mix-aktualisierte Dokumentation auf github

Wichtiges update Ende

entsprechend der Dokumentation, die Sie gerade brauchen, um ausführen npm run hot auf Ihr Projekt und in Ihrem script oder style-sheet-Referenz verwenden:

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

also die mix() - Funktion zeigen Sie Ihre Vermögenswerte url http://localhost:8080/.

buuuuuuuut... das ist genau Das, was die Unterlagen sagen, wie Sie sehen können hier. Ich kann nicht damit es funktioniert auf eine laravel frische Installation läuft arch linux, alles kompiliert, wie es sollte und die mix() Funktion zeigen 8080 aber nichts eingespritzt wird, bin ich wieder in Ctrl+R Alter.

hoffe du hast mehr Glück!

InformationsquelleAutor der Antwort Edu Ruiz

Können Sie weiterhin verwenden browser-sync.
Laravel 5.4 Lieferumfang webpack und es gibt ein plugin für : browser-sync-webpack-plugin.

Installieren browser-sync's stuff:

npm install --save-dev browser-sync browser-sync-webpack-plugin
Hinzufügen, um die webpack.mix.js:

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

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

Fügen Sie dieses snippet an der Unterseite der rechten Seite, bevor </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

Starten, Laravel und webpack-dev-server:

php artisan serve & npm run watch

InformationsquelleAutor der Antwort zhekaus

3

Für meine Projekte ich als Nächstes tun:

1) installieren Sie den chrome-browser-Erweiterung Livereload
https://chrome.google.com/webstore/detail/livereload/jnihajbhpnppcggbcgedagnkighmdlei

2) installieren livereload weltweit (via CLI):
```
npm install -g livereload
```
oder lokal im Projekt-Ordner (via CLI):
```
npm install livereload
```
3) setzen Sie dieses snippet in Ihre layout.blade.php oder andere Vorlage:
```
<script>
   document.write('<script src="http://' + (location.host || 'localhost').split(':')[0] +
        ':35729/livereload.js?snipver=1"></' + 'script>')
</script>
```
4) laufen livereload in Ihrem Projekt-Ordner (via CLI):
```
livereload
```
5) drücken Sie die livereload-button im Chrome-browser

Das ist es!

InformationsquelleAutor der Antwort Viktorminator
2

Hier ist, wie ich aus Webpack LiveReload Arbeit in Laravel >=5,4 und Laravel.mix https://komelin.com/articles/configuring-webpack-livereload-laravelmix

InformationsquelleAutor der Antwort Konstantin Komelin

Wenn jemand braucht eine alternative Möglichkeit, es zu schaffen, zum Beispiel, wenn die Mischung nicht über die back-End, hier ist es, wie ich es gelöst:

Bearbeiten server.php vom Projekt-root-Verzeichnis und ersetzen return false;:

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

wie folgt:

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();
}

natürlich müssen Sie beginnen beide artisan serve und npm run hot

InformationsquelleAutor der Antwort CodeXP

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.

Wichtiges update!

Wichtiges update Ende