tailwind template
v1.11.9
En primer lugar, asegúrese de ejecutar pnpm install en el terminal en el directorio raíz de este proyecto. Esto instalará todas las dependencias requeridas y generará su carpeta Node_Modules . Este paso es muy importante.
Este proyecto utiliza Tailwind CSS, un marco CSS de utilidad. Las dependencias requeridas ya deben incluirse en este proyecto. Si le falta la carpeta Node_Modules , simplemente ejecute pnpm install y debe generar con las dependencias especificadas en el archivo Package.json .
Para habilitar Tailwind CSS IntelliSense, necesitará la extensión VS Código. Sugiero instalar el paquete de extensión CSS CSS que viene con algunas extensiones que funcionan juntas para que el uso de CSS de Vailín Para obtener más información al respecto, haga clic en el enlace de arriba.
En la carpeta raíz del proyecto, hay una carpeta de activos/estilos . Esto alberga el archivo tailwind.css . Este archivo se utiliza para generar eventualmente los estilos CSS de viento de cola totalmente compilados. Una vez compilado, genera las clases al archivo styles.css , también ubicado en la carpeta de activos/estilos .
Para trabajar en un entorno de desarrollo, ejecute el script dev NPM. Para hacerlo, use cualquiera de los métodos descritos a continuación.
pnpm run dev en la carpeta raíz del proyecto.Esto comenzará un proceso de reloj de larga duración que generará sus estilos a pedido en lugar de generar todo con anticipación. Esto es extremadamente útil para hacer que el desarrollo sea más rápido y eficiente. En el terminal, debe ver el mensaje de compilación inicial y la cantidad de tiempo que tomó. Cada vez que guarde un archivo HTML, el archivo tailwind.css o el archivo tailwind.config.js , el CSS se procesará y volverá a compilarse. Estos estilos no se minificarán en el proceso de desarrollo.
Tenga en cuenta que las clases se agregan a pedido, pero no se eliminan a pedido. Esto es actualmente por diseño según lo declarado por Adam Wathan, el creador de Tailwind CSS. Para trabajar alrededor de esto (caché BUSHT it), simplemente guarde el archivo tailwind.css . Forzará una compilar completa y eliminar cualquier clases no utilizadas.
Para matar el proceso de reloj, ponga su enfoque en el terminal de que el proceso lo está ejecutando y presione CTRL + C Se le debe solicitar que confirme su terminación del proceso. Confirme su elección ingresando Y seguido de la tecla ENTER .
Utilizaremos una extensión de código VS para iniciar nuestro servidor. Busque "servidor en vivo" en la pestaña VS Extensions de código. Alternativamente, puede encontrarlo en el mercado de Visual Studio.
Una vez que descargue e instale la extensión, puede ver un nuevo botón en la esquina inferior derecha de la ventana en la cinta azul. Dice que vaya en vivo . Cuando haga clic en eso, debe iniciar el servidor y abrirlo en su navegador.
Si no ve el botón, simplemente haga clic derecho en el archivo index.html en el explorador de archivos de código VS, y haga clic en Abrir con el servidor en vivo .
La construcción de producción es similar a la construcción para el desarrollo. Haga cualquiera de los siguientes para construir el CSS para la producción.
pnpm run prod en la carpeta raíz del proyecto.prod en el atajo de scripts NPM ubicado en la parte inferior izquierda de la pestaña Explorador de archivos en el código VS.Al contrario del script de desarrollo que utilizamos antes, esto no comenzará un proceso de reloj de larga duración; Más bien, este script compila el CSS una vez y solo una vez. Solo tomará clases que se encuentran en los archivos HTML ubicados en la carpeta raíz y las compilarán en el archivo styles.css ubicado en activos/styles/styles.css . Estos estilos serán minificados.
Este proyecto utiliza GULP para construir el proyecto para su implementación. Al ejecutar Gulp, creará una carpeta DIST en la raíz de su proyecto. Gulp luego copiará todos los archivos necesarios de la fuente y los activos de su proyecto en la carpeta DIST .
Además de eso, Gulp también optimizará y minificará los archivos según sea necesario. Los archivos HTML, SVG y JavaScript se minificarán. Minificar un archivo simplemente significa eliminar el espacio en blanco y otros caracteres/símbolos innecesarios. Hacemos esto para reducir el tamaño de los archivos.
Los estilos (CSS) también se copiarán al Dist. Dado que el CSS ya está minificado por el uso de PostCSS y el motor JIT de CLI y el motor JIT, no necesitamos minificarlo aquí. Es importante ejecutar pnpm run prod antes de ejecutar gulp . Al no hacer esto, Gulp usará la versión no minificada de su CSS.
Las imágenes también se copiarán también y se optimizarán usando Gulp-Image, un optimizador de imágenes. Esto solo optimizará las imágenes PNG, JPG y GIF. Casi cualquier otro tipo de imagen se copiará, pero no se optimizará, incluidos los archivos PDF.
Entonces, ¿cómo se usa Gulp? ¡Es muy fácil! Aquí hay tres opciones. 1) Abra el terminal de código VS y ejecute el comando gulp . Esto ejecutará la tarea predeterminada que se encuentra en el archivo gulpFile.js en el directorio raíz. La tarea predeterminada se ejecuta, en orden, todas las demás tareas para construir el proyecto. 2) Alternativamente, he creado un script NPM llamado gulp . Puede ejecutar esto desde la esquina inferior izquierda de la ventana VS Código en la pestaña NPM Scripts. 3) Si no ve la pestaña Scripts NPM, también puede ejecutar este comando en el terminal ejecutando pnpm run gulp , pero en ese punto, solo escribir gulp es más fácil.
En el caso de que necesite cambiar el nombre de la carpeta de salida de DIST a otra cosa, simplemente navegue al archivo gulpFile.js y busque el destination variable ubicado cerca de la parte superior del archivo. Por defecto, está configurado en dist , pero puede cambiar esto reemplazando la parte dist de la cadena a lo que desee. Otro nombre de carpeta de destino común es docs , que se utiliza para implementar un proyecto en las páginas de GitHub.
