 |
| WebStorm tareas Gulp |
WebStorm provee integración con el administrador de tareas Gulp, permitiendo:
- Detectar archivos gulpfile.js y reconocer la definición de las tareas.
- Construir árbol de tareas.
- Navegar entre la definición de la tarea en el árbol y su definición en el archivo gulpfile.js.
- Ejecutar tareas.
- Configurar parámetros de la ejecución de la tarea.
Para trabajar con las tareas Gulp desde este IDE, abrimos el proyecto y podemos hacerlo de varias formas para crear nuestro Gulp.js o invocar las tareas. Para trabajar desde el árbol de tareas primero tenemos que mostrarlo, para eso nos paramos con clic derecho sobre el archivo gulpfile.js y seleccionamos Show Gulp Taks (Mostrar tareas de Gulp), esto nos genera el árbol con las tareas que tenemos declaradas en este archivo.
 |
| Árbol de tareas de Gulp |
Para desplazarnos hacia la tarea en nuestro archivo gulpfile.js, hacemos nuevamente clic derecho sobre la tarea y seleccionamos en esta ocasión Jump to Source. Esto nos ubicara en dónde se encuentra ubicada nuestra tarea en el archivo gulpfile.js.
También podemos ejecutar tareas a partir de una configuración para Gulp.js. Para eso creamos una configuración en Run -> Edit Configuration, seleccionamos Add New Configuration en el botón + y escogemos Gulp.js. Una vez ahí establecemos el nombre de la configuración, especificamos la ruta del archivo gulpfile.js sino lo ha cargado automáticamente, en la sección Tasks especificamos la tarea o las tareas a ejecutar separadas por un espacio en blanco. Podemos especificar otras opciones como para Node, que por ejemplo en el caso de que nuestro archivo gulpfile.js haya sido creado utilizando ECM6 debemos especificar el parámetro --harmony para que reconosca este formato.
Seguidamente damos en Run..., seleccionamos nuestra configuración y se ejecutará.
 |
| Gulp.js configuración |
Ejecutando tareas Gulp de forma automática
A veces tenemos tareas que necesitamos ejecutar con regularidad, dígase antes de ejecutar nuestro proyecto. Para eso podemos adicionar las configuraciones Gulp.js que hayamos creado a una lista de tareas que se ejecutarán antes de iniciar nuestra aplicación. Para eso nos dirigimos a File -> Settings y debajo de la sección Tools -> Startup Tasks. Una vez ahí damos en el signo de + y se nos despliega una lista con todas las configuraciones que hemos creado, simplemente tenemos que ir seleccionando las que queramos ejecutar antes de lanzar nuestra aplicación.Activando JSHint en WebStorm
Hasta ahora hemos visto como utilizar diferentes plugins de Gulp como JSHint mediante la utilización de tareas. Pero y si quisieramos utilizar JSHint en tiempo real sin tener que esperar a ejecutar una tarea para poder ver lo que podemos mejorar de nuestro código. Para ese caso WebStorm trae una funcionalidad incorporada muy buena llamada Code Quality Tools, que nos permite habilitar diferentes herramientas para nuestro trabajo con JavaScript entre las que se encuentra JSHint.Para poder utilizarlo tenemos que ir a File -> Settings -> Languages & Frameworks -> JavaScript -> Code Quality Tools. Ahí veremos diferentes herramientas como JSHint, seleccionamos la herramienta y marcamos el checkbox Enable para habilitarla. Ahí nos muestra diferentes opciones como la versión de JSHint, si la que esta seleccionada no es la versión que tenemos instalada podemos desplegar las opciones de versiones y seleccionar otra.
También podemos seleccionar los parámetros que JSHint analizará en nuestros ficheros JavaScript o podemos decirle que utilize el fichero que creamos en el artículo anterior .jshintrc seleccionando el checkbox Use config files.
Bueno, es todo por hoy, espero que les sirva y hayan descubierto nuevas funcionalidades de este potente IDE que es WebStorm.
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