404 Not Found
The requested URL /q/7626 was not found on this server.Yeoman，教你快速打造自己的脚手架 - 简书
Yeoman，教你快速打造自己的脚手架
yeoman.png
不造大家在实际开发项目中，有没有这样的困惑，就是每次起一个新的项目，脚手架都要从旧有的项目copy，然后改名、删除内容，留下基本框架，最后还有npm install，安装包。并且，经常会因为插件的版本问题，导致运行出错（当然，如果你所在的小组有一套完整的工具流，可以忽略我）。
身为程序媛的我，怎么可以忍受这种不高bigger的项目脚手架搭建方式呢？
还好，有Yeoman来相助。
搭建脚手架必备工具
脚手架模板
确定你安装了node和npm，node的版本要求在4.0以上，npm要求与node相匹配的版本。
版本号可以通过以下方式查看：
node-version.png
全局安装yeoman
sudo npm install -g yo
yo-version.png
创建属于你自己的generator
创建文件目录
创建文件夹，文件夹名为generator-name，name是你创建的generator的名字。这里我以generator-gulp为例，创建以gulp为构建工具的脚手架
创建package.json
创建文件夹app、templates，文件index.js
现在的文件目录如下：
- generator-gulp
- templates
// 存放脚手架目录
- index.js
// 对脚手架进行操作的代码
- package.json
修改package.json
"name": "generator-gulp",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
"keywords": [
"yeoman-generator"
"author": "huangxiaoyan",
"license": "ISC",
"dependencies": {
"del": "^2.2.0",
"yeoman-generator": "^0.23.3"
执行npm install，安装yeoman-generator和del这两个插件
npm install
创建脚手架模板
我以基于gulp的脚手架为例。分为pc端和移动端这两种模板，创建后的目录如下：
- templates
- gulpfile.js
- package.json
编写index.js
这是最重要最关键的一步。
Yeoman提供了多个方法来搭建你自己的脚手架。具体的可以去看看官方文档，在这里，我只抽取里面主要的方法来完成脚手架的搭建。
先上框架版的index.js
var generators = require('yeoman-generator'),
_ = require('yeoman-generator/node_modules/lodash'),
glob = require('yeoman-generator/node_modules/glob'),
chalk = require('yeoman-generator/node_modules/chalk'),
log = console.log,
fs = require('fs'),
path = require('path'),
del = require('del'),
generatorName = 'gulp';
// 记住这个名字，下面会有用
// 导出模块，使得yo xxx能够运行
module.exports = yeoman.generators.Base.extend({
constructor: function () {
// 默认会添加的构造函数
yeoman.generators.Base.apply(this, arguments);
prompting: function () {
// 询问用户
writing: {
// 拷贝文件，搭建脚手架
// 搭建完执行的操作
constructor
在这个阶段，检查脚手架是否已经存在，如果存在，则退出。
constructor: function(){
generators.Base.apply(this, arguments);
// 检查脚手架是否已经存在
var dirs = glob.sync('+(src)');
//now _.contains has been abandoned by lodash,use _.includes
if(_.includes(dirs, 'src')){
// 如果已经存在脚手架，则退出
log(chalk.bold.green('资源已经初始化，退出...'));
setTimeout(function(){
process.exit(1);
询问用户，根据答案生成不同模板的脚手架
prompting: function(){
var questions = [
name: 'projectAssets',
type: 'list',
message: '请选择模板:',
choices: [
name: 'PC模板',
value: 'pc',
checked: true
// 默认选中
name: 'Mobile模板',
value: 'mobile'
type: 'input',
name: 'projectName',
message: '输入项目名称',
default: this.appname
type: 'input',
name: 'projectAuthor',
message: '项目开发者',
store: true,
// 记住用户的选择
default: 'huangxiaoyan'
type: 'input',
name: 'projectVersion',
message: '项目版本号',
default: '0.0.1'
return this.prompt(questions).then(
function(answers){
for(var item in answers){
// 把answers里的内容绑定到外层的this，便于后面的调用
answers.hasOwnProperty(item) && (this[item] = answers[item]);
}.bind(this));
copy文件到指定目录，生成脚手架。
writing: function(){
* 可以在prompting阶段让用户输入
* 也可以指定，完全根据个人习惯
this.projectOutput = './dist';
//拷贝文件
this.directory(this.projectAssets,'src');
this.copy('gulpfile.js', 'gulpfile.js');
this.copy('package.json', 'package.json');
生成脚手架后，进行的一些处理。
end: function(){
* 删除一些多余的文件
* 由于无法复制空文件到指定目录，因此，如果想要复制空目录的话
* 只能在空文件夹下建一个过渡文件，构建完后将其删除
del(['src/**/.gitignore','src/**/.npmignore']);
var dirs = glob.sync('+(node_modules)');
if(!_.includes(dirs, 'node_modules')){
// 将你项目的node_modules和根目录下common-packages的node_modules进行软连接
// 为什么要这样做，大家可以先想想
this.spawnCommand('ln', ['-s', '/usr/local/lib/node_modules/common-packages/'+generatorName+'/node_modules', 'node_modules']);
在generator-gulp目录下执行
这一步将generator-gulp软连接到你的usr/local/lib/node_modules/generator-gulp。
这样运行yo时，就可以找到这个generator-gulp了
未解决的问题
最后还有一个问题，就是为什么在end阶段要对node_modules进行软连接呢？
因为这样每次构建脚手架的时候，不需要每次都去安装插件，不需要每次都去执行npm install，并且可以保证包的版本号一致。
common-packages
我们可以创建这样的一个目录，专门存放需要的node_modules。common-packages就是这样的一个功能。
目录结构如下：
- common-packages
- package.json
- node_modules
其中，gulp这个文件名是跟你的generatorName是一致的。
刚刚上面说了，这个文件是在根目录下的，但是，由于我们可能以后会对这个目录进行修改添加，所以放在根目录不是很合适。
所以我们可以这样做，将common-package同样软连接到根目录。
进入common-packages，执行
至此，脚手架模板打造完成。
新建项目文件，打开终端，执行yo，可以看到：
脚手架搭建.png
恭喜恭喜，您已经成功了！
完整的项目代码可以到我的github上查看。
github项目地址：
人生若只如初见
一、为什么要构建自己的脚手架
大家都知道，使用脚手架能够帮助我们快速构建项目，目前网上也有很多脚手架，能够满足大家的基本需求。最近，自己研究了一些新的东西，在网上找了许多都不能满足我。所以今天我就使用Yeoman自己搭建一个脚手架，同时发布到npm 仓库里。下次在起...
awesome-gulp中文版 一份gulp的资源，插件和使用实例清单， 致力于打造更好的前端工程构建流程。 被老外的awesome 清单刺激到，觉得有必要翻译一份，为国产的程序员们做点事情，本清单将保持实时更新同步。PS:进都进来了，就顺便看看其他的吧: awesome-...
脚手架这个词估计做前端的都很熟悉。在没有实现前端工程化的年代，前端代码的组织都是纯手工维护的。比如我要做一个网站页面，那么我需要手动创建一个文件夹来存放代码文件，我把它命名为demo。然后在demo目录下创建src文件夹，在src文件夹内创建css文件夹、js文件夹、ima...
yeoman-generator yeoman-generator是一个构建脚手架的工具，如果你还不了解你自行google到官网看下，这里只简单介绍一下，它是一个脚手架生成工具，比如在之前写 ASP.NET MVC 的时候，Visual Studio 会给你选模板，然后生成...
Pines Cheng’s Blog awesome-gulp中文版 一份gulp的资源，插件和使用实例清单， 致力于打造更好的前端工程构建流程。 目录 资源通用资源官方文档组织入门教程Gulp 入门Gulp 4 入门Gulp with BrowserifyGulp wit...
我们之所以活着，就是为了遇见未来美好的自己。矫情的话还是少说为妙，直入主题吧！ 看过许多关于努力与拼搏的故事，也听过很多有关的语句，然而好像并无卵用，仅仅能激发我们几分钟的热血沸腾，正如喝多了鸡汤，早已练就金刚不坏之身。闲时拿来消遣下时光还是蛮好的选择，我们似乎没有真正的想...
有时候，一个人一句话会改变你一辈子。 或许没有什么会让你心痛，也许没有什么会让你心疼，也许没有什么会让你跌倒！这时候，你也必须记住，可能也没有什么能让你心动，没有什么能让你幸福，没有什么能让你激动。我们都在患得患失中成长，又在患得患失中失去，在患得患失中获得。其实，无论未来...
我想我永远都不会忘记这个夜晚吧！因为，在这一夜，我和姐姐聊了很多很多！
我有一个姐姐，我们之间相差六岁，她上初中的时候，我才在念小学，总之，我们没有在一个校园里待过，那时候，我是多么希望能和姐姐一起起床，一起上学，一起回家，我是多么渴望在被欺负的时候有姐姐的保护啊，可...
简介： 男主：长相妖孽，好像画中走出来的谪仙。还有一个大大的特点：白！ 性格腹黑闷骚，外加不要脸。特别爱女主，往死里宠的那一种。 女主：长相平凡，有点迟钝但是不小白的蠢女人（男主口中）。因为一直受黑暗中的那个神秘人的威胁，总是跟男主时不时地来个没有说再见的再见！ 男配一：冰...
中驰小葵同步 恭贺峰江【顶秀家园】新售楼处12月12日重装开放！中驰传媒【8D电影车】倾情助力！404 Not Found
The requested URL /q/7626 was not found on this server.404 Not Found
The requested URL /q/7626/a-7742 was not found on this server.404 Not Found
The requested URL /q/7626/a-7852 was not found on this server.}