使用Yeoman Generators制作脚手架

前些日子使用YEOMAN写了一个独立的前端脚手架，今天有时间，整理一下。第一次使用，还有很多值得改进的地方，希望各位大神指正。

YEOMAN中文官网

安装

全局安装需要的工具

npm install -g yo
npm install -g generator-generator

执行，执行之前并不需要自己新建文件夹，yo generator会帮助我们建好文件夹

yo generator

在设置了一系列问题之后

注：项目名称必须是以generator-开头，协议选择MIT

我们得到了如下目录

generator-test
├── LICENSE
├── README.md
├── __tests__
│   └── app.js
├── generators
│   └── app
│       ├── index.js
│       └── templates
│           └── dummyfile.txt
└── package.json

配置

generators/templates/是默认存放文件的目录，把所有模版文件放在这个目录下，
下面是我写的前端脚手架目录树

generator-jake-front
├── LICENSE
├── README.md
├── __tests__
│   └── app.js
├── generators
│   └── app
│       ├── index.js
│       └── templates
│           ├── README.md
│           ├── gulpfile.js
│           ├── package.json
│           ├── src
│           │   ├── app
│           │   │   ├── header.inc
│           │   │   └── index.html
│           │   ├── css
│           │   │   ├── lib
│           │   │   │   ├── animate.scss
│           │   │   │   ├── layer
│           │   │   │   │   ├── layer.scss
│           │   │   │   │   └── mobile
│           │   │   │   │       └── layer.scss
│           │   │   │   └── reset.scss
│           │   │   ├── mix
│           │   │   │   └── page.scss
│           │   │   └── style.scss
│           │   ├── images
│           │   │   └── layer
│           │   │       ├── icon-ext.png
│           │   │       ├── icon.png
│           │   │       ├── loading-0.gif
│           │   │       ├── loading-1.gif
│           │   │       └── loading-2.gif
│           │   └── js
│           │       ├── lib
│           │       │   ├── jquery.fullPage.js
│           │       │   ├── jquery.min.js
│           │       │   └── layer
│           │       │       ├── layer.js
│           │       │       ├── mobile
│           │       │       │   ├── layer.js
│           │       │       │   └── need
│           │       │       │       └── layer.css
│           │       │       └── skin
│           │       │           └── default
│           │       │               ├── icon-ext.png
│           │       │               ├── icon.png
│           │       │               ├── layer.css
│           │       │               ├── loading-0.gif
│           │       │               ├── loading-1.gif
│           │       │               └── loading-2.gif
│           │       └── main.js
│           ├── webpack.config.dev.js
│           └── webpack.config.pro.js
└── package.json

编辑/generators/app/index.js

下面是我的配置

var path = require('path');
var chalk = require('chalk'); // 不同颜色的info
var yeoman = require('yeoman-generator');
var yosay = require('yosay'); // Yeoman弹出框
const fs = require('fs');
module.exports = yeoman.extend({
  info: function() {
    this.log(chalk.green(
      'I am going to build your front templates!'
    ));
  },
  generateBasic: function() { // 按照自己的templates目录自定义
    // 拷贝目录
    this.fs.copy(this.templatePath("src"), this.destinationPath("src"));
    // 拷贝文件
    this.fs.copy(this.templatePath("package.json"), this.destinationPath("package.json"));
  },
  generateClient: function() {
    this.sourceRoot(path.join(__dirname, 'templates'));
    this.destinationPath('./');
  },
  install: function() { // 安装依赖
    this.installDependencies({
      skipInstall: this.options['skip-install']
    });
  },
  end: function() {
    this.log(yosay(
      'Your front templates has been created successfully!'
    ));
  }
});

测试

由于我们在本地开发，并不知道用起来怎么样，所以可以使用npm link命令，相当于在全局安装了此脚手架，然后在新文件夹中执行yo，选择自己的脚手架，便可以测试

发布

发布需要一个npm的账号，如果没有使用npm adduser创建；如果已有账号，运行npm login登陆。然后到项目根目录下，运行npm publish就可以发布了。如果更新后重新发布，注意修改根目录下的package.json文件中的版本号。