動手製做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 : 省時的瀏覽器同步測試工具