laravel-5 - example - blade php code

Laravel 5.4-Mix-Cómo ejecutar la recarga en vivo del navegador

Question

Estoy usando Laravel 5.4 en mi proyecto e intento configurar el sistema de compilación de frontend utilizando Mix. Todo funciona bien, excepto que no pude obtener la opción de recarga automática del navegador. No hay nada al respecto en la documentación.

Alguien por favor ayuda, ¿cómo puedo lograr eso?

Answer 1

¡Actualización importante!

olvídate de lo que dije antes, ahora la mezcla de laravel está actualizada y con algunas mejoras en la funcionalidad y la documentación.

ahora puedes simple:

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

// Or:

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

y luego npm run watch y ya está listo para ir!

Si desea actualizar la versión de su paquete web, cambie la versión en package.json a *:

"laravel-mix": "*",

y ejecuta npm update laravel-mix .

Por favor, consulte la mezcla de documentación actualizada en Github

Importante actualización final

De acuerdo con la documentación, solo necesita ejecutar npm run hot en su proyecto y en su script o en el uso de la hoja de estilo:

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

por lo que la función mix() dirigirá la URL de sus activos a http://localhost:8080/ .

buuuuuuuut ... Eso es lo que dice la documentación, como se puede ver here . No puedo hacer que funcione en una instalación nueva de laravel que se ejecuta arch linux, todo se compila como debería y la función mix() apunta a 8080 pero no se inyecta nada, estoy de nuevo en Ctrl+R age.

Espero que tengas mas suerte!

Answer 2

Aquí es cómo hice que Webpack LiveReload funcione en Laravel> = 5.4 y Laravel.mix https://komelin.com/articles/configuring-webpack-livereload-laravelmix

Answer 3

Para mis proyectos que hago a continuación:

1) instale la extensión del navegador Chrome Descargue el archivo https://chrome.google.com/webstore/detail/livereload/jnihajbhpnppcggbcgedagnkighmdlei

2) instale livereload globalmente (a través de CLI):

npm install -g livereload

o localmente en su carpeta de proyecto (a través de CLI):

npm install livereload

3) ponga este fragmento en su layout.blade.php u otra plantilla:

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

4) ejecute livereload en su carpeta de proyectos (a través de CLI):

livereload

5) presiona el botón livereload en el navegador Chrome

¡Eso es!

Answer 4

Sí, he estado teniendo el mismo problema, diría que se adhieren al elixir porque si miras el github es un completo desastre. Hay problemas con la carga de fuentes desde bootstrap, problemas con la combinación de secuencias de métodos, demasiados problemas para incluso entrar en detalles. Es demasiado nuevo y no solucionaron todos los problemas.

Mis 2 centavos por esto es si vas a actualizar a algo nuevo al menos asegúrate de que todo lo que funcionó en el elixir fuera de la caja está en la mezcla.

Answer 5

Si alguien necesita una forma alternativa de hacerlo funcionar, por ejemplo, si la mezcla no se usa en el backend, aquí es cómo lo he resuelto:

edite server.php desde el directorio raíz del proyecto y reemplace return false; :

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

como sigue:

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

Por supuesto, necesitas comenzar tanto el artisan serve como el npm run hot

Answer 6

Todavía puede utilizar browser-sync . Laravel 5.4 se envió con webpack y hay un complemento para él: browser-sync-webpack-plugin .

1. Instalar cosas del browser-sync :

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

2. Añadir a la webpack.mix.js :

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

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

3. Agregue este fragmento en la parte inferior de su página justo antes de </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

4. Inicia ambos, Laravel y webpack-dev-server:

   php artisan serve & npm run watch