前些日子使用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文件中的版本号。
