使用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文件中的版本號。