Plop : un micro-générateur pour se simplifier la vie au quotidien

@nicoespeon

http://nicoespeon.com

Kezako plop

> un micro-généraquoi ?

Génère de nouveaux fichiers à partir de templates

Évite d'aller copier/coller un autre fichier « similaire » (lequel ?), puis supprimer les lignes inutiles et déclarer tout ça où il faut (sans se tromper ?)

On écrit plop, on répond à quelques questions et TADAAA !

Gain de temps & moins d'erreurs au quotidien

Comment ça marche ?

> installation, configuration…

Installation

$ npm install --save-dev plop

{
  "name": "your-awesome-project",
  "description": "An awesome project",

  "devDependencies": {
    "plop": "1.4.1"
  },
  
  "scripts": {
    "generate": "plop"
  }
}

$ npm run generate

$ npm install -g plop

$ plop

Global

Local

Configuration

Plop a besoin d'un plopfile.js et de templates.

module.exports = function (plop) {};

Les templates

C'est du Handlebars !

/**
 * TODO - Describe what your model does.
 *
 * @class         {{pascalCase name}}.Model
 * @module        {{pascalCase name}}
 * @constructor
 */
import {Model} from "backbone";

export default Model.extend( {

  initialize() {
    // Executed on model initialization
  }

} );

On a accès :

aux variables du prompt
aux helpers / partials définis

plop.addHelper( name, helper );

plop.addPartial( name, template );

Dans plopfile.js :

Créer un générateur

module.exports = function ( plop ) {

    plop.setGenerator( "module", {
        description: "create a new module",
        prompts: [],
        actions: []
    } );

};

plop.setGenerator( name, config );

Création

Utilisation

générateur − prompts

module.exports = function ( plop ) {

  plop.setGenerator( "module", {
    description: "create a new module",
    prompts: [
      {
        type: "input",
        name: "name",
        message: "What is your module name?",
        validate: function (value) {
          if ((/.+/).test(value)) { return true; }
          return "name is required";
        }
      }
    ],
    // …
  } );

};

C'est du Inquirer !

générateur − actions

module.exports = function ( plop ) {

  plop.setGenerator( "module", {
    description: "create a new module",
    // …
    actions: [
      {
        type: "add",
        path: "modules/{{camelCase name}}.js",
        templateFile: "templates/module.js"
      }
    ]
  } );

};

2 types d'actions :

add
modify

Strings parsées avec Handlebars

générateur − actions

actions: function( data ) {
  var actions = [];

  if( data.wantTacos ) {
    actions.push( {
      type: "add",
      path: "folder/{{dashCase name}}.txt",
      templateFile: "templates/tacos.txt"
    } );
  } else {
    actions.push( {
      type: "add",
      path: "folder/{{dashCase name}}.txt",
      templateFile: "templates/burritos.txt"
    } );
  }

  return actions;
}

actions peut aussi être une fonction qui :

prend les réponses de prompts en paramètre
retourne le tableau des actions à effectuer

Permet d'adapter les actions en fonction des réponses données

Pourquoi plop ?

> et pourquoi pas Yeoman hein ?

Avantages de plop sur Yeoman

Léger, embarqué dans le projet = maintenance plus simple

Simple à prendre en main, plus facilement adopté car peu coûteux

Des use cases différents

scaffold un nouveau projet selon des standards
bootstrap de nouveaux fichiers dans le cadre de ce projet (standard)

Plop

Yeoman

bootstrap de nouveaux fichiers selon les standards personnalisés d'un projet

KISS = commencer avec plop, compliquer au besoin.

Merci ! Des questions ?

Plop : https://github.com/amwmedia/plop

Blog post : http://bit.ly/22hX160