前端脚手架CLI开发攻略

一般前端团队都会用Grunt/Gulp/Webpack/Parcel等等进行编译发布，但是随着项目/团队增加就需要有个工具去统一完成clone项目/初始化安装依赖/目录结构/上传测试环境等操作，这一般就需要借助命令行界面（Command Line Interface）或者 图形用户界面（Graphical User Interface）来完成啦

准备工作

1. github账户
2. npmJS账户
3. git / node环境

1. 创建git仓库 及 npm init

1. git init 初始化git仓库
2. npm init初始化项目
3. 目录结构类似下图，并且创建好文件
4. 先push一波到github占个坑

//目录结构-下面有截图
+-- /bin 
|  |
|  +-- sy-cli.js 主索引文件 
|  
+-- /config 
|  |
|  +-- clonelist.js 配置文件
|
+-- /node_modules   
|  
+-- /src 开发目录
|  | 
|  +-- clone.js 
|  +-- init.js   
|     
+-- .gitignore git项目忽略目录配置文件
| 
+-- .travis.yml travis配置文件
|    
+-- package-lock.json npm5以上生成的依赖锁🔐，避免不同电脑因为更新依赖不同版本带来的问题
|   
+-- package.json 项目配置信息
|   
+-- readme.md 项目说明文档
|   
|   

2.安装依赖

1. commander是CLI的核心
2. inquirer是完成和用户交互的
3. metalsmith是拼接HTMl做项目模板的
4. shelljs是执行shell脚本的
5. update-notifier是用来给CLI升级用的

// 这几个基础的插件组合起来就能跑起来了。
// 注意不要加 --dev 噢，加了--dev是开发依赖，不加是执行依赖

  npm install commander
  npm install XXX

3. 写 bin里面的文件

#!/usr/bin/env node
const program = require('commander')
const updateNotifier = require('update-notifier')
const pkg = require('./../package.json')
const shell = require('shelljs')
const notifier = updateNotifier({
  pkg,
  updateCheckInterval: 1000 * 60
})

if (notifier.update) {
  console.log(`有可更新版本: ${notifier.update.latest},建议更新后使用`)
}

// 查看版本
program
  .version(pkg.version, '-v, --version')
// clone项目
program
  .command('clone')
  .description('执行  `sy-cli clone`   初始化项目')
  .action(option => {
    let config = {
      group: null,
      projects: null
    }
    if (!config.group) {
      let clone = require('./../src/clone')
      clone(config)
    }
  })

// ... 中间的一大堆command

program.parse(process.argv)

其余的 后续再写，今天先到这里啦~
感兴趣的乡亲可以看这里 sy-cli