Arquitectura, buenas prácticas y desarrollo sobre la nueva herramienta de Microsoft SharePoint 2016

Integrando Grunt y Bower en Visual Studio 2013

grunt-y-bowerCon el auge de un servidor como NodeJS se ha propiciado la aparición de diversas herramientas que son de obligado uso para los especialistas en el Front-End. Estas herramientas que están en boca de casi todo el mundo son Bower, Grunt o Gulp. La salida de Visual Studio 2015 propicia un cambio en el marco para los desarrolladores de .NET. ¿El motivo? Nuestro IDE favorito, Visual Studio en la versión 2015, ya soporta de forma nativa estas herramientas (Bower,Grunt o Gulp) y como una extensión más el uso de estas herramientas de FrontEnd. Esto hace que una de las extensiones más utilizadas de Visual Studio en la nueva versión carezca de sentido.
Para los desarrolladores de SharePoint la nueva versión de Visual Studio no tiene mejoras sustanciales (salvo el uso de estas herramientas de FrontEnd) y en los que no tiene versión de extensiones indispensables como son las CKS Dev. Visual Studio 2013 es la opción más estable y más adecuada para los desarrollos OnPremise (mientras no salga la nueva versión de SharePoint 2016 y el SDK esté integrado con el IDE). En este artículo, vamos a ver como poder utilizar estas herramientas en Visual Studio 2013.

¿Qué es Bower y qué es Grunt?

Antes de empezar a ver cómo utilizar estas herramientas, es casi obligatorio una pequeña introducción a ellas.

Bower

Podemos decir que es un gestor de paquetes de las librerías JavaScript, algo similar a Nuget, pero con la ventaja de que se puede utilizar en todas las plataformas.  A día de hoy, no hace nada que no haga Nuget, pero en un entorno en el que cada vez se quieren unir a más desarrolladores, Microsoft ha optado por adoptar las herramientas más utilizadas por los FrontEnd.

Grunt

Es un corredor o ejecutor de tareas Open Source para Javascript. En Grunt podemos ejecutar casi cualquier tarea que puedas definir de manera programada, incluso gran parte de las tareas comunes conforman ahora la comunidad de plugins de grunt, entre ellos podrás encontrar minificadores y compresores de código, convertidores de un lenguaje a otro (como SASS a CSS), ejecución de pruebas, validadores, rutinas de conexión a servidores, instalación de dependencias especiales, y mucho más. Es una herramienta muy utilizada en el desarrollo de aplicaciones web, ya que existen muchas tareas predefinidas y repetitivas que un desarrollador debe llevar a cabo para lograr optimizar el software y convertirlo en una pieza de calidad que siga los estándares de la web con el menor esfuerzo posible.

Requisitos Previos

Para poder utilizar Grunt o Bower dentro de Visual Studio, en primer lugar tenemos que tener instalado GitEs necesario Git porque para Bower tiene una dependencia y sino no se puede utilizar. Una vez instalado hay que asegurarse que la ruta de Git está dentro del Path de Windows.

En segundo lugar, instalaremos NodeJS. Para quien no conozca nada sobe NodeJS  una definición breve es la que nos ofrece la Wikipedia:

Es un entorno en tiempo de ejecución multiplataforma, de código abierto, para la capa del servidor (pero no limitándose a ello) basado en el lenguaje de programación EcmaScript

Una vez instalado NodeJS, abrimos la consola de NodeJS e instalaremos Bower y Grunt para ello pondremos las siguientes instrucciones:

npm install -g grunt-cli
npm install -g bower

NPM es el gestor de instalar paquetes dentro de NodeJS y lo que hacemos con estas instrucciones es instalarnos estos paquetes dentro de NodeJS y poder y utilizarlo. Por un lado el parametro -g indica que la instalación sea de forma global.

Instalaremos las siguientes extensiones de Visual Studio:

Para poder utilizar Bower

Creamos un fichero bower.json dentro de la raiz de la solución, como por ejemplo este:

{
  "name": "Intranet Encamina",
  "private": true,
  "dependencies": {
    "bootstrap": "3.0.0",
    "bootstrap-touch-carousel": "0.8.0",
    "hammer.js": "2.0.4",
    "jquery": "2.1.4",
    "jquery-validation": "1.11.1",
    "jquery-validation-unobtrusive": "3.2.2"
  }
}

Lo que indica este fichero Json es similar a los packages de Nuget. Se indica el nombre de paquete que se va a utilizar y la versión de la misma. Ahora bien para poder ejecutarlo desde dentro de Visual Studio será necesario pulsar botón derecho sobre este fichero y visualizaremos una imagen como la siguiente:

Cómo utilizar Grunt

Para que funcione Grunt es necesario dos archivos: package.json y  gruntfile.js. El archivo package.json tiene los paquete npm necesarios para poder utilizar grunt, y dentro del fichero GruntFile.js indicaremos todas las tareas que vamos a utilizar dentro de nuestro proyecto, como por ejemplo que se compruebe que la sintaxis JavaScript sea correcta, minificar los css, js, etc. Cabe mencionar que Grunt solamente es un paquete dentro de Node y que se complementa con otros paquetes como Grunt-Watch, etc..

Para partir de unos ficheros mínimos podemos optar por utilizar los existentes en el siguiente proyecto de Git. Para ello, podemos utilizar esta instrucción:

git clone --progress -v "https://github.com/gruntjs/grunt-init-gruntfile.git" "%USERPROFILE%.grunt-initgrunt-init-gruntfile"

A continuación dentro de la carpeta donde tenemos el proyecto ejecutamos la siguiente instrucción:

grunt-init grunt-init-gruntfile

Con esto ya disponemos de un fichero package.json y gruntfile dentro de nuestro proyecto. A continuación se agrega a nuestra proyecto de Visual Studio.

A continuación, de la misma forma que hemos realizado con bower, seleccionamos el fichero package.json pulsamos botón derecho y tendremos una opción para poder instalar los paquetes NPM necesarios dentro de nuestra aplicación.

Ahora queda la forma en la que tenemos que configurar los procesos que necesitamos. En este caso, vamos a validar que la sintaxis cumpla con sus necesidades:

module.exports = function(grunt) {

  grunt.initConfig({
    jshint: {
      files: ['Gruntfile.js', 'src/**/*.js', 'test/**/*.js'],
      options: {
        globals: {
          jQuery: true
        }
      }
    },
    watch: {
      files: ['<%= jshint.files %>'],
      tasks: ['jshint']
    }
  });

  grunt.loadNpmTasks('grunt-contrib-jshint');
  grunt.loadNpmTasks('grunt-contrib-watch');

  grunt.registerTask('default', ['jshint']);

};

¿Cómo Funciona?

En un lado indicamos los parámetros de configuración. Para ello, hay indicarlos dentro del método initConfig. A continuación indicamos la carga de los paquetes NPM que vamos a utilizar, y finalmente registraremos las tareas que vamos a utilizar. Una vez tengamso definidas las tareas, haremos uso del plugin instalado Task Runner en el que visualizaremos todas estas tareas e indicaremos cuando hacerlas. Por ejemplo, siempre que realice una compilación quiero validar el JavaScript y, en caso de fallo, que no compile de una forma similar a lo que se hace en otros lenguajes de Programación como C#.

Conclusión

Está claro que muchas veces es necesario utilizar las últimas herramientas (algo que hace muy apasionante nuestro día a día). Sin embargo, en muchas ocasiones no se pueden utilizar por diversos inconvenientes.

Una de las ventajas que nos proporciona Visual Studio es su posibilidad de extenderse. Como has podido observar en este ejemplo, utilizar alguna de las principales novedades en Visual Studio 2015 se puede realizar gracias a la Comunidad .NET en versiones anteriores. Esto propicia que no tengamos excusa para utilizar las mejores herramientas posibles dentro de nuestra día a día. Pongámoslo en práctica 😉

mm

Sobre Adrián Díaz

Adrián Díaz es Ingeniero Informático por la Universidad Politécnica de Valencia. Es MVP de Microsoft en la categoría Office Development desde 2014, MCPD de SharePoint 2010, Microsoft Active Profesional y Microsoft Comunity Contribuitor 2012. Cofundador del grupo de usuarios de SharePoint de Levante LevaPoint. Lleva desarrollando con tecnologías Microsoft más de 10 años y desde hace 3 años está centrado en el desarrollo sobre SharePoint. Actualmente es Software & Cloud Architect Lead en ENCAMINA.
Esta entrada ha sido publicada en buenas practicas, desarrollo, entorno, javascript y etiquetada como , , . Enlace permanente .

Suscríbete a Desarrollando sobre SharePoint

Recibe todas las actualizaciones semanalmente de nuestro blog

You have Successfully Subscribed!

ENCAMINA, piensa en colores