动手制做nodejs命令行工具 iconfont-cli

自动化开发工做流使开发者可以将更多的精力和时间放在业务逻辑之上，一般会使用webpack gulp browser-sync等CLI工具，而自动化的实现则离不开脚本的编写；对于前端开发工程师而言，可以制做nodejs命令行脚本工具也成为必须掌握的技能之一。

准备工做

1. 首先咱们建立一个新的项目目录mkdir iconfont-cli，并使用npm init进行初始化，一路回车便可。
2. 建立脚本入口文件index.js, 并在package.json设置bin参数， 定义脚本命令名称及入口文件，以下：

在package.json中添加命令入口文件

{
    "name":'iconfont-cli'
    ...
    "bin": {
      "iconfont": "index.js"
    }
    ...
}
复制代码

建立index.js，文件顶部声明脚本解释程序并指定为nodejs

#!/usr/bin/env node

// 代码...
console.log('iconfont cli start');

复制代码

3. 执行npm link，将npm包连接到全局执行环境，从而在任意位置使用命令行均可以直接运行，开发期间能够实时调试，该命令主要作两件事情: 一是为npm包目录建立软连接，将其链到{prefix}/lib/node_modules/<package> ，二为可执行文件(bin)建立软连接，将其链到{prefix}/bin/{name}
4. 控制台输入iconfont, 如打印iconfont cli start， 那么恭喜，此时项目初始化完成😊

命令交互

基本

命令行交互最核心的两大部分: 输入与输出。在准备工做部分，咱们已经经过执行iconfont简单命令成功运行脚本并输出log。而一般，咱们在执行命令时会传入一些参数供用户进行配置，相似iconfont --dest xxxx的形式。命令携带的参数能够在node脚本中经过process.argv进行访问，而后解析出参数内容。所幸，目前有不少nodejs插件提供了控制台命令参数的解析，比较流行的是commander.js库, 可使咱们方便快捷的实现参数的解析及帮助文档的输出

1. 安装 npm install commander --save
2. 使用方法

#!/usr/bin/env node
var program = require('commander');

program
  .version('0.0.1') // 设置版本号
  .option('-d, --dest <path>', '设置目标文件夹')  // 设置dest参数
  .action(function (cmd) {
    console.log(cmd.dest) // 打印用户输入的dest参数
    // ...执行后续的功能
  })

program.parse(process.argv); // 解析命令行参数
复制代码

执行iconfont -d ./，控制台输出./

3. commander默认提供了帮助命令，能够直接经过执行iconfont --help或者iconfont -h输出

进阶

有时候咱们但愿经过问答的形式使用户进行一些选择、输入或确认操做，以即可以传达和接收更多的信息

对于这种需求，咱们能够借助 Inquirer.js库进行实现，例如咱们在上文的commander中配置了dest文件夹后，但愿用户进行二次确认操做，所以咱们能够有以下作法：

// 此处略去....
var inquirer = require('inquirer');

program
  .version('0.0.1') // 设置版本号
  .option('-d, --dest <path>', '设置目标文件夹')  // 设置dest参数
  .action(function (cmd) {
    console.log(cmd.dest) // 打印用户输入的dest参数
    inquirer.prompt([
      {
        type:'confirm',
        name:'destOk',
        message:'确认使用目标文件夹:' + cmd.dest
      }
    ]).then(function(answers){
      console.log(answers.destOk) // true或false
      // ...执行后续的功能
    })
  })
  
// 此处略去...
复制代码

执行iconfont -d ./，效果以下:

集成webfonts-generator

webfonts-generator支持经过svg文件制做出css字体图标

1. 安装npm install webfonts-generator --save
2. 结合上文的交互命令，完整的iconfont-cli工具代码以下

#!/usr/bin/env node
var program           = require('commander');
var inquirer          = require('inquirer');
var webfontsGenerator = require('webfonts-generator');
var path              = require('path');
var fs                = require('fs');

// 遍历查询SVG文件
function findSvgs(folder, list){
  list = list || [];
  try {
    var files = fs.readdirSync(folder);
    for(var i=0; i<files.length; i++){
      (function(){
        var fileName = files[i],
            filePath = path.join(folder, fileName),
            stats    = fs.statSync(filePath);
        if(!stats.isFile()){
          return findSvgs(filePath, list);
        } else if(path.extname(filePath) === '.svg'){
          list.push(filePath);
        }
      })(i);
    }
  } catch (error) {
    console.error(error);
  }
  return list;
}

program
  .version('0.0.1') // 设置版本号
  .option('-d, --dest <path>', '设置目标文件夹')  // 设置dest参数
  .action(function (cmd) {

    var currentFolder = process.cwd(); // 当前命令执行的目录
    var destFolder    = path.isAbsolute(cmd.dest) ? cmd.dest : path.join(currentFolder,cmd.dest); // 目标目录, 需区分是否为绝对路径

    inquirer.prompt([
      {
        type: 'confirm',
        name: 'destOk',
        message: '确认使用目标文件夹:' + destFolder
      }
    ]).then(function(answers){
      
      // 用户确认后执行后续的功能
      if(answers.destOk){

        webfontsGenerator({
          files: findSvgs(currentFolder),
          dest: cmd.dest,
          html: true
        }, function(error) {
          if (error) {
            console.log('Fail!', error);
          } else {
            console.log('Done!');
          }
        })
  
      }
      
    })
  })

program.parse(process.argv);
复制代码

3. 进入svg文件所在的文件夹，执行命令iconfont -d ./iconfont，便可生成图标相关的各种文件以及html预览

发布与使用

至此咱们成功完成了一个简单的命令行工具iconfont-cli，接下来咱们能够将其发布的npm仓库供其余开发者下载使用，具体步骤以下：

1. 首先咱们须要在www.npmjs.com/注册帐户，以后使用npm adduser进行登陆，需填写Username、Password、Email相关信息.
2. 检查package.json设置，如author、license、version、homepage等相关信息，参考package.json属性详解
3. 发布npm publish，此时咱们可能会遇到下面截图的问题，说明iconfont-cli已经被其余人发布过了，因此要换个名字进行发布，直接修改package.json中的name便可.

4. 成功发布以后，能够经过 npm install -g iconfont-cli 全局安装使用

经常使用的库

chalk : 美化控制台字符串输出

ora : 终端动态加载效果

shelljs : 轻便的命令库

vinyl-ftp : ftp上传下载

harp : 具备内置预处理功能的静态Web服务器

browser-sync : 省时的浏览器同步测试工具