摘要：相信熟悉系統(tǒng)的，對于一些等命令用起來應(yīng)該愛不釋手，這也是我想要開發(fā)一個(gè)便捷命令行的初衷，其次就是記錄一個(gè)完整開源小玩具的全過程。

命令行工具對于我們來說非常的熟悉，一些命令行的操作也極大的簡化了我們的日常工作。本文就基于我寫的一個(gè)Node命令行代碼計(jì)數(shù)器來進(jìn)行展開。

相信熟悉linux系統(tǒng)的，對于一些ps,grep,cp,mv…等命令用起來應(yīng)該愛不釋手，這也是我想要開發(fā)一個(gè)便捷命令行的初衷，其次就是記錄一個(gè)完整開源小玩具的全過程。

命令行的特點(diǎn)：

操作簡便

可視性強(qiáng)

看了一下當(dāng)前的一些命令行有以下問題

種類少 https://github.com/Towtow10/l...

顏值不夠 https://github.com/AlDanial/cloc

統(tǒng)計(jì)不太方便 https://github.com/ryanfowler...

因此這一款高顏值方便的統(tǒng)計(jì)工具誕生。

高顏圖

玩具源碼

https://github.com/hua1995116...

第三方庫

cli-table

colors

commander

ignore

dev庫(用來測試)

chai

mocha

codecov

istanbu

Node兼容性

babel

靜態(tài)文件

語言映射庫

顏色庫

通過commander來獲取用戶的一些自定義配置

program
    .version("0.1.0")
    .option("-i, --ignore [dir]", "ignore dir")
    .option("-p, --path [dir]", "ignore dir")
    .parse(process.argv);

Node遍歷文件，每種語言行數(shù)信息

function getFile(dirPath) {

    const files = fs.readdirSync(dirPath);

    files.forEach((item) => {
        ...
    })
}
                  

ignore過濾輸出到cache

function handleIgnode(cPath) {
    try {
        const currentPath = path.join(ROOTPATH, ".gitignore");
        const fileData = fs.readFileSync(currentPath, "utf-8");
        const ignoreList = fileData.split("
");
        const filterList = filterData(ignoreList);
        const ig = ignore().add(filterList);
        return ig.ignores(cPath);
    } catch (e) {
        return false;
    }
}

遍歷cache,統(tǒng)計(jì)max-line，進(jìn)行colors

function hanldeTable(){
    ...
    if (maxCount < langInfo[item].totalLines) {
        maxCount = langInfo[item].totalLines;
        maxIndex = index;
    }
    ...
}

cli-table 輸出展示

function outputTbale() {
    const {
        header,
        content,
        bottom
    } = initTable();

    const {
        totalFiles,
        totalCode,
        totalBlank,
        tablesContent
    } = hanldeTable();

    ...

    console.log(`T=${totalTime} s`, `(${fileSpeed} files/s`, `${lineSpeed} lines/s)`)
    console.log(header.toString())
    console.log(content.toString())
    console.log(bottom.toString())
}

loading

對于多文件目錄，提供loading

lass StreamLoad {
    constructor(option) {
        this.stream = option.stream;
        this.text = option.text;
        this.clearLine = 0;
    }
    setValue(value) {
        this.text = value;
        this.render();
    }
    render() {
        this.clear();
        this.clearLine++;
        this.stream.write(`read ${this.text} file
`);
    }
    clear() {
        if(!this.stream.isTTY) {
            return this;
        }
        
        for (let i = 0; i < this.clearLine; i++) {
            this.stream.moveCursor(0, -1);
            this.stream.clearLine();
            this.stream.cursorTo(0);
        }
        this.clearLine = 0;
    }
}

const progress = new StreamLoad({
    stream: process.stderr,
    text: 0
})

創(chuàng)建了一個(gè)實(shí)現(xiàn)loading的類。主要用到readline中的處理方法，詳見https://nodejs.org/dist/latest-v8.x/docs/api/readline.html#readline_readline_movecursor_stream_dx_dy

babel

對于低版本node的兼容

cnpm i babel-cli

package.json

"build": "./node_modules/.bin/babel src --out-dir lib"

chai，mocha

用來測試遍歷文件是否正確

const path = require("path");
const assert = require("chai").assert;

const {getFileData} = require("../src/linec");

describe("linec files test", () => {
    it("can linec dir", () => {
        const url = path.join(__dirname, "../example");
        console.log(url);

        const dirObj = JSON.stringify(getFileData(url));

        const expectData = "{"CSS":{"file":1,"blankLines":0,"totalLines":4,"color":"#563d7c"},"JavaScript":{"file":1,"blankLines":0,"totalLines":1,"color":"#f1e05a"},"JSON":{"file":1,"blankLines":0,"totalLines":3,"color":"#fff"},"Markdown":{"file":1,"blankLines":0,"totalLines":1,"color":"#fff"}}";

        assert.equal(dirObj, expectData);

    })
})

運(yùn)行

./node_modules/mocha/bin/mocha

本項(xiàng)目中還添加了代碼覆蓋率的測試，因此是這樣的

"test": "./node_modules/.bin/istanbul cover node_modules/mocha/bin/_mocha && ./node_modules/.bin/codecov",

Step1

打開https://www.npmjs.com/signup

注冊一個(gè)賬號

step2

如果有賬號直接到這一步

npm login

step3

在package.json中介入version

{
  "name": "linec",
  "version": "1.2.4",
  "description": "line count",
  "main": "index.js",
  ...
}

step4

npm publish

Tip:注意每次發(fā)版需要更改package.json 中的version，不然會發(fā)版失敗哦。

package.json

"bin": {
    "linec": "./lib/index.js"
},

本地項(xiàng)目命令行

npm link

就可以使用linec 命令，將linec命令軟連接到本地，linec這個(gè)名字可以自定義。

遠(yuǎn)端命令行

默認(rèn)就是包名字，但是如果bin里面定義了一個(gè)名字，同上，可以修改名字。也就是包名可以和命令不一致，但是為了更方便的使用，個(gè)人建議統(tǒng)一包名和命令。

詳情可以參考 http://www.ruanyifeng.com/blo...

https://travis-ci.org/

配置.travis.yml

language: node_js

node_js:
  - "stable"

sudo: false

before_script:
  - npm install

這個(gè)是我的配置，每次你的提交，只要含有npm run test命令，travis會自動(dòng)調(diào)用，自動(dòng)檢測。

travis還有個(gè)好處，在別人給你提交pr的時(shí)候，可以自動(dòng)運(yùn)行測試用例，避免一些低級錯(cuò)誤的發(fā)生。以下就是效果圖。

https://codecov.io/gh

這是一個(gè)統(tǒng)計(jì)代碼覆蓋率的工具，在npm run test中添加他，在pr的時(shí)候可以看到覆蓋率的統(tǒng)計(jì)

$ npm install -g linec / cnpm install -g linec 

$ linec

輸出空行，實(shí)際行數(shù)，總行數(shù)

支持400+語言

顯示遍歷速度

顯示多種顏色

工具源碼(歡迎star) https://github.com/hua1995116...

以上就是全部內(nèi)容，可能對于Node工具開發(fā)我可能還是處于初出茅廬的階段，有更規(guī)范的操作，歡迎大佬們給我指正。