Diferencias

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

--- clase:daw:daw:1eval:tema03 [2023/10/08 00:15]
admin [Estructura de carpetas]
+++ clase:daw:daw:1eval:tema03 [2023/10/23 21:24] (actual)
admin [Scripts npm]
@@ Línea 50: / Línea 50: @@
 Hay que fijarse que en git no se debe guardar únicamente la carpeta "src" del código fuente sino que debe guardarse la carpeta "mi-proyecto" completa. Aunque se puede hacer alguna excepción con "dist" o "node-modules". El motivo de guardar la carpeta "mi-proyecto" es debido a que realmente todas esas carpetas son las que forman el proyecto, y no únicamente la carpeta "src".
-===== Carpeta dist =====
+===== Carpeta target =====
-La carpeta ''dist'' es la mas importante para el módulo de despliegue ya que en ella estará el proyecto tal y como se va a desplegar.
+La carpeta ''target'' es la mas importante para el módulo de despliegue ya que en ella estará el proyecto tal y como se va a desplegar.
-Podemos pensar que debe ser únicamente una copia de la carpeta "src" ya que el código JavaScript o el código PHP no se compilan pero si que se pueden hacer muchos cambios en esta carpeta. Veamos algunos ejemplos:
+<note important>
+En otros IDE's como NetBeans , esta carpeta puede llamarse ''dist''
+</note>
+Podemos pensar que debe ser únicamente una copia de la carpeta "src" ya que el código JavaScript pero si que se pueden hacer muchos cambios en esta carpeta. Veamos algunos ejemplos:
+  * Compilar el código fuente Java a el compilado en los ficheros ''.class''
   * Minimizar el código: Hacer que ocupe menos el código JavaScript  o CSS. Se hace para que las páginas web se carguen antes. Y suele consistir en quitar los comentarios, los retornos de carro, etc.
   * 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.
-Por ello , por ejemplo, en la carpeta "src" estaría el código en TypeScript y en la carpeta "dist" estaría en JavaScript correspondiente al TypeScript.
+Por ello , por ejemplo, en la carpeta "src" estaría el código en TypeScript y en la carpeta "target" estaría en JavaScript correspondiente al TypeScript.
 ===== 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 "src" en "target"
+    * Compilar el código Java
+    * Transpilar el código SASS en CSS dentro de la carpeta "target"
+    * Transpilar el código TypeScript en JavaScript dentro de la carpeta "target"
-  * Copiar el código de "src" en "dist"
+    * Borrar el código SASS de la carpeta "target"
+    * Borrar el código TypeScript de la carpeta "target"
-  * Transformar el código SASS en CSS dentro de la carpeta "dist"
+    * Generar el ''.jar''
-  * Transpilar el código TypeScript en JavaScript dentro de la carpeta "dist"
-  * Borrar el código SASS de la carpeta "dist"
+  * Desplegar
-  * Borrar el código TypeScript de la carpeta "dist"
+    * Copiar el ''.jar'' de la carpeta "target" al servidor donde se va a ejecutar o copiar el ''.war'' en el Tomcat
-  * Copiar el código de la carpeta "dist" a "htdocs"
+  * Ejecutar
-  * Ejecutar el "httpd.exe"
+    * 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 81: / 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 96: / Línea 109: @@
   * Transpilar TypeScript en JavaScript
-  tsc --outDir ./dist/js ./src/ts/*.ts
+  tsc --outDir ./js ./ts/*.ts
@@ Línea 114: / 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 130: / 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 143: / 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 165: / 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 172: / 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 181: / 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 191: / 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