Copy all files but change the name of some automat

问题:

I am trying to create a yeoman generator where I have to copy from templatePath to destinationPath some files and folders, but I would want to have some of this files with a variable that yeoman could change by one of the user's inputs.

like: "<%=name%>-plugin.php" -> "hello-plugin.php"

I saw some references that this can be done but I can't find how.

I am doing right now:

//Copy the configuration files
    app: function () {
      this.fs.copyTpl(
        this.templatePath('**'),
        this.destinationPath(), 
        {
          name: this.props.pluginName,
          name_function: this.props.pluginName.replace('-', '_'),
          name_class: this.props.className,
          description: this.props.pluginDescription
        }
      );
    }

I thought that with that code my <%=name%> would magically changed on copyTpl but it doesn't work

回答1:

This is not possible anymore. The feature was bloated and was removed at some point in 2015.

For now, just rename the file:

this.fs.copy('name.js', 'new-name.js')

回答2:

I've just found the solution:

Use this.registerTransformStream(); to pipe all files through some node.js script.

var rename = require("gulp-rename");
//other dependecies...

module.exports = yeoman.Base.extend({

    //some other things generator do...

    writing: function() {
        var THAT = this;
        this.registerTransformStream(rename(function(path) {
            path.basename = path.basename.replace(/(666replacethat666)/g, THAT.props.appName);
            path.dirname = path.dirname.replace(/(666replacethat666)/g, THAT.props.appName);
        }));
        this.fs.copyTpl(
            this.templatePath(),
            this.destinationPath(), {
                appName: this.props.appName
            });
    }
});

I'm using here gulp-rename to change file names to something else.

Assuming that this.props.appName == "myFirstApp", this:

666replacethat666-controller.html

will change its name to

myFirstApp-controller.html

回答3:

Following @piotrek answer, I made a function to replace all props with some pattern (like ejs does) -> $$[your prop name]$$. warning: ES6 inside

var rename = require("gulp-rename");
//other dependecies...

module.exports = yeoman.Base.extend({

//some other things generator do...

  writing: function() {
    this.registerTransformStream(rename((path) => {
      for (let prop in this.props) {
        let regexp = new RegExp('\\$\\$' + prop + '\\$\\$', 'g')
        path.basename = path.basename.replace(regexp, this.props[prop]);
        path.dirname = path.dirname.replace(regexp, this.props[prop]);
      }
    }));
    this.fs.copyTpl(
        this.templatePath(),
        this.destinationPath(), {
            appName: this.props.appName
        });
    }
});

Example:

Let's assume you have this.props.appname = MyApp and this.props.AnotherProps = Test and you want to rename file or folder.

Name your file or folder MyFile$$appname$$.js -> MyFileMyApp.js

Name your file or folder $$appname$$.js -> MyApp.js

Name your file or folder $$AnotherProps$$.js -> Test.js