Crea tu primer generador con Yeoman

En el artículo anterior veíamos como instalar yeoman y empezar a usar generadores ya creados por la comunidad pero ya ha llegado la hora de lanzarnos y crear nuestro propio generador.

Para ello, lo primero que debemos hacer es instalar el siguiente modulo:

	npm install -g generator-generator

Este módulo nos permitará crearnos el proyecto de nuestro generador con yeoman.

Nos desplazamos hasta la carpeta donde queramos crear el generador y ejecutamos:

	yo generator

Tras esto, nos realizará una serie de preguntas que debemos contestar con los datos que dispongamos y los que no los dejamos vacíos, como con cualquier proyecto generado con node.

Una vez finalice el asistente se creará la estructura de nuestro generador en la carpeta que hemos elegido:

Estructura del generador

De toda la estructura que ha generado nos vamos a centrar en la carpeta /generators/app. En ella encontraremos dos elementos más: index.js y templates.

Index.js será el archivo que contendrá la lógica de nuestro generador, realizará las preguntas y procesará los datos.

En la carpeta templates tendremos las plantillas que queremos usar(si es que lo creemos necesario) para crear nuevos archivos o directamente copiarlos. En el generador de ejemplo aparece un archivo dummyfile.txt

El código generado por el generador de ejemplo

	'use strict';
	var Generator = require('yeoman-generator');
	var chalk = require('chalk');
	var yosay = require('yosay');

	module.exports = Generator.extend({
	  prompting: function () {
		// Have Yeoman greet the user.
		this.log(yosay(
		  'Welcome to the slick ' + chalk.red('generator-mi-primer-generador') + ' generator!'
		));

		var prompts = [{
		  type: 'confirm',
		  name: 'someAnswer',
		  message: 'Would you like to enable this option?',
		  default: true
		}];

		return this.prompt(prompts).then(function (props) {
		  // To access props later use this.props.someAnswer;
		  this.props = props;
		}.bind(this));
	  },

	  writing: function () {
		this.fs.copy(
		  this.templatePath('dummyfile.txt'),
		  this.destinationPath('dummyfile.txt')
		);
	  },

	  install: function () {
		this.installDependencies();
	  }
	});

Este generador nos realiza una simple pregunta y tras responderla copia el archivo dummyfile.txten la ruta donde hemos ejecutado el generador.

En este momento aún no podemos usar nuestro generador en cualquier sitio ya que no lo tenemos accesible desde npm por lo que vamos a hacer que nuestro generador se puede usar en cualquier ruta de nuestro ordenador con solo ejecuta yo mi-primer-generador. Para ello ejecutamos en cmd estándo situados sobre la carpeta /generator-mi-primer-generador:

	npm link

Una vez hecho esto ya podemos usar nuestro generador.

Añadir nuevas preguntas

Si queremos añadir nuevas preguntas a nuestro generador solo tendremos que modificar la variable prompts con las que necesitemos y del tipo que necesitemos:

    var prompts = [{
		  type: 'confirm',
		  name: 'someAnswer',
		  message: 'Would you like to enable this option?',
		  default: true
		},
		{
		  type: 'confirm',
		  name: 'someAnswer2',
		  message: 'Would you like to enable another option?',
		  default: true
		}	
	];

Tipos de preguntas

Y para finalizar este tutorial básico deciros que existen varios tipos de preguntas:

• list: Listado de opciones donde puede elegir una de ellas
• input: Caja de texto libre donde se peue escribir cualquier cosa
• checkbox: Listado de opciones donde se pueden elegir N opciones

En el caso de los listados la forma de uso es la siguiente:

    var prompts = [{
		  type: 'confirm',
		  name: 'someAnswer',
		  message: 'Would you like to enable this option?',
		  default: true
		},
		{
		  type: 'confirm',
		  name: 'someAnswer2',
		  message: 'Would you like to enable another option?',
		  default: true
		},
		{
		  type: 'list',
		  name: 'city',
		  message: 'What city do you like?',
			choices: [{
					name:"Madrid",
					value:"madrid",
				},
				{
					name:"Barcelona",
					value:"barcelona",
				},
				{
					name:"Paris",
					value:"paris",
				},
				{
					name:"London",
					value:"london",
				},
				{
					name:"Berlin",
					value:"berlin",
				},
			]	  	
		}	
	];

Name sería el texto que mostraría el generador al ejecutarse y value sería el valor que debería recogerse para realizar la operación correspondiente.

En próximos artículos veremos como generar subgeneradores y preguntas recurrentes y dependientes.

Espero que os sirva de ayuda.