How to write your own yeoman generator
-
Upload
slaven-tomac -
Category
Technology
-
view
112 -
download
4
Transcript of How to write your own yeoman generator
![Page 1: How to write your own yeoman generator](https://reader034.fdocuments.net/reader034/viewer/2022042600/589a2f251a28ab051f8b6235/html5/thumbnails/1.jpg)
How to write your own Yeoman generatorSLAVEN TOMAC, AMPHINICY TECHNOLOGIES
![Page 2: How to write your own yeoman generator](https://reader034.fdocuments.net/reader034/viewer/2022042600/589a2f251a28ab051f8b6235/html5/thumbnails/2.jpg)
Yeoman
scaffolding system a lot of published generators
5155 generators published (5th of October) publishing over NPM
predefined rules for package.json
![Page 3: How to write your own yeoman generator](https://reader034.fdocuments.net/reader034/viewer/2022042600/589a2f251a28ab051f8b6235/html5/thumbnails/3.jpg)
Why new generator
specific workflow standardizing your team’s coding style easy start of each sequential project
![Page 4: How to write your own yeoman generator](https://reader034.fdocuments.net/reader034/viewer/2022042600/589a2f251a28ab051f8b6235/html5/thumbnails/4.jpg)
Yeoman generator
NPM module inherits yeoman-generator NPM module
naming (based on package.json) is important generator-<name> yo <name>
![Page 5: How to write your own yeoman generator](https://reader034.fdocuments.net/reader034/viewer/2022042600/589a2f251a28ab051f8b6235/html5/thumbnails/5.jpg)
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
![Page 6: How to write your own yeoman generator](https://reader034.fdocuments.net/reader034/viewer/2022042600/589a2f251a28ab051f8b6235/html5/thumbnails/6.jpg)
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
![Page 7: How to write your own yeoman generator](https://reader034.fdocuments.net/reader034/viewer/2022042600/589a2f251a28ab051f8b6235/html5/thumbnails/7.jpg)
Yeoman generator – index.js
generator runner it should extend yeoman-generator
NPM module
![Page 8: How to write your own yeoman generator](https://reader034.fdocuments.net/reader034/viewer/2022042600/589a2f251a28ab051f8b6235/html5/thumbnails/8.jpg)
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)
![Page 9: How to write your own yeoman generator](https://reader034.fdocuments.net/reader034/viewer/2022042600/589a2f251a28ab051f8b6235/html5/thumbnails/9.jpg)
Example
few questions Page title? Page description? SASS/LESS? Bootstrap
Prepared gulpfile build Prepared bower.json Predefined .editorconfig and .jshintrc
![Page 10: How to write your own yeoman generator](https://reader034.fdocuments.net/reader034/viewer/2022042600/589a2f251a28ab051f8b6235/html5/thumbnails/10.jpg)
Yeoman generator – testing/publishing
Testing npm link
Publishing git push (tags) npm publish
![Page 11: How to write your own yeoman generator](https://reader034.fdocuments.net/reader034/viewer/2022042600/589a2f251a28ab051f8b6235/html5/thumbnails/11.jpg)
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'); }})
![Page 12: How to write your own yeoman generator](https://reader034.fdocuments.net/reader034/viewer/2022042600/589a2f251a28ab051f8b6235/html5/thumbnails/12.jpg)
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 } }"); }
![Page 13: How to write your own yeoman generator](https://reader034.fdocuments.net/reader034/viewer/2022042600/589a2f251a28ab051f8b6235/html5/thumbnails/13.jpg)
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’ }}
![Page 14: How to write your own yeoman generator](https://reader034.fdocuments.net/reader034/viewer/2022042600/589a2f251a28ab051f8b6235/html5/thumbnails/14.jpg)
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
![Page 15: How to write your own yeoman generator](https://reader034.fdocuments.net/reader034/viewer/2022042600/589a2f251a28ab051f8b6235/html5/thumbnails/15.jpg)
Thanks!
Questions?