使用Yeoman Generators制作脚手架

综合编程 2017-06-28 阅读原文

前些日子使用 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 ,选择自己的脚手架,便可以测试

责编内容by:Jake's blog 【阅读原文】。感谢您的支持!

您可能感兴趣的

Component Spotlight: Treeview (Part 1) To display items in a hierarchical, tree-like structure with expandable paren...
Return Value Fizz Buzz javascript I'm having an assignment where I have to do the FizzBuzz game in Javascript. ...
How JavaScript works: inside Google’s V8 eng... Couple of weeks ago we started a series aimed at digging deeper into JavaScript ...
Function和Object 应该知道的 javascript有 5种基础的内建对象(Fundamental Objects) , Object 、 Function 、 Error 、 Sym...