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

Donantes 26 Donantes
Fundadores 1 Fundadores
Cloud 2 Cloud
Cluster 7 Cluster
WiFi 5 WiFi
Network 10 Network
Server 18 Server
HardDisk 8 HardDisk
USBDisk 4 USBDisk
SDCard 21 SDCard
CD/DVD 8 CD/DVD
Diskette 28 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.