Muestra las diferencias entre dos versiones de la página.
Ambos lados, revisión anterior Revisión previa Próxima revisión | Revisión previa Última revisión Ambos lados, revisión siguiente | ||
clase:daw:daw:1eval:tema03 [2023/10/08 00:15] admin [Estructura de carpetas] |
clase:daw:daw:1eval:tema03 [2023/10/23 21:03] admin [Scripts npm] |
||
---|---|---|---|
Línea 43: | Línea 43: | ||
build.sh | build.sh | ||
/ | / | ||
- | /tarjet | + | /target |
AppPeliculas-0.0.1-SNAPSHOT.jar | AppPeliculas-0.0.1-SNAPSHOT.jar | ||
package.json | package.json | ||
Línea 50: | Línea 50: | ||
Hay que fijarse que en git no se debe guardar únicamente la carpeta " | Hay que fijarse que en git no se debe guardar únicamente la carpeta " | ||
- | ===== Carpeta | + | ===== Carpeta |
- | La carpeta '' | + | La carpeta '' |
- | Podemos pensar que debe ser únicamente una copia de la carpeta " | + | |
+ | <note important> | ||
+ | En otros IDE's como NetBeans , esta carpeta puede llamarse '' | ||
+ | </ | ||
+ | |||
+ | Podemos pensar que debe ser únicamente una copia de la carpeta " | ||
+ | * Compilar el código fuente Java a el compilado en los ficheros '' | ||
* Minimizar el código: Hacer que ocupe menos el código JavaScript | * Minimizar el código: Hacer que ocupe menos el código JavaScript | ||
* Ofuscar el código: Para evitar que alguien pueda copiar nuestro código se suele, por ejemplo , cambiar el nombre de las variables por nombres sin sentido. Normalmente se minimiza y se ofusca a la vez. | * Ofuscar el código: Para evitar que alguien pueda copiar nuestro código se suele, por ejemplo , cambiar el nombre de las variables por nombres sin sentido. Normalmente se minimiza y se ofusca a la vez. | ||
Línea 60: | Línea 66: | ||
* Etc. | * Etc. | ||
- | Por ello , por ejemplo, en la carpeta " | + | Por ello , por ejemplo, en la carpeta " |
===== Tareas de Automatización del despliegue ===== | ===== Tareas de Automatización del despliegue ===== | ||
- | Veamos ahora un ejemplo de como desplegar una aplicación web en PHP con SASS , TypeScript y que se despliega en Apache. | + | Veamos ahora un ejemplo de como desplegar una aplicación web en Java con SASS , TypeScript y que se despliega en Apache. |
+ | |||
+ | * Build (en maven se llama package) | ||
+ | * Copiar el código de " | ||
+ | |||
+ | * Compilar el código Java | ||
+ | * Transpilar el código SASS en CSS dentro de la carpeta " | ||
+ | * Transpilar el código TypeScript en JavaScript dentro de la carpeta " | ||
- | | + | |
+ | * Borrar el código TypeScript de la carpeta | ||
- | | + | |
- | * Transpilar el código TypeScript en JavaScript dentro de la carpeta " | + | |
- | * Borrar el código SASS de la carpeta " | + | * Desplegar |
- | * Borrar | + | * Copiar |
- | * Copiar el código de la carpeta " | + | * Ejecutar |
- | * Ejecutar el "httpd.exe" | + | * Ejecutar el '' |
Para hacer todas esta tareas vamos a usar Scripts del sistema operativo , por ejemplo en Linux se usará " | Para hacer todas esta tareas vamos a usar Scripts del sistema operativo , por ejemplo en Linux se usará " | ||
Línea 81: | Línea 94: | ||
* Instalar SASS | * Instalar SASS | ||
- | npm install | + | npm install sass -g |
* Transpilar SASS en CSS | * Transpilar SASS en CSS | ||
- | sass | + | sass ./scss/main.scss |
Línea 96: | Línea 109: | ||
* Transpilar TypeScript en JavaScript | * Transpilar TypeScript en JavaScript | ||
- | tsc --outDir ./dist/js ./src/ts/*.ts | + | tsc --outDir ./js ./ts/*.ts |
Línea 114: | Línea 127: | ||
<sxh xml> | <sxh xml> | ||
" | " | ||
- | " | + | " |
} | } | ||
</ | </ | ||
* Ejecutar un Script de node. | * Ejecutar un Script de node. | ||
+ | |||
npm run compile-scss | npm run compile-scss | ||
Línea 165: | Línea 179: | ||
onchange ' | onchange ' | ||
+ | |||
+ | |||
+ | ===== Maven ===== | ||
+ | Ahora deberemos llamar a nuestro script de '' | ||
+ | |||
+ | Para ello añadiremos el siguiente XML al '' | ||
+ | |||
+ | <sxh xml> | ||
+ | < | ||
+ | < | ||
+ | < | ||
+ | < | ||
+ | < | ||
+ | < | ||
+ | < | ||
+ | < | ||
+ | < | ||
+ | < | ||
+ | </ | ||
+ | < | ||
+ | < | ||
+ | <!-- Comando npm --> | ||
+ | < | ||
+ | < | ||
+ | < | ||
+ | < | ||
+ | </ | ||
+ | </ | ||
+ | </ | ||
+ | </ | ||
+ | </ | ||
+ | </ | ||
+ | |||
Línea 172: | Línea 219: | ||
Crea un Script en bash llamado " | Crea un Script en bash llamado " | ||
Haz que ejecutando: | Haz que ejecutando: | ||
+ | <sxh > | ||
npm run hola | npm run hola | ||
+ | </ | ||
Se ejecute el Script que acabas de crear. | Se ejecute el Script que acabas de crear. | ||
Línea 181: | Línea 230: | ||
Crea un Script en bash llamado " | Crea un Script en bash llamado " | ||
Haz que ejecutando: | Haz que ejecutando: | ||
+ | <sxh > | ||
npm run init | npm run init | ||
+ | </ | ||
Se ejecute el Script que acabas de crear. | Se ejecute el Script que acabas de crear. | ||
Línea 191: | Línea 242: | ||
==== Ejercicio 3 ==== | ==== Ejercicio 3 ==== | ||
- | Crea un Script en bash llamado " | + | Crea un Script en bash llamado " |
- | npm run build | + | <sxh > |
+ | npm run build | ||
+ | </ | ||
Se ejecute el Script " | Se ejecute el Script " | ||
- | Crea un Script en bash llamado " | + | Crea un Script en bash llamado " |
+ | |||
+ | |||
+ | <sxh> | ||
npm run deploy | npm run deploy | ||
+ | </ | ||
+ | |||
Se ejecute el Script " | Se ejecute el Script " | ||
==== Ejercicio 4 ==== | ==== Ejercicio 4 ==== | ||
- | Modifica el proyecto anterior , añadiendo un Script en bash llamado " | + | Modifica el proyecto anterior , añadiendo un Script en bash llamado " |
- | npm run start | + | <sxh > |
+ | npm run start | ||
+ | </ | ||
Se ejecute el Script " | Se ejecute el Script " | ||