web-dev-qa-db-fra.com

Laravel 5.4 - Mix - Comment exécuter le rechargement en direct du navigateur

J'utilise Laravel 5.4 dans mon projet et j'essaie de configurer le système de construction frontend à l'aide de Mix. Tout fonctionne bien sauf que je n'ai pas pu obtenir l'option de rechargement automatique du navigateur. Il n'y a rien à propos de sur la documentation.

Quelqu'un s'il vous plaît aider, comment puis-je y parvenir?

laravel-5laravel-elixirmix
17
Selim Mahmud

Mise à jour importante!

oubliez ce que j'ai dit auparavant, maintenant laravel mix est mis à jour et avec quelques améliorations dans la fonctionnalité et la documentation.

maintenant vous pouvez simplement:

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

// Or:

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

puis npm run watch et vous êtes prêt à partir!

si vous souhaitez mettre à jour la version de votre webpack, changez la version du package.json en *:

"laravel-mix": "*",

et exécutez npm update laravel-mix.

veuillez vérifier la documentation mise à jour du mélange sur github

Fin de mise à jour importante

selon la documentation dont vous avez juste besoin pour exécuter npm run hot sur votre projet et dans votre référence de script ou de feuille de style, utilisez:

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

de sorte que la fonction mix() pointera l'url de vos actifs vers http://localhost:8080/.

buuuuuuuut ... C'est exactement ce que la documentation dit comme vous pouvez le voir ici . Je ne peux pas le faire fonctionner sur une laravel nouvelle installation exécutant Arch Linux, tout se compile comme il se doit et la fonction mix() pointe vers 8080 Mais rien n'est injecté, je suis de retour dans l'âge de Ctrl+R.

j'espère que vous aurez plus de chance!

18
Edu Ruiz

Vous pouvez toujours utiliser browser-sync. Laravel 5.4 livré avec webpack et il y a un plugin pour cela: browser-sync-webpack-plugin.

  1. Installez les trucs de browser-sync:

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

  2. Ajoutez au webpack.mix.js:

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

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

  1. Ajoutez cet extrait au bas de votre page juste avant </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. Démarrez les deux, Laravel et webpack-dev-server:

    php artisan serve & npm run watch

8
zhekaus

Pour mes projets je fais ensuite:

1) installez chrome extension de navigateur Livereload https://chrome.google.com/webstore/detail/livereload/jnihajbhpnppcggbcgedagnkighmdlei

2) installez livereload globalement (via CLI):

npm install -g livereload

ou localement dans votre dossier de projet (via CLI):

npm install livereload

3) mettez cet extrait dans votre layout.blade.php ou dans un autre modèle:

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

4) Exécutez livereload dans votre dossier de projet (via CLI):

livereload

5) appuyez sur le bouton de chargement du foie dans le navigateur Chrome navigateur livereload button

C'est ça!

6
Viktorminator

Oui, j'ai eu le même problème, je dirais que je m'en tiens à l'élixir parce que si vous regardez le github, c'est un gâchis complet. Il y a des problèmes avec le chargement des polices à partir du bootstrap, des problèmes avec la combinaison des flux de méthodes, trop de problèmes pour même entrer dans les détails. C'est tout simplement trop nouveau et ils n'ont pas résolu tous les problèmes.

Mes 2 cents à ce sujet sont si vous allez passer à quelque chose de nouveau au moins, assurez-vous que tout ce qui a fonctionné sur l'élixir hors de la boîte est bien mélangé.

6
Jayswager

Si quelqu'un a besoin d'un autre moyen de le faire fonctionner, par exemple si le mixage n'est pas utilisé sur le backend, voici comment je l'ai résolu:

modifier server.php à partir du répertoire racine du projet et remplacer return false;:

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

comme suit:

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

bien sûr, vous devez démarrer les deux artisan serve et npm run hot

2
CodeXP

Voici comment j'ai fait fonctionner Webpack LiveReload dans Laravel> = 5.4 et Laravel.mix https://komelin.com/articles/configuring-webpack-livereload-laravelmix

1
Konstantin Komelin