Diferencias

Muestra las diferencias entre dos versiones de la página.

--- clase:daw:daw:1eval:tema03 [2023/10/23 08:26]
admin [Carpeta dist]
+++ clase:daw:daw:1eval:tema03 [2023/10/23 21:24] (actual)
admin [Scripts npm]
@@ Línea 69: / Línea 69: @@
 ===== 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.
-  * Copiar el código de "src" en "dist"
+  * Build (en maven se llama package)
+    * Copiar el código de "src" en "target"
-  * Transformar el código SASS en CSS dentro de la carpeta "dist"
+    * Compilar el código Java
-  * Transpilar el código TypeScript en JavaScript dentro de la carpeta "dist"
+    * Transpilar el código SASS en CSS dentro de la carpeta "target"
+    * Transpilar el código TypeScript en JavaScript dentro de la carpeta "target"
-  * Borrar el código SASS de la carpeta "dist"
+    * Borrar el código SASS de la carpeta "target"
-  * Borrar el código TypeScript de la carpeta "dist"
+    * Borrar el código TypeScript de la carpeta "target"
-  * Copiar el código de la carpeta "dist" a "htdocs"
+    * Generar el ''.jar''
-  * Ejecutar el "httpd.exe"
+  * Desplegar
+    * Copiar el ''.jar'' de la carpeta "target" al servidor donde se va a ejecutar o copiar el ''.war'' en el Tomcat
+  * Ejecutar
+    * Ejecutar el ''.jar''
 Para hacer todas esta tareas vamos a usar Scripts del sistema operativo , por ejemplo en Linux se usará "Bash" y los Script de npm que vamos a ver mas adelante.
@@ Línea 87: / Línea 94: @@
   * Instalar SASS
-  npm install node-sass -g
+  npm install sass -g
   * Transpilar SASS en CSS
-  sass  -o ./dist/css ./src/scss
+  sass  ./scss/main.scss ./css/main.css
@@ Línea 102: / Línea 109: @@
   * Transpilar TypeScript en JavaScript
-  tsc --outDir ./dist/js ./src/ts/*.ts
+  tsc --outDir ./js ./ts/*.ts
@@ Línea 120: / Línea 127: @@
 <sxh xml>
 "scripts": {
-  "compile-scss": "node-sass  -o ./dist/css ./src/scss"
+  "compile-scss": "sass  ./scss/main.scss ./css/main.css"
 }
 </sxh>
   * Ejecutar un Script de node.
   npm run compile-scss
@@ Línea 136: / Línea 144: @@
 <sxh js>
   "scripts": {
-    "build": ".\\scripts\\build.sh",
+    "build": ".\\scripts\\build.sh"
-    "deploy": "npm run build && .\\scripts\\deploy.sh",
-    "start": ".\\scripts\\start.sh",
   }
 </sxh>
@@ Línea 149: / Línea 155: @@
-  * deploy: Compila y despliega el código. Deja el contenido de ''dist'' en el servidor Apache en una carpeta de ''htdocs''
-  npm run deploy
-  * start: Inicia el servidor apache , Compila y despliega el código con cada cambio. En el siguiente apartado se explica como ejecutar un Script cuando hay un cambio en un fichero.
-  npm run start
 ==== Ejecutar un Script cuando algo cambia ====
@@ Línea 171: / Línea 168: @@
   onchange '**/*.js' -- echo Ha cambiado un fichero JavaScript
+===== Maven =====
+Ahora deberemos llamar a nuestro script de ''npm run build'' desde maven. Usaremos el plugin de ''''
+Para ello añadiremos el siguiente XML al ''pom.xml''
+<sxh xml>
+<plugin>
+   <groupId>org.codehaus.mojo</groupId>
+   <artifactId>exec-maven-plugin</artifactId>
+   <version>3.0.0</version>
+   <executions>
+      <execution>
+         <id>build-cliente</id>
+         <phase>process-resources</phase>
+         <goals>
+            <goal>exec</goal>
+         </goals>
+         <configuration>
+            <executable>npm</executable>
+            <!-- Comando npm -->
+            <workingDirectory>${project.basedir}</workingDirectory>
+            <arguments>
+               <argument>run</argument>
+               <argument>build</argument>
+            </arguments>
+         </configuration>
+      </execution>
+   </executions>
+</plugin>
+</sxh>
@@ Línea 178: / Línea 208: @@
 Crea un Script en bash llamado "prueba.sh" que saque por pantalla el texto de "Hola mundo"
 Haz que ejecutando:
+<sxh >
   npm run hola
+</sxh>
 Se ejecute el Script que acabas de crear.
@@ Línea 187: / Línea 219: @@
 Crea un Script en bash llamado "init.sh" que cree las carpetas que debe tener como mínimo un proyecto
 Haz que ejecutando:
+<sxh >
   npm run init
+</sxh>
 Se ejecute el Script que acabas de crear.
@@ Línea 197: / Línea 231: @@
 ==== Ejercicio 3 ====
-Crea un Script en bash llamado "build.sh" que  copie todo el contenido de la carpeta "src" en "dist" y transforme el SASS en CSS. De forma que ejecutando
+Crea un Script en bash llamado "build.sh" que  copie todo el contenido de la carpeta "src" en "target" y transforme el SASS en CSS. De forma que ejecutando
-  npm run build
+<sxh >
+  npm run build
+</sxh>
 Se ejecute el Script "build.sh"
-Crea un Script en bash llamado "deploy.sh" que  despliegue todo el contenido de la carpeta "dist" en Apache .De forma que ejecutando
+Crea un Script en bash llamado "deploy.sh" que  despliegue todo el contenido de la carpeta "target" en Tomcat .De forma que ejecutando
+<sxh>
   npm run deploy
+</sxh>
 Se ejecute el Script "build.sh" y "deploy.sh"
 ==== Ejercicio 4 ====
-Modifica el proyecto anterior , añadiendo un Script en bash llamado "start.sh" que arranque apache y que cuando haya un cambio en la carpeta "src" se redespliegue la aplicación en el servidor web .De forma que ejecutando
+Modifica el proyecto anterior , añadiendo un Script en bash llamado "start.sh" que arranque tomcat y que cuando haya un cambio en la carpeta "src" se redespliegue la aplicación en el servidor web .De forma que ejecutando
-  npm run start
+<sxh >
+  npm run start
+</sxh>
 Se ejecute el Script "start.sh"

logongas

Herramientas de usuario

Herramientas del sitio

Diferencias

Herramientas de la página