¡Ya somos 20694 en Twitch, de los cuales 140 son subscriptores y 26 donantes! ¡Muchas gracias por el apoyo!

Donantes 26 Donantes
Fundadores 2 Fundadores
Cloud 1 Cloud
Cluster 1 Cluster
WiFi 11 WiFi
Network 5 Network
Server 17 Server
HardDisk 14 HardDisk
USBDisk 13 USBDisk
SDCard 17 SDCard
CD/DVD 19 CD/DVD
Diskette 42 Diskette
¡Quiero apoyar!

El script mkweb

mkweb

El script mkweb sirve para generar rápidamente, sin demasiadas complicaciones, la estructura de carpetas (scaffolding) de un proyecto HTML/CSS/Javascript base, con todo preparado para programar.

Características

Requisitos

  • Linux, Mac o Windows con WSL
  • NodeJS 18.3.0 o superior (comprueba con node --version)
  • curl o wget instalado (comprueba con curl --version o wget --version)

Instalación

Para instalar el script, simplemente escribe desde una terminal:

sudo curl -s https://manz.dev/download/mkweb -o /usr/local/bin/mkweb
sudo chmod ugo+rx /usr/local/bin/mkweb

Si tienes algún problema, puedes comentarlo en nuestro Discord.

Uso

Para utilizar el script, simplemente lo ejecutamos pasándole por parámetro el nombre de la carpeta del proyecto, que deberá coincidir con el nombre del repositorio. Utiliza preferentemente minúsculas y no uses espacios o signos de acentuación.

mkweb project-name
cd project-name
git remote add origin [email protected]:GITUSER/project-name.git
npm install
code .
npm run dev
  • Para crear un proyecto de Phaser, escribe: mkweb project-name --phaser.
  • Para crear un proyecto de Lit, escribe: mkweb project-name --lit.
  • Aunque puedes usar npm, se recomienda usar pnpm, compatible y mucho más rápido.

Estructura

  • La carpeta src/ incluye el código fuente del proyecto. En su interior:
  • Un archivo HTML ( index.html ) con la página principal.
  • Un archivo CSS ( index.css ) referenciado en el HTML anterior.
  • Un archivo Javascript ( index.js ) referenciado en el HTML anterior.
  • Una carpeta components/ que puede incluir WebComponents.
  • Una carpeta assets/ que puede incluir estáticos (hasheados).
  • Fuera de la carpeta src/, tendremos:
  • Una carpeta dist/ creada tras un npm run build (lista para subir a producción).
  • Una carpeta public/ con archivos estáticos similar a assets/, pero a diferencia de esta, sus archivos son copiados a dist/ manteniendo la estructura de carpetas y nombres de ficheros sin ser hasheados.