前言

有時候,當你完成一個項目后,想要展示這個項目的目錄結(jié)構(gòu)(如下圖所示),對該項目進行文檔描述性說明,用于解釋其項目中各個目錄以及文件代表的含義,這樣便于自己和后來的同學(xué)理解,在實際開發(fā)中,對于接收毫無文檔說明的project,是非常痛苦的,一份好的readme文檔也是非常重要的,那怎么辦?逐行手寫?當然不是,接下來,一步一步帶你見證奇跡

image

戳鏈接,使用tree生成目錄樹結(jié)構(gòu),內(nèi)有視頻

使用tree生成的目錄結(jié)構(gòu)

使用DOS中的tree命令

人用迭代,神用遞歸,其實說的是自己調(diào)用自己,而這個tree命令就是用遞歸寫的

tree是dos的一個命令

功能:以圖形的方式現(xiàn)實應(yīng)用程序或者路徑的目錄結(jié)構(gòu)

對于tree命令在windows壞境下的使用的,執(zhí)行help命令,然后tree /?,其他windows的dos命令也是如此

官方解釋:Tree是一個遞歸目錄列表程序，它生成一個深度縮進的文件列表十艾。給出目錄參數(shù)時费变，樹會列出給定目錄中找到的所有文件和/或目錄

缺陷:在windows DOS終端下,tree對應(yīng)的參數(shù)功能有限,無法過濾特定的文件,而且在git bash終端下此命令卻無法使用,如果要使用,特用特定的方法,后文中提供了具體的解決方法
tree命令使用:

D:\公開課\2019\react\myfirstreactapp>tree /?
以圖形顯示驅(qū)動器或路徑的文件夾結(jié)構(gòu)。

TREE [drive:][path] [/F] [/A]

   /F   顯示每個文件夾中文件的名稱炮沐。
   /A   使用 ASCII 字符包归，而不使用擴展字符(會把當前目錄下的結(jié)構(gòu)給展出來)痢艺。
TREE [drive:][path] [/F] [/A]

當你在當前目錄下使用tree /F或者tree /a 這兩個命令時,你會發(fā)現(xiàn),它會把所有文件目錄結(jié)構(gòu)都給你打印出來
使用tree /f,如下所示:

│  │      README.md
│  │
│  ├─regexpu-core
│  │  │  LICENSE-MIT.txt
│  │  │  package.json
│  │  │  README.md
│  │  │  rewrite-pattern.js
│  │  │
│  │  └─data
│  │          character-class-escape-sets.js
│  │          iu-mappings.js
│  │
│  ├─regjsgen
│  │      LICENSE
│  │      package.json
│  │      README.md
│  │      regjsgen.js
│  │
│  ├─regjsparser
│  │  │  CHANGELOG
│  │  │  LICENSE.BSD
│  │  │  package.json
│  │  │  parser.js
│  │  │  README.md
│  │  │
│  │  ├─bin
│  │  │      parser
│  │  │
│  │  └─node_modules
│  │      ├─.bin
│  │      │      jsesc
│  │      │      jsesc.cmd
│  │      │
│  │      └─jsesc
│  │          │  jsesc.js
│  │          │  LICENSE-MIT.txt
│  │          │  package.json
│  │          │  README.md
│  │          │
│  │          ├─bin
│  │          │      jsesc
│  │          │
│  │          └─man
│  │                  jsesc.1
│  │

使用tree /a,如下所示

D:\公開課\2019\react\myfirstreactapp>tree /A
卷 Data 的文件夾 PATH 列表
卷序列號為 5A50-E210
D:.
+---node_modules
|   +---.bin
|   +---@babel
|   |   +---code-frame
|   |   |   \---lib
|   |   +---core
|   |   |   +---lib
|   |   |   |   +---config
|   |   |   |   |   +---files
|   |   |   |   |   +---helpers
|   |   |   |   |   \---validation
|   |   |   |   +---tools
|   |   |   |   \---transformation
|   |   |   |       +---file
|   |   |   |       \---util
|   |   |   \---node_modules
|   |   |       +---.bin
|   |   |       \---semver
|   |   |           \---bin

如果你此時想要把目錄結(jié)構(gòu)保存到一個文件里,可以用如下方式:

tree /f > 指定輸出的文件(一般為txt格式或者readme文檔)

tree /f > list.txt

當然你也可以在窗口里,手動復(fù)制結(jié)果,然后,新建一個文件,把輸出的結(jié)果粘貼進去,也不是不可以,但是你要知道,程序員哥哥是很懶的,個人強烈推薦使用命令行方式去自動化操作

注意:tree命令是Windows下的一個命令,在linux下或者git命令行工具里,卻無法使用,不支持tree,然而如果想要支持怎么辦?

• 下載tree,并下載請下載Binaries版本(http://gnuwin32.sourceforge.net/packages/tree.htm),如下圖所示
  
  下載binaries文件
• 添加tree,將下載文件解壓bin/目錄下的 tree.exe 復(fù)制到 git/usr/bin 目錄中,如下圖所示:

將tree放到Git/usr/bin目錄下

• 這是windows下tree在git命令行工具下使用文檔'http://mama.indstate.edu/users/ice/tree/`

以下是tree命令在git命令行中使用文檔:
此用法只在git bash中是有效,在DOS終端下,使用tree命令仍然是系統(tǒng)的提供的用法,此tree非彼tree,是為了能在window下的git終端下也能夠使用的一種方式,此方法提供了很多方法

itclancode@LAPTOP-1CS413BU MINGW64 /d/公開課/2019/react/myfirstreactapp
$ tree --help
usage: tree [-adfghilnpqrstuvxACDFNS] [-H baseHREF] [-T title ] [-L level [-R]]
        [-P pattern] [-I pattern] [-o filename] [--version] [--help] [--inodes]
        [--device] [--noreport] [--nolinks] [--dirsfirst] [--charset charset]
        [--filelimit #] [<directory list>]
  -a            All files are listed(列出所有文件).
  -d            List directories only(只列出目錄).
  -l            Follow symbolic links like directories.(遵循象目錄這樣的符號鏈接)
  -f            Print the full path prefix for each file(打印每個文件的完整路徑前綴).
  -i            Don't print indentation lines()不要打印壓痕線.
  -q            Print non-printable characters as '?'.(將不可打印字符打印為'?'。)
  -N            Print non-printable characters as is.(按原樣打印不可打印字符)
  -p            Print the protections for each file.(打印每個文件的保護)
  -u            Displays file owner or UID number(顯示文件所有者或UID號).
  -g            Displays file group owner or GID number.(顯示文件組所有者或GID編號)
  -s            Print the size in bytes of each file.(打印每個文件的字節(jié)大小)
  -h            Print the size in a more human readable way.(以更容易被人閱讀的方式打印尺寸)
  -D            Print the date of last modification.(打印上次修改的日期)
  -F            Appends '/', '=', '*', or '|' as per ls -F.(根據(jù)ls -F添加'/'蜕猫、'='寂曹、'*'或'|'。)
  -v            Sort files alphanumerically by version.(按版本對文件進行字母數(shù)字排序)
  -r            Sort files in reverse alphanumeric order.(按字母數(shù)字倒序排列文件回右。)
  -t            Sort files by last modification time.(按上次修改時間排序文件)
  -x            Stay on current filesystem only.(只保留當前文件系統(tǒng))
  -L level      Descend only level directories deep.(只向下深入到級別目錄)
  -A            Print ANSI lines graphic indentation lines.(打印ANSI線圖形壓痕線)
  -S            Print with ASCII graphics indentation lines.(用ASCII圖形縮進行打印)
  -n            Turn colorization off always (-C overrides).(始終關(guān)閉著色(-C覆蓋))
  -C            Turn colorization on always.(始終打開彩色化)
  -P pattern    List only those files that match the pattern given.(只列出與給定模式匹配的文件)
  -I pattern    Do not list files that match the given pattern.(不要列出與給定模式匹配的文件)
  -H baseHREF   Prints out HTML format with baseHREF as top directory.(打印出以baseHREF作為頂部目錄的HTML格式)
  -T string     Replace the default HTML title and H1 header with string.(用字符串替換默認的HTML標題和H1標題)
  -R            Rerun tree when max dir level reached.(當達到最大dir級別時重新運行樹)
  -o file       Output to file instead of stdout.(輸出到文件而不是stdout隆圆。)
  --inodes      Print inode number of each file.(打印每個文件的inode編號)
  --device      Print device ID number to which each file belongs.(打印每個文件所屬的設(shè)備ID號)
  --noreport    Turn off file/directory count at end of tree listing.(在樹列表末尾關(guān)閉文件/目錄計數(shù))
  --nolinks     Turn off hyperlinks in HTML output(關(guān)閉HTML輸出中的超鏈接).
  --dirsfirst   List directories before files.(在文件之前列出目錄)
  --charset X   Use charset X for HTML and indentation line output.(使用charset X作為HTML和縮進行輸出)
  --filelimit # Do not descend dirs with more than # files in them.(不要下載包含超過#文件的dirs)

例如:你想要生成下圖的HTML格式:

輸出HTML文檔格式

• 具體使用,可以訪問http://mama.indstate.edu/users/ice/tree/,此文檔
  缺點:需要你去對下載tree.exe文件格式,并手動復(fù)制到Git\usr\bin目錄下

如果想要忽略某些文件,例如:node_modules或者其他文件,要知道node_modules一般是不要上傳到代碼倉庫中去的,那怎么辦?單純windows這個tree命令就滿足不了我們的需要,上面的方法也是可以解決了的

下面介紹其他一種方式就是npm包管理工具,肯定是能找到的,此方法無論是DOS壞境下還是git終端下,都是可以使用的

基于node的treer

treer是一個生成目錄結(jié)構(gòu)樹的命令行工具

$ npm install --global treer 
# or globally 
$ npm install -g treer 

待安裝完成后,可以用treer --help檢測,如果如下所示:表示treer已經(jīng)安裝完成

D:\公開課\2019\react\myfirstreactapp>treer --help
Usage: index [options]

Options:
  -V, --version          output the version number
  -d, --directory [dir]  Please specify a directory to generate structure tree (default:請指定生成結(jié)構(gòu)的目錄 "D:\\公開課\\2019\\react\\myfirstreactapp")
  -i, --ignore [ig]      You can ignore specific directory name(通過這個參數(shù)可以忽略特定的文件目錄名稱)
  -e, --export [epath]   export into file(輸出制定的文件)
  -h, --help             output usage information 輸出使用文檔信息

• -V 輸出版本號:treer -V

D:\公開課\2019\react\myfirstreactapp>treer -V
1.0.4

• -d 輸出制定的目錄:例如treer -d > 保存文件的名稱,treer -d > result.txt,在當前目錄下,它會將目錄結(jié)構(gòu)保存在result.txt的文件中

D:\公開課\2019\react\myfirstreactapp>treer -d > result.txt
D:\公開課\2019\react\myfirstreactapp>editplus result.txt(注意在命令行下如果沒有進行配置,是不行的翔烁，需要進行壞境變量配置一下的)

• -i 要跳過的目錄名稱模式渺氧，它也支持rege正則,過濾掉制定的目錄結(jié)構(gòu)
• -e 導(dǎo)出到文件中,treer -e 要導(dǎo)出到的指定文件 -i 忽略的目錄 例如:treer -e ./result.txt -i node_modules,要注意treer相對應(yīng)的參數(shù)順序是固定的,不可隨意調(diào)換,不然就違背本意了的
  缺陷:格式固定,參數(shù)順序前后順序不可隨意調(diào)換

D:\公開課\2019\react\myfirstreactapp>treer -e ./result.txt -i node_modules
D:\公開課\2019\react\myfirstreactapp
├─.gitignore
├─package-lock.json
├─package.json
├─README.md
├─test.txt
├─src
|  ├─App.css
|  ├─App.js
|  ├─App.test.js
|  ├─index.css
|  ├─index.js
|  ├─logo.svg
|  ├─serviceWorker.js
|  ├─view
|  |  └home.js
|  ├─components
|  |     └test.txt
├─public
|   ├─favicon.ico
|   ├─index.html
|   └manifest.json


The result has been saved into ./result.txt

當你輸出這個信息的時候,表示目錄結(jié)構(gòu)已經(jīng)成功了,那么接下來你逐行在后面添加對應(yīng)的注釋就可以了的

• -h 輸出幫助信息,treer -h

D:\公開課\2019\react\myfirstreactapp
├─.gitignore ------------------------------ 忽略配置,將本地代碼上傳到代碼倉庫時,要忽略的文件,例如node_modules
├─package-lock.json ----------------------- 項目文件名稱,依賴包,對整個文件的描述，node里面的一些內(nèi)容蹬屹，讓你的項目變成一個node包,腳手架自動生成的文件
├─package.json ---------------------------- 對整個應(yīng)用程序的描述,應(yīng)用名稱,版本號,一些依賴包,以及項目的啟動,打包侣背，測試配置
├─README.md ------------------------------- 說明文檔
├─src ------------------------------------- 這個是我們最應(yīng)該關(guān)注的，開發(fā)過程中最重要的一個目錄,項目所用的所有源代碼
|  ├─App.css ------------------------------ App應(yīng)用組件的樣式
|  ├─App.js ------------------------------- App應(yīng)用組件的邏輯代碼,構(gòu)成一個react組件的基本組成部分
|  ├─App.test.js -------------------------- App自動化測試文件
|  ├─index.css ---------------------------- 首頁index的樣式
|  ├─index.js ----------------------------- 整個程序運行的入口文件
|  ├─logo.svg ----------------------------- 圖標,資源
|  ├─serviceWorker.js --------------------- 引入這個是為了幫助我們借助網(wǎng)頁去寫手機app應(yīng)用這樣的一個功能,如果上傳到https協(xié)議的服務(wù)器上,在斷網(wǎng)的情況下,依然可以看到之前的頁面
|  ├─view
|  |  └home.js
|  ├─components
|  |     └test.txt
├─public ---------------------------------- 公共部分
|   ├─favicon.ico ------------------------- icon圖標
|   ├─index.html -------------------------- 主頁面,首頁的模板
|   └manifest.json ------------------------ 定義成app應(yīng)用的方式來使用,快捷方式的圖標,可以配置icons慨默，定義快捷方式的圖標,定義快捷方式跳轉(zhuǎn)的網(wǎng)址到哪里,主題顏色

具體詳細使用文檔可見: https://www.npmjs.com/package/treer

基于tree-node-cli

類似樹的格式列出目錄的內(nèi)容贩耐，類似于Linux樹命令。提供了CLI和Node API

安裝:

npm install -g tree-node-cli
或者
npm install --global tree-node-cli

tree的命令使用幫助文檔:當你在終端下輸入tree --help時,終端下就會輸出tree命令使用的一些參數(shù)

itclancode@LAPTOP-1CS413BU MINGW64 /d/公開課/2019/react/myfirstreactapp
$ tree --help
Usage: tree [options]

Options:
  -V, --version             output the version number
  -a, --all-files           All files, include hidden files, are printed.
  --dirs-first              List directories before files.
  -d, --dirs-only           List directories only.
  -I, --exclude [patterns]  Exclude files that match the pattern. | separates alternate patterns. Wrap your entire pattern in double quotes. E.g. `"node_modules|coverage".
  -L, --max-depth <n>       Max display depth of the directory tree.
  -r, --reverse             Sort the output in reverse alphabetic order.
  -F, --trailing-slash      Append a '/' for directories.
  -h, --help                output usage information

• tree -L n 顯示項目的層級厦取。n表示層級數(shù)潮太。比如你想要顯示項目的2層結(jié)構(gòu)，可以用tree -l 2
• tree -I pattern 用于過濾不想要顯示的文件或者文件夾。比如你想要過濾項目中的node_modules文件夾铡买，可以使用tree -I "node_modules",如果想要過濾多個目錄文件,也可以tree -I "node_modules|public|test_*",最后一個使用到正則匹配更鲁，這樣以test_開頭的文件夾都不會被顯示出來,目錄與目錄之間用豎線隔開,中間不要有空格
• tree > tree.md 將項目結(jié)構(gòu)輸出到tree.md這個文件與在windows DOS的tree命令是一樣的,但是在DOS終端下無法使用類似linux下的一些參數(shù),進行過濾操作

如果我們要顯示某個項目下2層的所有文件結(jié)構(gòu)，同時又過濾node_modules文件夾,你可以這么寫
tree -L 2 -I "要過濾的文件名",注意根據(jù)文檔的參數(shù),這是區(qū)分大小寫的,而且要過濾的文件名必須得用雙引號或者單引號包裹起來,在linux命令行里,參數(shù)的大小寫含義是有別的,上面文檔的參數(shù)是什么,就應(yīng)該是什么的,這點與windows是不一樣的,Windows下的dos命令是不區(qū)分大小寫的

$ tree -L 2 -I "node_modules"
myfirstreactapp
├── DOS使用文檔.txt.bak
├── package-lock.json
├── package.json
├── public
│   ├── favicon.ico
│   ├── index.html
│   └── manifest.json
├── README.md
└── src
    ├── App.css
    ├── App.js
    ├── App.test.js
    ├── components
    ├── index.css
    ├── index.js
    ├── logo.svg
    ├── serviceWorker.js
    └── view

最后輸出到tree.md奇钞，可以這么寫

tree -L 3 -I "node_modules" > tree.md

結(jié)果顯示如下:

$ cat tree.md
myfirstreactapp
├── DOS使用文檔.txt.bak
├── package-lock.json
├── package.json
├── public
│   ├── favicon.ico
│   ├── index.html
│   └── manifest.json
├── README.md
├── src
│   ├── App.css
│   ├── App.js
│   ├── App.test.js
│   ├── components
│   │   └── test.txt
│   ├── index.css
│   ├── index.js
│   ├── logo.svg
│   ├── serviceWorker.js
│   └── view
│       └── home.js
└── tree.md

缺點:依賴node,得裝tree-node-cli工具

基于tree-cli

注意:如果你之前安裝了tree-node-cli,而現(xiàn)在又繼續(xù)安裝tree-cli,現(xiàn)在安裝的會覆蓋之前安裝的,避免命令的沖突,可以先卸載之前的tree-node-cli,使用的命令是:npm uninstall -g tree-node-cli,反過來也是一樣
功能:以樹狀格式列出目錄的內(nèi)容澡为。

Tree-cli是一個遞歸目錄列表程序，它生成文件的深度縮進列表景埃。在沒有參數(shù)的情況下媒至，tree列出當前目錄中的文件。當給定目錄參數(shù)時纠亚，tree依次列出在給定目錄中找到的所有文件和/或目錄塘慕。完成列出所有找到的文件/目錄后筋夏，tree返回列出的文件和/或目錄的總數(shù)

安裝: npm install -g tree-cli

使用:使用命令樹tree(在DOS命令下,這是個系統(tǒng)命令,功能有限,在git bash就無所謂了的)或者用treee(避免與系統(tǒng)命令發(fā)生沖突) 并使用treee --help查看幫助文檔

使用選項自定義輸出：將當前目錄向下顯示3層級,并輸出到out.txt文件中

tree -l 3 -o out.txt -d

tree或者treee的使用文檔

itclancode@LAPTOP-1CS413BU MINGW64 /d/公開課/2019/react/myfirstreactapp
$ treee --help

  List contents of directories in tree-like format.

  tree - list contents of directories in tree-like format

  Tree is a recursive directory listing program that
  produces a depth indented listing of files.
  With no arguments, tree lists the files in the
  current directory. When directory arguments are
  given, tree lists all the files and/or directories
  found in the given directories each in turn. Upon
  completion of listing all files/directories found,
  tree returns the total number of files and/or
  directories listed.

  USAGE

    tree <options>

  OPTIONS:

  --help
    outputs a verbose usage listing.
  --version
    outputs the version of tree-cli.
  --debug
    show debug info.
  --ignore
    ignores directory or file you specify.
  --fullpath
    prints the full path prefix for each file.
  --noreport
    omits printing of the file and directory report at the
    end of the tree listing and omits printing the tree on
    console.
  -a
    all files are printed. By default tree does not print
    hidden files (those beginning with a dot '.'). In no
    event does tree print the file system constructs '.'
    (current directory) and '..' (previous directory).
  -d
    list directories only.
  -f
    append a '/' for directories, a '=' for socket files
    and a '|' for FIFOs
  -i
    makes tree not print the indentation lines, useful
    when used in conjunction with the -f option.
  -l
    max display depth of the directory tree.
  -o
    send output to filename.

  EXAMPLE:

  $ tree

  $ tree -l 2, -o out.txt --ignore [node_modules, test] -d --noreport

根據(jù)文檔,各個參數(shù)一目了然,可以多試試的,多折騰的

此時你可以把你整理好的readme文檔更改提交到代碼倉庫當中了,然而當你發(fā)現(xiàn)把生成號的目錄結(jié)構(gòu)上傳到github或者公司的gitlab項目上,你會發(fā)現(xiàn),生成的目錄結(jié)構(gòu)并沒有如本地的一樣,以樹狀圖展示的,而是擠在一塊的

非常粗暴的解決辦法就是:把目錄結(jié)構(gòu)用反引號給包裹起來,對于使用過markdown語法的童鞋來說,是不會陌生的

總結(jié)

介紹到這里:關(guān)于使用tree生成目錄結(jié)構(gòu)相關(guān)的方法就已經(jīng)介紹完了的,各種方法沒有優(yōu)劣之分,選擇一種適合自己的方式就可以了,無論是windows DOS還是git bash中操作,個人覺得都是有必要掌握的

當你想要瀏覽項目結(jié)構(gòu)時,這個命令還是挺有用的,歸納一下,展示目錄結(jié)構(gòu)有如下幾種方式

• windows自帶的tree命令,能展示目錄結(jié)構(gòu),但是功能有限
• 下載tree.exe程序,可在git中使用
• treer,tree-node-cli,tree-cli的使用
  在windows中將tree命令加入git-bash中
• tree軟件下載鏈接:https://pan.baidu.com/s/1LJcYidHkfPbKuxZCGVIvxw 提取碼：tk4q
• tree視頻下載:tree視頻下載鏈接 https://pan.baidu.com/s/1Pg_B4R1nD1zsIzR6fBUYXA 提取碼：0y2d