 |
| Ionic buenas prácticas 1era parte |
Antes de empezar cualquier proyecto, simpre es importante tener en cuenta las
buenas prácticas, patrones y demás elementos que nos permitan avanzar de forma segura, ganando en
tiempo y con un resultado con la mayor
calidad posible.
Es por eso que pretendo exponer en una serie de artículos (empezando por este), algunas buenas prácticas que según mi experiencia y la de la comunidad, se deben seguir en un
entorno de desarrollo con
Ionic y después finalmente al
terminar el producto.
Al generar un proyecto con Ionic, se nos crea un estructura predefinida de carpetas y ficheros que nos permitirán organizar nuestro trabajo. Entre esos ficheros se encuentra
gulpfile.js, que no es más que el listado de tareas de
Gulp.
 |
| Gulp |
Gulp permite
automatizar tareas comunes o repetitivas de desarrollo, tales como
minificación de código JavaScript,
recarga del navegador,
validación de sintaxis de código y otras más. Se apoya en la utilización de diferentes plugins que de forma sencilla nos permiten crear diferentes tareas. En el archivo gulpfile.js se encuentran un conjuto de tareas que por defecto se generan cuando creamos nuestro proyecto con Ionic. A continuación vamos a ver que otras
tareas podemos añadirle que nos ayuden en el desarrollo y cómo trabajar con ellas.
Primero que todo, sino lo hemos hecho ya, debemos situados en la carpeta del proyecto escribir en la terminal el comando
npm install, para instalar todas las dependencias de nuestro proyecto ubicadas en el archivo
package.json y seguidamente verificar que tenemos
instalado Gulp correctamente. Para eso escribimos en la terminal:
 |
| gulp --version |
Si tenemos instalado correctamente Gulp nos debe salir la versión de este. Ahora a continuación vamos a ver algunas tareas que debemos crear mediante la utilizacion de diferentes
plugins que iremos viendo.
Para instalar los plugins ponemos en la terminal, estando siempre situados en la ruta de nuestro proyecto Ionic en la
terminal:
npm install --save-dev gulp-load-plugins gulp-jshint jshint-stylish gulp-fixmyjs gulp-todo
 |
| Plugins para Gulp |
Esto nos instalara dichos plugins en la carpeta de nuestro proyecto, los cuales podemos ver en la carpeta
node_modules. Además adiciona estas dependencias al archivo package.json. El parámetro que pasamos antes de poner los nombre de los plugins (
--save-dev) lo que hace es que define a estas dependencias como de tipo desarrollo, lo cual es una buena práctica pues establece que estas dependencias solo son necesarias para el desarrollo de nuestro proyecto y no para el correcto funcionamiento de nuestra aplicación.
Estamos listos entonces para empezar a
utilizar y
probar estos plugins de Gulp.
Este plugin nos ayuda a reducir las líneas de nuestro fichero
gulpfile.js puesto que carga automáticamente todos los otros plugins registrados que tienen el prefijo
gulp-. Sino utilizaramos este plugin, tendriamos que para poder emplear los otros plugins que instalamos anteriormente añadirlos todos al archivo gulpfile.js
uno por uno cómo se muestra a continuación y entonces declarar la
tarea:
 |
| Declaración de plugins para Gulp |
Para utilizar este plugin tenemos que abrir el fichero gulpfile.js y adicionar como primera línea la siguiente:
var plugins = require('gulp-load-plugins')();
Con esto simplemente tenemos que declarar la tarea con el plugin que vayamos a utilizar
sin tener que declararlo previamente y teniendo en cuenta que tenemos que utilizar la siguiente nomenclatura para referirnos al plugin en la tarea:
plugin.nombredelplugin
 |
| Nomenclatura para declaración de plugins Gulp |
Veamos ahora como podemos trabajar con un plugin para la detección de errores en nuestro código JavaScript, que nos puede evitar varios dolores de cabeza.
JSHint nos permite ahorrar tiempo
depurando nuestro código, debido a que escanea nuestros ficheros y nos muestra todas las posibles mejoras que podemos realizar a nuestro código. Pero antes de añadir la tarea Gulp, debemos crear en el directorio raíz de nuestro proyecto el archivo
.jshintrc e insertarle los siguientes parámetros que pueden encontrar
aquí.
{
"node": true,
"browser": true,
"esnext": true,
"bitwise": true,
"camelcase": true,
"curly": true,
"eqeqeq": true,
"immed": true,
"indent": 2,
"latedef": true,
"newcap": true,
"noarg": true,
"quotmark": "single",
"undef": true,
"unused": true,
"trailing": true,
"smarttabs": true,
"globals": {
"angular": false
}
}
Este es el archivo de
configuración para la depuración de nuestros archivos JavaScript y puedes insertar o remover cualquier otro parámetro que necesitas. Puedes echarle un vistazo a la
lista de opciones del plugin.
Ahora podemos añadir nuestra tarea, para eso abrimos el archivo
gulpfile.js y escribimos:
 |
| Tarea Gulp para el plugin JSHint |
De esta forma le especificamos dónde se encuentran nuestros archivos JavaScript a
analizar y además creamos un
reporte para una mejor visualización de los resultados con el otro plugin que instalamos
jshint-stylish. Para probar nuestra nueva tarea desde la terminal ejecutamos el comando
gulp lint (lint es el nombre que le dimos a la tarea) y veremos un pequeño reporte con todas las mejoras que podemos realizar a nuestro código especificando el archivo y la línea en que se encuentra.
 |
| Tarea Gulp lint |
Con este reporte podemos entonces arreglar los errores encontrados y realizar diferentes mejoras en nuestros archivos. Pero no sería mejor si se
arreglaran automáticamente estos elementos detectados. Es ahí que entra nuestro siguiente plugin.
Este plugin como bien dice el nombre, trata de
arreglar automáticamente la mayor cantidad posible de elementos que afectan la calidad de nuestro código. Para utilizarlo simplemente tenemos que añadir la tarea a nuestro archivo
gulpfile.js de la siguiente manera:
 |
| Tarea Gulp para el plugin Fixmyjs |
Para ejecutar la tarea entonces solo tenemos que escribir en la terminal el comando
gulp fixjs (fixjs es el nombre que le dimos a la tarea) y
automáticamente se arreglarán los elementos detectados en nuestros archivos JavaScript por el plugin
JSHint.
Este último plugin que veremos se encarga, como dice el nombre, de
recoger todas las cosas que nos faltan por hacer antes de terminar nuestro proyecto. Su funcionamiento consiste en mostrarnos todas las líneas de nuestros archivos en las que añadimos
// TODO, para que así nunca nos olvidemos de cosas qe nos
faltan por hacer,
arreglar o
mejorar en nuestro proyecto. Para utilizarlo, simplemente añadimos esta tarea a nuestro archivo
gulpfile.js.
 |
| Tarea Gulp para el plugin gulp-todo |
De esta forma esta tarea se encarga de recorrer todos nuestros archivos JavaScript ubicados en la ruta de nuestro proyecto que le especificamos y devolvernos todos los
TODOS en un archivo
todo.json que se crea en el directorio raíz de nuestro proyecto. Para probarlo escribimos en la terminal
gulp todo y podemos después inspeccionar el archivo
.json que se genera con todos los
// TODOS que hayamos dejado. Un ejemplo de sería poner
//TODOS: Revisar la declaración de la variable y cuando ejecutemos la tarea nos devolvería en nuestro .json el archivo al que pertenece, la línea y otros parámetros. Para más información de los
parámetros que se pueden utilizar, otros tipos de archivos que se pueden
analizar y ficheros que puede
generar revisar
aquí.
Finalmente para optimizar nuestro trabajo vamos a crear lo que se conoce como
cadena de optimización de Gulp, que nos permite agrupar todas las tareas que hemos ido creando en una sola; para que así solamente tengamos que llamar a una tarea para que se ejecuten todas las demás. Para eso añadimos a nuestro archivo
gulpfile.js la siguiente tarea:
 |
| Tarea Gulp genérica |
Finalmente solo tenemos que ejecutar en la terminal el comando
gulp calidad y todas las tareas que hemos visto se ejecutaran. Espero que les haya servido este artículo. En próximos artículos veremos como utilizar el
JetBrains WebStorm para administrar nuestras
tareas Gulp y seguiremos viendo
buenas prácticas en el desarrollo con Ionic. Hasta la próxima.
Sign up here with your email
Déjame saber cualquier duda, sugerencia o experiencia al respecto. ¡Espero tú opinión! También puedes comentar como anónimo. ConversionConversion EmoticonEmoticon