从0到1创建本身的脚手架一

结果展现

cmd执行命令行

npm install mcf-cli -g  //全局安装mcf脚手架

mcf -V                  //查看mcf版本

mcf add                 //mcf添加模板

mcf list                //mcf查看模板列表

mcf init <模板名> [项目地址]    //根据模板建立项目

mcf delete <模板名>    //mcf删除模板

mcf create-vue test     //建立vue项目
复制代码

上面几行命令行让你对mcf-cli有个印象，让你知道脚手架能作什么，和怎么作

出发点

自从自学了vue以后，老是被前端工程化的开发步骤惊叹，用Vue-cli从0搭建了一个Vue项目，一步一步配置,而后npm i, npm run dev，打开连接localhost:8080,一个网页就这么写好了，嘴里不自觉的吐出了两个字：'NB'。

随着学习和使用的不断深刻，为何咱们本身不能搭个脚手架工具呢！想到就尝试着作吧！

脚手架的实质

如图：

所示：

1. 命令的解析,这个能够借助commander实现；
2. 文件的操做，复制，粘贴，增长，删除，文件内容的新增，替换；这个能够借助fs-extra实现； 3.模板文件，就以本身对前端工程化粗浅的认识，写一个最牛（cu）逼（lou）的模板项目；

申请一个npm帐号，这个不算实现的功能，算附属工做；

意义

随着前端工程化的概念愈来愈深刻人心，脚手架的出现就是为减小重复性工做而引入的命令行工具，摆脱ctrl + c, ctrl + v，此话怎讲?

如今新建一个前端项目，已经不是在html头部引入css，尾部引入js那么简单的事了，css都是采用Sass或则Less编写，在js中引入，而后动态构建注入到html中；

除了学习基本的js，css语法和热门框架，还须要学习构建工具webpack，babel这些怎么配置，怎么起前端服务，怎么热更新；为了在编写过程当中让编辑器帮咱们查错以及更加规范，咱们还须要引入ESlint；甚至，有些项目还须要引入单元测试（Jest）。

对于一个刚入门的人来讲，这无疑会让人望而却步。

而前端脚手架的出现，就让事情简单化，一键命令，新建一个工程，再执行两个npm命令，跑起一个项目。

在入门时，无需关注配置什么的，只须要开心的写代码；另外，对于不少系统，他们的页面类似度很是高，因此就能够基于一套模板来搭建，虽然是不一样的人开发，但用脚手架来搭建，相同的项目结构与代码书写规范，是很利于项目的后期维护的

准备知识

上了年纪，喜欢扯，扯远了，回归正题，动手作吧，首先咱们要进行一些前期的准备工做：

一、commander库

commander.js是一个帮助快速开发Node.js命令行工具的包(库)

脚本解释程序：

#! /usr/bin/env node
复制代码

在代码的开头第一行，必须指定咱们的脚本执行所须要的解释程序, 目的是使用env来找到node，并使用node来做为程序的解释程序。

二、chalk插件

chalk是一个颜色的插件。能够经过chalk.blue(‘hello world’)来改变颜色

const chalk = require('chalk')
...
console.log(chalk.blue('Hello') + 'World' + chalk.red('!'));
console.log(chalk.blue.bgRed.bold('Hello world!'));
console.log(chalk.blue('Hello', 'World!', 'Foo', 'bar', 'biz', 'baz'));
复制代码

三、download-git-repo插件

download-git-repo是一个用来从git上下载项目的插件，基本用法以下： 参考详细用法上传送门

var download = require('download-git-repo');

download('这个参数?', '目标地址', function (err) {
  console.log(err ? 'Error' : 'Success')
})
复制代码

四、ora插件

用来实现node.js命令行环境的loading效果，和显示各类状态的图标等

用法：

const ora = require('ora')
...
const spinner = ora(`正在下载项目模板`)
spinner.start()
...
spinner.fail()
...
spinner.succeed()
复制代码

五、 inquirer插件

对于命令行交互的功能，能够用inquirer.js来处理。用法其实很简单：

const inquirer = require('inquirer') 

inquirer.prompt([
  {
    name: 'projectName',
    message: '请输入项目名称'
  }
]).then(answers => {
  console.log(`你输入的项目名称是：${answers.projectName}`)
})
复制代码

prompt()接受一个问题对象的数据，在用户与终端交互过程当中，将用户的输入存放在一个答案对象中，而后返回一个Promise，经过then()获取到这个答案对象。so easy！

六、 metalsmith插件

它就是一个静态网站生成器，能够用在批量处理模板的场景，相似的工具包还有Wintersmith、Assemble、Hexo。它最大的一个特色就是EVERYTHING IS PLUGIN（万物皆插件），因此，metalsmith本质上就是一个胶水框架，经过黏合各类插件来完成生产工做。

七、 handlebars模板

模板引擎我选择handlebars。固然，还能够有其余选择，例如ejs、jade、swig。

用handlebars的语法对模板作一些调整，例如修改模板中的package.json

八、 npm帐号的注册

www.npmjs.com/signup 该网址注册，注册须要注意的坑，

username，password，email三者记清楚，何时须要用户名，何时须要密码，何时须要邮箱，填写的时候须要看清楚，别问我怎么知道的，多踩几回坑你就什么都知道了！

九、 npm包的建立、开发、发布

npm init  初始化项目

npm login  依次输入username，password，email

npm pubic 发布项目
复制代码

以及其余的命令行

npm adduser
npm link
npm unlink
复制代码

我能想到的暂时就这么多，有须要之后再加！

好处

让项目从"搭建-开发-部署"更加快速以及规范 不要让本身成为码畜, 既要会写还要懂原理