Yeoman Generator

Generadores para crear aplicaciones web con:

Angular 1, Gulp, Webpack, ESLint, Karma/Jasmine

Generar un generador
Métodos y Contexto
Pruebas unitarias
Generadores existentes
Publicar un generator

Generar un generador

Un generador es, en su núcleo, un módulo Node.js

1.- Instalar globalmente Yeoman

npm install -g yo

2.- Instalar globalmente generator-generator

npm install -g generator-generator

3.- Crear y accesar a directorio:

mkdir anzdig-aw-es6 && cd anzdig-aw-es6

4.- Generar un generator:

yo generator

? Your generator name generator-anzdig-aw-es-6
Your generator must be inside a folder named generator-anzdig-aw-es-6
I'll automatically create this folder.
? Description Angular 1, webpack 2, ECMAScript 6, Babel
? Project homepage url https://lenin-anzen.github.io/generator-anzdig-aw-es6
? Author's Name Lenin Meza
? Author's Email lmeza@anzen.com.mx
? Author's Homepage https://travis-ci.org/lenin-anzen
? Package keywords (comma to split) yeoman,generator,angular,webpack,es6,babel
? Send coverage reports to coveralls Yes
? GitHub username or organization lenin-anzen
? Which license do you want to use? MIT
   create package.json
   create README.md
   create .editorconfig
   create .gitattributes
   create .gitignore
   create generators\app\index.js
   create generators\app\templates\dummyfile.txt
   create __tests__\app.js
   create .travis.yml
   create .eslintignore
   create LICENSE

5.- Deshabilitar bower

@file generator-anzdig-aw-es6/generators/app/index.js

@line 33

install() {
    this.installDependencies({bower: false});
  }

6.- Enlazar generador

cd generator-anzdig-aw-es6
npm link

7.- Verificar enlace:

npm ls --global generator-anzdig-aw-es6

8.- Probar el generador :

cd ..
mkdir test1 && cd test1
yo anzdig-aw-es6

     _-----_     ╭──────────────────────────╮
    |       |    │      Welcome to the      │
    |--(o)--|    │        impressive        │
   `---------´   │      anzdig-aw-es6       │
    ( _´U`_ )    │        generator!        │
    /___A___\   /╰──────────────────────────╯
     |  ~  |
   __'.___.'__
 ´   `  |° ´ Y `

? Would you like to enable this option? Yes
   create dummyfile.txt

Métodos y Contexto

Los siguientes métodos se ejecutan de manera secuencial:

initializing - Your initialization methods (checking current project state, getting configs, etc)
prompting - Where you prompt users for options (where you'd call this.prompt())
configuring - Saving configurations and configure the project (creating .editorconfig files and other metadata files)
default - If the method name doesn't match a priority, it will be pushed to this group.
writing - Where you write the generator specific files (routes, controllers, etc)
conflicts - Where conflicts are handled (used internally)
install - Where installations are run (npm, bower)
end - Called last, cleanup, say good bye, etc

Se pueden agregar métodos custom, éstos se agregarán al método "default"

class MyGenerator extends Generator {
  initializing() {
    this.foo = 'bar';
  }
  getFoo() {
      console.log( this.foo );
  }
}

Pruebas unitarias

Al ejecutar el comando npm test se realiza lo siguiente:

Comprobación de seguridad con Node Security Platform command-line tool"
- prepublish
Comprobación de sintaxis con ESLint
- pretest
Pruebas unitarias con Jest
- test

Las pruebas hacen uso de:

Test Helpers
- helpers.run(path.join(__dirname, '../app')) .inTmpDir(function (dir) { fs.copy(path.join(__dirname, '../templates/common'), dir, done); }) .withPrompts({ coffee: false });
Yeoman Assert
- assert.file('templates/user.hbs');
- assert.fileContent('models/user.js', 'App.User = DS.Model.extend');

Generadores existentes

Instalar el siguiente generador:

generator-angular-webpack-es6
Yeoman generator for AngularJS + Webpack with ES6 and SASS.

1.- Instalar Yeoman y Webpack globalmente:

npm install -g yo webpack

2.- Instalar generador globalmente:

npm install -g generator-angular-webpack-es6

3.- Crear directorio y acceder a él:

mkdir awesome-project && cd awesome-project

4.- Mediante Yeoman iniciar generador:

yo angular-webpack-es6

     _-----_     ╭──────────────────────────╮
    |       |    │   Welcome to the great   │
    |--(o)--|    │    angular-webpack-es6   │
   `---------´   │        generator!        │
    ( _´U`_ )    ╰──────────────────────────╯
    /___A___\   /
     |  ~  |
   __'.___.'__
 ´   `  |° ´ Y `

? Your application name (myNgApp) awesome-app

Publicar un generator

Público

La propiedad "name" debe tener el prefijo "generator-"
La propiedad "keywords" debe contener "yeoman-generator"
La propiedad "files" debe contener la lista de archivos usados.
Debe tener como dependencia la última versión de "yeoman-generator"

{
  "name": "generator-name",
  "version": "0.1.0",
  "description": "Description of the generator",
  "files": [
    "generators"
  ],
  "keywords": ["yeoman-generator"],
  "dependencies": {
    "yeoman-generator": "^1.0.0"
  }
}

Debe contener un archivo llamado .yo-rc.json, el cual se considera que, en donde se encuentre, será la raíz del proyecto.

Para más información sobre cómo publicar un paquete en NPM: Publicación de Paquetes.

Privado

1.- Clonar el repositorio donde se encuentra el generador:

git clone https://github.com/anzen/generator-anzdig-webapps-training

2.- Accesar e instalar dependencias:

cd generator-anzdig-webapps-training
npm install

3.- Enlazar el generador a los paquetes locales de NPM:

npm link