Web2Day

Créez votre propre générateur Yeoman

Thierry LAU

laut3rry

Thierry LAU

Yeoman

Yeoman est un générateur de projet et workflow Front End qui s'appuie sur ...

Yeoman

Installer Yeoman

npm install -g yo

Installer un générateur

npm install -g generator-angular

Générateurs

Notes

Expliquer la notion de générateurs et présenter quelques générateurs officiel et ceux de la communauté

Générer votre projet

yo angular

Résultat en gif animé

Vous aimez RubanJS ?

par Loïc Frering @loicfrering

Et si on codait un générateur Ruban ?

Il nous faut un générateur de générateur

DEMO

Essayer votre générateur

Créer un lien global vers votre générateur

npm link

Actions


var yeoman = require('yeoman-generator');

yeoman.generators.base.extend({

	step1 : function () {
		// action 1
	},

	step2 : function () {
		// action 2
	},

	step3 : function () {
		// action 3
	}

});
	

A retenir

Et si je ne veux pas que le générateur appelle ma fonction ?


yeoman.generators.base.extend({

	step1 : function () {},

	step2 : function () {},

	step3 : function () {
		this._stepNotCalled();
	},

	_stepNotCalled : function () {}

});
	

Intéragir avec l'utilisateur

Prompts

Inquirer.js

{ type : "list" }
		
inquirer list

{ type : "confirm" }
	
inquirer confirm

{ type : "checkbox" }
		
inquirer checkbox

yeoman.generators.Base.extend({

	prompt: function () {

		var done = this.async();

		this.prompt([{
			type    : "input",
			name    : "name",
			message : "Your project name",
			default : "A Cool project"
		}], function (answers) {
			console.log(answers.name);
			done();
		});

	}

})
	

DEMO

Intéragir avec les fichiers

Source

par défault  ../templates

this.src.readJSON('package.json')

Destination

this.dest.copy('app.js', 'dist/app.js')

Templating

_index.html


<head>
	<title><%= app %></title>
</head>
<body>

<% if (greeting) {%>
<p>Hello <%= _.humanize(name) %></p>
<% } %>

</body>
</html>
		
this.template('_index.html', 'index.html')

index.html


<head>
	<title>My App</title>
</head>
<body>

<p>Hello Dev2day</p>

</body>
</html>
		

DEMO

Gérer les dépendances

npm


this.npmInstall()
		

bower


this.bowerInstall()
		

npm + bower


this.installDependencies()
		

A retenir

Finalisation

Effectuer des tâches quand toutes les actions ont été réalisées



yeoman.generators.Base.extend({
	init: function () {
		this.on('end', function () {
			// tâches finales
		});
	}
});
	

Exemples

DEMO

Gruntfile Editor API

Gruntfile.js

Attention

DEMO

Tester vos générateurs

Tester quoi ?

Comment ?

Test Helpers


before(function (done) {

  helpers.run('../generators/app')
    .inDir('./tmp')
    .withOptions({ foo: 'bar' })
    .withArguments(['name-x'])
    .withPrompt({ coffee: false })
    .onEnd(done)

})
	

Conseil

Assert Helpers

DEMO

Sub-generators


yo generator:subgenerator "name"
	

Exemples

DEMO

Yeoman Storage API

Sauvegarder des données

Partager des données entre générateurs et sous-générateurs

.yo-rc.json


{
   "generator-backbone": {
      "requirejs": true,
      "coffee": true
   },
   "generator-gruntfile": {
      "compass": false
   }
}
		

DEMO

Composabilité

Un générateur pourra travailler de concert avec un autre générateur

Ingrédients

Gruntfile Editor API

this.composeWith()

Invoquer un générateur ou un sous générateur

Run loop

Cycle de vie avec un système de priorité

Run Loop


yeoman.generators.base.extend({
	initializing : function () {},
	prompting : function () {},
	configuring : function () {},

	default : function () {},

	writing : function () {},
	conflicts : function () {},
	install : function () {},
	end : function () {
		aStep : function () {},
		anotherStep : function () {}
	}
});
	

Conclusion

Créer un générateur Yeoman

Mes générateurs

Merci

laut3rry