Meetup AngularJS Paris
Yeoman est un générateur de projet et workflow Front End qui s'appuie sur ...
Crée l'arborescence de votre projet
Prépare votre workflow Front End (Grunt)
Récupère les dépendances de votre projet
npm install -g yonpm install -g generator-angularExpliquer la notion de générateurs et présenter quelques générateurs officiel et ceux de la communauté
yo angular
Trop de choses ?
Pas assez de choses ?
Ne répond pas à mes besoins ?
Créez votre propre générateur
par Loïc Frering @loicfrering
npm install -g generator-generatoryo generatorCréer un lien global vers votre générateur
npm link
var yeoman = require('yeoman-generator');
yeoman.generators.base.extend({
step1 : function () {
// action 1
},
step2 : function () {
// action 2
},
step3 : function () {
// action 3
}
});
Une action est automatiquement appelée par le générateur si elle est définie dans le prototype de celui-ci
Chaque action est appelée dans l'ordre de déclaration
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 () {}
});
{ type : "list" }
{ type : "confirm" }
{ type : "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();
});
}
})
par défault ../templatesthis.src.readJSON('package.json')this.dest.copy('app.js', 'dist/app.js')_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>
this.npmInstall()
this.bowerInstall()
this.installDependencies()
this.installDependencies() peut être appelé n'importe où dans votre code
npm install et bower install seront exécutés à la fin des actions
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
});
}
});
important car définit votre workflow
un des fichiers les plus édités par les générateurs
peut être pollué par le code de templating
this.gruntfile.insertConfig("clean", "{build: ['dist']}");
grunt.initConfig({
clean: {
build : ['dist']
}
});
this.gruntfile.registerTask('build', ['compass', 'uglify']);
grunt.registerTask('build', ['compass', 'uglify']);
A partir de yeoman-generator 0.17 seulement
présence ou absence de fichier
contenu du fichier
var helpers = require('yeoman-generator').test;
before(function (done) {
helpers.run('../generators/app')
.inDir('./tmp')
.withOptions({ foo: 'bar' })
.withArguments(['name-x'])
.withPrompt({ coffee: false })
.onEnd(done)
})
Préférez les chemins absolus pour éviter les comportements imprévisibles
var path = require('path');
before(function (done) {
helpers.run(path.join( __dirname, '../app'))
.inDir(path.join( __dirname, './tmp'))
...
})
var assert = require('yeoman-generator').assert;
assert.file(path);
assert.noFile(path);
assert.fileContent(path, regex);
assert.noFileContent(path, regex);
yo generator:subgenerator "name"
yo angular:filter "monFiltre"yo backbone:model "monModel"yo ember:controller "monController"yo ruban:slide "titreDuSlide"Fonctionne comme un générateur Yeoman
yo ruban:slide "titreDuSlide"
yeoman.generators.nameBase.extend({
step : function() {
console.log(this.name);
// titreDuSlide
}
})
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
}
}
this.config.set(key, value)this.config.get(key)this.config.delete(key)Un générateur pourra travailler de concert avec un autre générateur
charge le Gruntfile du projet et l'enrichit
sinon crée un nouveau Gruntfile par défaut s'il n'existe pas
Invoquer un générateur ou un sous générateur
Cycle de vie avec un système de priorité
yeoman.generators.base.extend({
initializing : function () {},
prompting : function () {},
configuring : function () {},
default : function () {},
writing : function () {},
conflicts : function () {},
install : function () {},
end : function () {
aStep : function () {},
anotherStep : function () {}
}
});
Créer un générateur Yeoman
pour vous
pour votre équipe
pour la communauté
laut3rry