Creations
Beta
Verificación en dos pasos activada
Verificado por Binance
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
¿Estás cansado de configurar Webpack desde cero para cada proyecto de diseño web?
¿O quizá Gulp, Parcel o Rollup?
Yo pasé por todo esto y al final llegué a combinar dos o tres paquetes para procesar SCSS y VueJS o React, lo que desees usar.
No porque esta guía muestre una configuración fácil y rápida de usar, significa que deberías saltarte el configurar tu mismo tu entorno desde cero. Si eres nuevo usando Webpack, y mensiono más este porque es el que más conozco, no deberías seguir esta guía, sino una que te enseñe a configurar Webpack de cero y así puedas entenderle.
Antes de explicarte, mira la captura siguiente, son todas las dependencias que utilizo en un entorno configurado manualmente, nada automatizado. Este entorno me permite procesar scss, React, minificar archivos, remover CSS del archivo final que no esté utilizando en mi diseño, me permite abrir el navegador y ver los cambios en vivo cada que edito un archivo, entre otras cosas. Y el archivo de configuración de webpack ¡es de más de 100 líneas de código!
Yo se que probablemente mi metodo no automatizado no es el mejor y que podría encontrar otras formas pero lo hice mientras aprendía. Hay mejores formas pero lo más simple que he encontrado y que hace todo lo anterior es lo siguiente:
Requerimientos de mi entorno:
Lo primero que tienes que hacer es crear una carpeta, la carpeta de tu proyecto. Yo te recomiendo mucho utilizar Laravel Valet para tu servidor local, te permite tener urls de tu proyecto tales como miproyecto.test para cargarlo en el navegador.
Yo he nombrado mi carpeta jsdev. Desde la consola hacemos mkdir jsdev && cd jsdev.
Inicializamos nuestro proyecto de node:
le damos enter a todo hasta terminar
Ahora vamos a añadir los paquetes, pero te recomiendo instalarlos usando Yarn, ya que usando npm install <paquete> me ha dado problemas. Lo que pasa eque laravel-mix instala todas las depenencias automaticamente sinque nosotros tengamos que hacer nada, pero si se instala usando npm al final da errores de dependencias que no se instalaron.
Aquí una guía de cómo instalar Yarn:
Installation | Yarn
Yarn hace lo mismo que npm, solo que lo hace a una velocidad mayor.
Ok, entonces prosigamos a instalar nuestras dependencias:
Aunque no lo creas, son todas las dependencias que necesitas. Bueno, todas las que tú necesitas instalar manualmente, porque detrás de escena, laravel-mix ha instalado un centenar de ellas jeje.
Una vez terminado, vayamos a nuestro editor favorito y abrimos el directorio donde instalamos todo.
Vamos a crear un archivo llamado webpack.mix.js
Lo primero que haras es incluir los paquetes que acabamos de instalar
Después de esto vamos a poner la configuración que solo consta de unas pocas líneas.
Ojo con la ruta al archivo scss. Con el proposito de probar nuestro entorno, vamos a crear una carpeta llamada scss y dentro creamos un archivo llamado style.scss y ya que estamos en ello, también un archivo index.html:
index.html
scss/style.scss
Un último paso. Debemos incluir un script en nuestro archivo package.json que nos permitirá compilar o procesear nuestro proyecto:
Sí, son las mísmas líneas que usa laravel.
Pon todo el código dentro de "scripts": { }
Captura:
Ahora si a probar!
Corremos el siguiente comando:
...error.
Necesitamos instalar cross-env, que se encarga de definir la variable NODE_ENV:
Una vez se instala, volvamos a probar el comando:
Ahora laravel-mix va instalar todas las dependecias requeridas, incluyendo compilador de sass y al final te va pedir volver a correr el comando así que vuelve a hacerlo, el mismo de arriba.
Si todo ha ido bien, tendrán el archivo style.css compilado en su carpeta root con tu css compilado:
Si quieres comprimir el archivo, solo corre npm run production:
Pero les va dar un error ya que no se ha añadido ningún contenido a purificar con purgecss.
Cambiemos la linea en webpack.mix.js
por
Ahora obtendrán el siguiente archivo:
Se preguntarán a donde fuer a parar la clase .unaclase que teníamos en el archivo scss... bueno, esa es la magia de purgecss,te permite eliminar todo el css que no hayas utilizado en tus documentos HTML. Escanea cada tipo de archivo que le pases por sus opciones y te devuelve un archivo bien pequeño ya que no incluye lo que no necesitas.
Para recargar el navegador automáticamente cada que hagas modificaciones a tus archivos y recompilar tu scss, basta con correr el comando:
Pero antes cambia la configuración de
.browserSync() a:
El proxy solo es requerido si usas dominios de prueba en caso que utilices Valet o Laragon en windows. Trata de incluir todo lo que requieras de tu proyecto.
Y para concluir, si vas a usar VueJS o React, basta con incluir esta linea al principio del archivo:
Justo despues de mix. en webpack.mix.js
Espero les haya sido de utilidad el tutorial, y cualquier duda escriban una respuesta aquí. Lo más seguro esque a muchos les de error ciertas cosas por problemas de versiones. Trataré de ayudarles a solucionarlas a cada uno en caso de que no les funcione.
Saludos.
¿O quizá Gulp, Parcel o Rollup?
Yo pasé por todo esto y al final llegué a combinar dos o tres paquetes para procesar SCSS y VueJS o React, lo que desees usar.
No porque esta guía muestre una configuración fácil y rápida de usar, significa que deberías saltarte el configurar tu mismo tu entorno desde cero. Si eres nuevo usando Webpack, y mensiono más este porque es el que más conozco, no deberías seguir esta guía, sino una que te enseñe a configurar Webpack de cero y así puedas entenderle.
Antes de explicarte, mira la captura siguiente, son todas las dependencias que utilizo en un entorno configurado manualmente, nada automatizado. Este entorno me permite procesar scss, React, minificar archivos, remover CSS del archivo final que no esté utilizando en mi diseño, me permite abrir el navegador y ver los cambios en vivo cada que edito un archivo, entre otras cosas. Y el archivo de configuración de webpack ¡es de más de 100 líneas de código!
Yo se que probablemente mi metodo no automatizado no es el mejor y que podría encontrar otras formas pero lo hice mientras aprendía. Hay mejores formas pero lo más simple que he encontrado y que hace todo lo anterior es lo siguiente:
Requerimientos de mi entorno:
- Laravel-mix (Si, laravel-mix pero no vamos a utilizar Laravel ya que es un entorno para diseño web sin tocar PHP)
- laravel-mix-purgecss (Nos permitirá remover todo el css no utilizado del archivo final)
Lo primero que tienes que hacer es crear una carpeta, la carpeta de tu proyecto. Yo te recomiendo mucho utilizar Laravel Valet para tu servidor local, te permite tener urls de tu proyecto tales como miproyecto.test para cargarlo en el navegador.
Yo he nombrado mi carpeta jsdev. Desde la consola hacemos mkdir jsdev && cd jsdev.
Inicializamos nuestro proyecto de node:
PHP:
npm initle damos enter a todo hasta terminar
PHP:
package name: (jsdev)
version: (1.0.0)
description:
entry point: (index.js)
test command:
git repository:
keywords:
author:
license: (ISC)
About to write to ~/Dev/jsdev/package.json:
{
"name": "jsdev",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}
Is this OK? (yes)Ahora vamos a añadir los paquetes, pero te recomiendo instalarlos usando Yarn, ya que usando npm install <paquete> me ha dado problemas. Lo que pasa eque laravel-mix instala todas las depenencias automaticamente sinque nosotros tengamos que hacer nada, pero si se instala usando npm al final da errores de dependencias que no se instalaron.
Aquí una guía de cómo instalar Yarn:
Installation | Yarn
Yarn hace lo mismo que npm, solo que lo hace a una velocidad mayor.
Ok, entonces prosigamos a instalar nuestras dependencias:
PHP:
yarn add laravel-mix laravel-mix-purgecss --devAunque no lo creas, son todas las dependencias que necesitas. Bueno, todas las que tú necesitas instalar manualmente, porque detrás de escena, laravel-mix ha instalado un centenar de ellas jeje.
Una vez terminado, vayamos a nuestro editor favorito y abrimos el directorio donde instalamos todo.
Vamos a crear un archivo llamado webpack.mix.js
Lo primero que haras es incluir los paquetes que acabamos de instalar
PHP:
let mix = require('laravel-mix');
require('laravel-mix-purgecss');Después de esto vamos a poner la configuración que solo consta de unas pocas líneas.
PHP:
mix.sass('sass/style.scss', './')
.purgeCss()
.browserSync();Ojo con la ruta al archivo scss. Con el proposito de probar nuestro entorno, vamos a crear una carpeta llamada scss y dentro creamos un archivo llamado style.scss y ya que estamos en ello, también un archivo index.html:
index.html
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Ejemplo</title>
</head>
<body>
<p>Ejemplo de aplicación web</p>
</body>
</html>scss/style.scss
HTML:
/* Color primario */
$primary-color: #333;
$text-color: #fff;
/* COmentario de ejemplo */
body {
background-color: $primary-color;
}
.unaclase {
color: $text-color;
}Un último paso. Debemos incluir un script en nuestro archivo package.json que nos permitirá compilar o procesear nuestro proyecto:
Sí, son las mísmas líneas que usa laravel.
Pon todo el código dentro de "scripts": { }
PHP:
"dev": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"watch": "npm run development -- --watch",
"production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"Captura:
Ahora si a probar!
Corremos el siguiente comando:
PHP:
npm run dev...error.
Necesitamos instalar cross-env, que se encarga de definir la variable NODE_ENV:
PHP:
yarn add cross-env --devUna vez se instala, volvamos a probar el comando:
PHP:
npm run devAhora laravel-mix va instalar todas las dependecias requeridas, incluyendo compilador de sass y al final te va pedir volver a correr el comando así que vuelve a hacerlo, el mismo de arriba.
Si todo ha ido bien, tendrán el archivo style.css compilado en su carpeta root con tu css compilado:
Si quieres comprimir el archivo, solo corre npm run production:
Pero les va dar un error ya que no se ha añadido ningún contenido a purificar con purgecss.
Cambiemos la linea en webpack.mix.js
PHP:
.purgeCss()
PHP:
.purgeCss({
extensions: ['html'],
folders: ['./']
})Ahora obtendrán el siguiente archivo:
Se preguntarán a donde fuer a parar la clase .unaclase que teníamos en el archivo scss... bueno, esa es la magia de purgecss,te permite eliminar todo el css que no hayas utilizado en tus documentos HTML. Escanea cada tipo de archivo que le pases por sus opciones y te devuelve un archivo bien pequeño ya que no incluye lo que no necesitas.
Para recargar el navegador automáticamente cada que hagas modificaciones a tus archivos y recompilar tu scss, basta con correr el comando:
PHP:
npm run watchPero antes cambia la configuración de
.browserSync() a:
PHP:
.browserSync({
proxy: 'jsdev.test',
files: [
'*.*',
'scss/*.scss',
'inc/*.php',
'js/*.*',
'layouts/*.css',
'template-parts/*.*'
]
});Y para concluir, si vas a usar VueJS o React, basta con incluir esta linea al principio del archivo:
PHP:
.js('resources/assets/js/app.js', 'public/js')Justo despues de mix. en webpack.mix.js
Espero les haya sido de utilidad el tutorial, y cualquier duda escriban una respuesta aquí. Lo más seguro esque a muchos les de error ciertas cosas por problemas de versiones. Trataré de ayudarles a solucionarlas a cada uno en caso de que no les funcione.
Saludos.
