也来盘盘前端脚手架的那些事儿

- commands  // 此文件夹用于放置自定义命令  
- utils  
- index.js  // 项目入口  
- readme.md 
1.
2.
3.
4.

#!/usr/bin/env node  
// 必须在文件头添加如上内容指定运行环境为node  
console.log('hello cli'); 
1.
2.
3.

"bin": {  
   "yncms-template": "index.js"  
 }, 
1.
2.
3.

PS E:\WorkSpace\yncms-template-cli> yncms-template  
hello cli 
1.
2.

#!/usr/bin/env node  
const commander = require('commander');  
// 利用commander解析命令行输入，必须写在所有内容最后面  
commander.parse(process.argv); 
1.
2.
3.
4.

PS E:\WorkSpace\yncms-template-cli> yncms-template -h  
Usage: index [options]  
Options:  
  -h, --help  output usage information 
1.
2.
3.
4.

// 查看版本号  
commander.version(require('./package.json').version); 
1.
2.

PS E:\WorkSpace\yncms-template-cli> yncms-template -V  
1.0.10  
PS E:\WorkSpace\yncms-template-cli> yncms-template --version  
1.0.10 
1.
2.
3.
4.

// 查看版本号  
commander  
    .version(require('./package.json').version)  
    .option('-v,--version', '查看版本号');  
1.
2.
3.
4.

PS E:\WorkSpace\yncms-template-cli> yncms-template -h  
Usage: index [options]  
Options:  
  -V, --version  output the version number  
  -h, --help     output usage information 
1.
2.
3.
4.
5.

commander  
    .command('init <name>') // 定义init子命令，<name>为必需参数可在action的function中接收，如需设置非必需参数，可使用中括号  
    .option('-d, --dev', '获取开发版') // 配置参数，简写和全写中使用,分割  
    .description('创建项目') // 命令描述说明  
    .action(function (name, option) { // 命令执行操作，参数对应上面的设置的参数  
        // 我们需要执行的所有操作，都在这里完成  
        console.log(name);  
        console.log(option.dev);  
    }); 
1.
2.
3.
4.
5.
6.
7.
8.
9.

PS E:\WorkSpace\yncms-template-cli> yncms-template init test -d  
test  
true 
1.
2.
3.

// utils/clone.js  
const download = require('download-git-repo');  
const symbols = require('log-symbols');  // 用于输出图标  
const ora = require('ora'); // 用于输出loading  
const chalk = require('chalk'); // 用于改变文字颜色  
module.exports = function (remote, name, option) {  
    const downSpinner = ora('正在下载模板...').start();  
    return new Promise((resolve, reject) => {  
        download(remote, name, option, err => {  
            if (err) { 
                 downSpinner.fail();  
                console.log(symbols.error, chalk.red(err));  
                reject(err);  
                return;  
            };  
            downSpinner.succeed(chalk.green('模板下载成功！'));  
            resolve();  
        });  
    });  
  };  
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.

// commands/init.js  
const shell = require('shelljs');  
const symbols = require('log-symbols');  
const clone = require('../utils/clone.js');  
const remote = 'https://gitee.com/letwrong/cli-demo.git';  
let branch = 'master';  
const initAction = async (name, option) => {  
    // 0. 检查控制台是否可以运行`git `，  
    if (!shell.which('git')) {  
        console.log(symbols.error, '对不起，git命令不可用！');  
        shell.exit(1);  
    }  
    // 1. 验证输入name是否合法  
    if (fs.existsSync(name)) {  
        console.log(symbols.warning,`已存在项目文件夹${name}！`);  
        return;  
    }  
    if (name.match(/[^A-Za-z0-9\u4e00-\u9fa5_-]/g)) {  
        console.log(symbols.error, '项目名称存在非法字符！');  
        return;  
    }  
    // 2. 获取option，确定模板类型（分支）  
    if (option.dev) branch = 'develop';  
    // 4. 下载模板  
    await clone(`direct:${remote}#${branch}`, name, { clone: true });  
};  
module.exports = initAction; 
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.

// commands/init.js  
// 5. 清理文件  
const deleteDir = ['.git', '.gitignore', 'README.md', 'docs']; // 需要清理的文件  
const pwd = shell.pwd();  
deleteDir.map(item => shell.rm('-rf', pwd + `/${name}/${item}`)); 
1.
2.
3.
4.
5.

// init.js  
const inquirer = require('inquirer');  
// 定义需要询问的问题  
const questions = [  
  {  
    type: 'input',  
    message: '请输入模板名称:',  
    name: 'name',  
    validate(val) {  
      if (!val) return '模板名称不能为空！';  
      if (val.match(/[^A-Za-z0-9\u4e00-\u9fa5_-]/g)) return '模板名称包含非法字符，请重新输入';  
      return true;  
    }  
  },  
  {  
    type: 'input',  
    message: '请输入模板关键词（;分割）:', 
     name: 'keywords'  
  },  
  {  
    type: 'input',  
    message: '请输入模板简介:',  
    name: 'description'  
  },  
  {  
    type: 'list',  
    message: '请选择模板类型:',  
    choices: ['响应式', '桌面端', '移动端'],  
    name: 'type'  
  },  
  {  
    type: 'list',  
    message: '请选择模板分类:',  
    choices: ['整站', '单页', '专题'],  
    name: 'category'  
  },  
  {  
    type: 'input',  
    message: '请输入模板风格:',  
    name: 'style'  
  },  
  { 
     type: 'input',  
    message: '请输入模板色系:',  
    name: 'color'  
  },  
  {  
    type: 'input',  
    message: '请输入您的名字:', 
    name: 'author'  
  }  
];  
// 通过inquirer获取到用户输入的内容  
const answers = await inquirer.prompt(questions);  
// 将用户的配置打印，确认一下是否正确  
console.log('------------------------');  
console.log(answers);  
let confirm = await inquirer.prompt([  
    {  
        type: 'confirm',  
        message: '确认创建？',  
        default: 'Y',  
        name: 'isConfirm'  
    }  
]);  
if (!confirm.isConfirm) return false; 
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.

const installSpinner = ora('正在安装依赖...').start();  
if (shell.exec('npm install').code !== 0) {  
    console.log(symbols.warning, chalk.yellow('自动安装失败，请手动安装！'));  
    installSpinner.fail(); // 安装失败  
    shell.exit(1);  
}  
installSpinner.succeed(chalk.green('依赖安装成功！')); 
1.
2.
3.
4.
5.
6.
7.

notifier.notify({  
    title: 'YNCMS-template-cli',  
    icon: path.join(__dirname, 'coulson.png'),  
    message: ' ♪(＾∀＾●)ﾉ 恭喜，项目创建成功！'  
}); 
1.
2.
3.
4.
5.

// 8. 打开编辑器  
if (shell.which('code')) shell.exec('code ./');  
shell.exit(1); 
1.
2.
3.