How to write your own yeoman generator

How to write your own Yeoman generatorSLAVEN TOMAC, AMPHINICY TECHNOLOGIES

Yeoman

scaffolding system a lot of published generators

5155 generators published (5th of October) publishing over NPM

predefined rules for package.json

Why new generator

specific workflow standardizing your team’s coding style easy start of each sequential project

Yeoman generator

NPM module inherits yeoman-generator NPM module

naming (based on package.json) is important generator-<name> yo <name>

Yeoman generator – package.json

package.json is main descriptor of NPM module

name, keywords and dependencies have predefined values version must be defined files has to have folders/files which should be included in generator rest of values described here https://docs.npmjs.com/files/package.json#files

Yeoman generator – project structure

index.js – where everything starts templates – template placeholders and predefined files package.json npm install yeoman-generator –save app

main generator subgenerators (yo <name>:<subgenerator_folder>)

rest of the folders

Yeoman generator – index.js

generator runner it should extend yeoman-generator

NPM module

Yeoman generator – index.js (overriding generator)

constructor + any number of methods each method will be called specific methods (in order)

1. initializing2. prompting3. configuring4. default (all other methods are pushed here)5. writing6. conflicts7. install8. end

methods can be async (just return promise)

Example

few questions Page title? Page description? SASS/LESS? Bootstrap

Prepared gulpfile build Prepared bower.json Predefined .editorconfig and .jshintrc

Yeoman generator – testing/publishing

Testing npm link

Publishing git push (tags) npm publish

Yeoman generator - additionals

debugging

logging use generator.log, not console.log

composition of generators no need to rewrite stuff

node --debug <path to yo cli.js> <generator> [arguments]

e.g. node --debug "C:\Program Files\nodejs\node_modules\yo\lib\cli.js" js-zg-1

module.exports = require('yeoman-generator').Base.extend({ 'initializing' : function () { this.composeWith('my-generator:turbo'); }})

Yeoman generator - additionals

using other tools spawnCommand spawnCommandSync

interacting with Gruntfile

unit testing

end: function () { this.spawnCommand('karma', ['start']); }

writing: function () { this.gruntfile.insertConfig("compass", "{ watch: { watch: true } }"); }

Yeoman generator - additionals

remembering answers storing them into .yo-rc.json

options and arguments

this.prompt({ type : 'input', name : ‘useSass', message : ‘Use Sass?', store : true

});

yo js-zg-1 --sass

this.option(‘sass');this.useSass = this.options.sass;

yo js-zg-1 demoProject

this.argument(‘name', { type: String, required: true });this.log(this.name);

{ "generator-js-zg-1": { “useSass": ‘y’ }}

Useful links

writing your own Yeoman Generator – Official docs http://yeoman.io/authoring/

package.json configuration https://docs.npmjs.com/files/package.json

publishing NPM module https://docs.npmjs.com/getting-started/publishing-npm-packages

generator-generator NPM module generator for generating generator https://github.com/yeoman/generator-generator

Thanks!

Questions?