0

Estoy intentando entender mejor Laravel Mix.

En un proyecto Laravel tenemos 2 archivos app.js, uno en la carpeta public/js para todo el funcionamiento básico y otro en resources/js donde se configura lo relacionado con Vue.

Ahora bien, Laravel Mix procesa y minifica archivos .js, esta configuración la hacemos en webpack.mix.js, por ejemplo:

const mix = require('laravel-mix');

mix.js('resources/js/app.js', 'public/js').vue()
  .sass('resources/sass/app.scss', 'public/css', [
      //
      ]);

Hasta acá todo bien, pero no veo que procese los archivos .js y .css que están de antemano en public/js y public/css. Entonces, estos archivos se pueden agregar a Laravel Mix? Si se puede, de qué forma? O lo estoy entendiendo mal?

1
  • 1
    para procesar los archivos se hacen mediante modulos, en este caso es webpack quien traspila esos modulos a ES5 que es el que puede interpretar tu navegador, mix.js recibe dos parametros el 1ro es el archivo a compilar y el 2do es la ruta a donde se va transferir el archivo compilado, para compilarlo no se puede hacer así como así, se debe correr un script mediante tareas ya se como gulp o similar, en este caso el ecosistema de node lo hace por ti, solo es necesario correr el script npm run dev desde un shell el 11 abr. 2021 a las 22:57

1 respuesta 1

1

Mix procesa lo que tú le indiques que procese como entrypoints y él se mete de ahí hacia adentro haciendo que Webpack siga un conjunto de reglas. La mayoría viene preconfigurada y el archivo webpack.mix.js te permite customizar a gusto.

Tu archivo de configuración dice:

mix.js(
  // Toma el script en resources/js/app.js como entrypoint 
  "resources/js/app.js",
  // transpílalo a public/js/app.js incluyendo recursivamente sus dependencias
  "public/js/app.js"
  ).vue() // usa las reglas Vue osea incluye el template-compiler y eso...
  .sass(
     // luego toma los estilos desde el entrypoint "resources/sass/app.scss"
     "resources/sass/app.scss", 
     // y usa node-sass para convertirlo en public/css/app.css 
     // incluyendo otros estilos llamados con @import
     "public/css/app.css"
   );

Ten presente que la versión transpilada de resources/js/app.js o parte de ésta, pisará public/js/app.js. En general cualquier script o estilo que haya en public pueden ser efímeros.

└─ public
  └─ js
     └─ app.js // lógica existente
└─ resources
  └─ js 
     └─ app.js // lógica nueva
     └─ App.vue

Yo sugeriría:

  1. Renombra tu archivo, (por ejemplo a current.js) con eso evitas que lo pise mix.

  2. Mueve tu archivo a resources/js (con otro nombre, para no chocar con lo que tienes en app.js), de modo que tus scripts de origen siempre están en resources y lo que haya en public no se edite a mano

  3. Usa mix para copiar ese archivo desde su nueva ubicación a public, sin alterarlo

 mix.js('resources/js/app.js', 'public/js').vue()
  .copy('resources/js/current.js','public/js/current.js')
  .sass('resources/sass/app.scss', 'public/css');

Quedando

└─ public
  └─ js
     └─ <VACIO, se llena con mix>
└─ resources
  └─ js 
     └─ app.js // lógica nueva
     └─ current.js // lógica existente
     └─ App.vue

Dependiendo del contenido de tu lógica actual más adelante podrás integrarla a la nueva, pero primero haz funcionar lo crucial.

1
  • Clarísimo, muchas gracias.
    – FabianM
    el 13 abr. 2021 a las 12:42

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.