Close
Blog

Automatizar minificado de Javascript en Dynamics 365 Customer Engagement.

Antes de comenzar quisiera dejar unas premisas o conceptos que me han motivado a escribir este artículo:

  • Prohibido depurar código en entornos productivos: luego de años realizando exactamente lo contrario a esta premisa, me auto-obligué a dejar de hacerlo, estaremos todos de acuerdo que no se debe depurar código en entornos productivos. Pues mediante este mecanismo automatizado, me forcé a dejar de hacerlo.
 
  • Compresión de código no es igual a mejorar el rendimiento: no necesariamente se notara una mejoría de rendimiento. Pero sí que hay una diferencia en la carga inicial del código, cuanto menos pese nuestro fichero de código, entonces el navegador lo podrá cargar más rápido.
 

Utilizaremos los siguientes componentes:

Azure DevOps:

  • Repositorio: donde tendremos nuestro código fuente y nuestro fichero de configuración.
  • Build Pipeline: necesitaremos crear nuestro pipeline de compilación de código para la construcción del objeto que publicaremos.
  • Release Pipeline: donde realizaremos la publicación del objeto compilado previamente.

Dynamics 365 Customer Engament:

  • Web Resource: donde publicaremos nuestro código javascript comprimido.

A continuación describiré los pasos a seguir:

 

Paso 1: Creación de WebResource en Dynamics 365 Customer Engagement

Vamos a crear un WebResource en D365CE. Para ello iremos a Configuración -> Soluciones

Luego de abrir la solución en la que trabajaremos iremos al apartado Recursos Web(Web resources) para crear nuestro recurso.

 

Paso 2: Creación de Package.json

En este paso crearemos un fichero de tipo JSON en el repositorio de código fuente, que lo utilizaremos para trasladar la configuración necesaria para nuestra actualización de WebResource.

Yo lo he llamado de la siguiente forma: "javascriptDeploys.json"

Debe tener la siguiente estructura: 

{
    'webresources': [
    {
        'root': '',
        'files': [
        {
            'uniquename': 'fbg_appointmentForm.js',
            'file': 'appointmentForm.js',
            'description': ''
        }
        ]
    }
    ]
}

En el campo uniquename se colocará el nombre único del recurso web creado anteriormente, en nuestro ejemplo “fbg_appointmentForm.js”. En el campo file colocaremos el nombre para mostrar del recurso web, en nuestro ejemplo “appointmentForm.js”.

Si tuviésemos mas JavaScripts por comprimir, se deben agregar mas objetos al array de files.

 

Paso 3: Creación de Build Pipeline

Para comprimir nuestro fichero JavaScript necesitaremos agregar a nuestra compilación las siguientes tareas:

  • NPM: necesitaremos instalar NPM para la compilación y compresión del código.

  • Node.js: Necesitaremos instalar node.js para que funcione nuestra siguiente tarea.

  • Script: ejecución de script NPM. En este caso ejecutaremos 2 scripts:
    • npm install -g uglify-js (Uglify JS)
    • uglifyjs $(System.DefaultWorkingDirectory)\[RUTA HASTA EL FICHERO]\[NOMBRE DEL FICHERO ORIGEN].js -o $(build.artifactstagingdirectory)\[NOMBRE DEL FICHERO ORIGEN].js -c
 
  • Copy Files: Necesitaremos copiar el fichero JSON con la configuración al Artefacto que utilizaremos luego en el Release.

  • Publish Build Artifacts: Publicación de todo lo construido a nuestro artefacto.

Os dejo todo el código YAML por si deseáis trabajar directamente con el:

trigger:
- master

variables:
- group: CRM UAT Environment Group

steps:
- task: Npm@1
  inputs:
    command: 'install'
- task: UseNode@1
  inputs:
    checkLatest: true

- script: npm install -g uglify-js
  displayName: 'Install Uglify'
- script: uglifyjs $(System.DefaultWorkingDirectory)\WebResourcesSolution\JavaScripts\appointmentForm.js -o $(build.artifactstagingdirectory)\appointmentForm.js -c
  displayName: 'Uglify appointmentForm.js'
- script: uglifyjs $(System.DefaultWorkingDirectory)\WebResourcesSolution\JavaScripts\integrationForm.js -o $(build.artifactstagingdirectory)\integrationForm.js -c
  displayName: 'Uglify integrationForm.js'
- script: uglifyjs $(System.DefaultWorkingDirectory)\WebResourcesSolution\JavaScripts\tokenForm.js -o $(build.artifactstagingdirectory)\tokenForm.js -c
  displayName: 'Uglify tokenForm.js'

- task: CopyFiles@2
  inputs:
    SourceFolder: '$(System.DefaultWorkingDirectory)/WebResourcesSolution/JavaScripts'
    Contents: '**.json'
    TargetFolder: '$(build.artifactstagingdirectory)'

- task: PublishBuildArtifacts@1
  inputs:
    PathtoPublish: '$(Build.ArtifactStagingDirectory)'
    ArtifactName: 'drop'
    publishLocation: 'Container'
 

 

Paso 4: Creación de Release Pipeline

Nuestro primer paso será indicar de que Build Pipeline cogeremos nuestro artefacto para luego hacer el deploy.

Lo siguiente será añadir nuestro fase (stage), que será donde realizaremos la publicación del código javascript comprimido a nuestro web resource.

Añadiremos dos tareas a nuestro Agente de trabajo

Primero la tarea MSCRM Tool Installer. (Es necesario instalar esta herramienta desde el marketplace de DevOps)

Segundo la tarea MSCRM Update Web resources (Es necesario instalar esta herramienta desde el marketplace de DevOps)

Con las siguientes configuraciones:

CRM Connection String: aquí colocaremos el connection string de nuestro entorno.

En Deployment Type seleccionaremos “Use JSON mapping for Web Resource folder”

En el apartado “Web Resource Folder Path” seleccionaremos la carpeta drop de nuestro artefacto.

Y por ultimo en el apartado “Web Resource JSON mapping” tendremos que indicarle la ruta hasta el Json de configuración.

Ejecutaremos nuestro Build Pipeline. Si nuestro Build se ejecuto correctamente, saltara automáticamente el Release Pipeline.

Si todo fue correctamente entonces iremos a comprobar en el recurso web el código minificado. Este seria un ejemplo de código minificado y publicado: 

¡¡Qué os divirtáis!

ABOUT THE AUTHOR

Fernando Bo
Follow @AXAZURE on Twitter