使用tree生成目錄樹結構

時間  2019-11-16
標籤 使用 tree 生成 目錄樹 結構 简体版
原文   原文鏈接

前言

有時候,當你完成一個項目後,想要展現這個項目的目錄結構(以下圖所示),對該項目進行文檔描述性說明,用於解釋其項目中各個目錄以及文件表明的含義,這樣便於本身和後來的同窗理解,在實際開發中,對於接收毫無文檔說明的project,是很是痛苦的,一份好的readme文檔也是很是重要的,那怎麼辦?逐行手寫?固然不是,接下來,一步一步帶你見證奇蹟css

戳連接,使用tree生成目錄樹結構,內有視頻html

使用tree生成的目錄結構

使用DOS中的tree命令

人用迭代,神用遞歸,其實說的是本身調用本身,而這個tree命令就是用遞歸寫的node

tree是dos的一個命令react

功能:以圖形的方式現實應用程序或者路徑的目錄結構linux

對於tree命令在windows壞境下的使用的,執行help命令,而後**tree /?**,其餘windows的dos命令也是如此git

官方解釋:Tree是一個遞歸目錄列表程序，它生成一個深度縮進的文件列表。給出目錄參數時，樹會列出給定目錄中找到的全部文件和/或目錄程序員

缺陷:在windows DOS終端下,tree對應的參數功能有限,沒法過濾特定的文件,並且在git bash終端下此命令卻沒法使用,若是要使用,特用特定的方法,後文中提供了具體的解決方法 tree命令使用:github

D:\公開課\2019\react\myfirstreactapp>tree /?
以圖形顯示驅動器或路徑的文件夾結構。

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

   /F   顯示每一個文件夾中文件的名稱。
   /A   使用 ASCII 字符，而不使用擴展字符(會把當前目錄下的結構給展出來)。
TREE [drive:][path] [/F] [/A]
複製代碼

當你在當前目錄下使用tree /F或者tree /a 這兩個命令時,你會發現,它會把全部文件目錄結構都給你打印出來 使用tree /f,以下所示:npm

│  │      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,以下所示json

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
複製代碼

若是你此時想要把目錄結構保存到一個文件裏,能夠用以下方式:

tree /f > 指定輸出的文件(通常爲txt格式或者readme文檔)
複製代碼
tree /f > list.txt
複製代碼

固然你也能夠在窗口裏,手動複製結果,而後,新建一個文件,把輸出的結果粘貼進去,也不是不能夠,可是你要知道,程序員哥哥是很懶的,我的強烈推薦使用命令行方式去自動化操做

注意:tree命令是Windows下的一個命令,在linux下或者git命令行工具裏,卻沒法使用,不支持tree,然而若是想要支持怎麼辦?

  • 下載tree,並下載請下載Binaries版本(gnuwin32.sourceforge.net/packages/tr…),以下圖所示
    下載binaries文件
  • 添加tree,將下載文件解壓bin/目錄下的 tree.exe 複製到 git/usr/bin 目錄中,以下圖所示:

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

如下是tree命令在git命令行中使用文檔: 此用法只在git bash中是有效,在DOS終端下,使用tree命令仍然是系統的提供的用法,此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.(打印每一個文件的字節大小) -h Print the size in a more human readable way.(以更容易被人閱讀的方式打印尺寸) -D Print the date of last modification.(打印上次修改的日期) -F Appends '/', '=', '*', or '|' as per ls -F.(根據ls -F添加'/'、'='、'*'或'|'。) -v Sort files alphanumerically by version.(按版本對文件進行字母數字排序) -r Sort files in reverse alphanumeric order.(按字母數字倒序排列文件。) -t Sort files by last modification time.(按上次修改時間排序文件) -x Stay on current filesystem only.(只保留當前文件系統) -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).(始終關閉着色(-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.(打印每一個文件所屬的設備ID號) --noreport Turn off file/directory count at end of tree listing.(在樹列表末尾關閉文件/目錄計數) --nolinks Turn off hyperlinks in HTML output(關閉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文檔格式
使用以下命令: tree -C -L 3 -T "歡迎關注微信itclanCoder公衆號" -H "http://mama.indstate.edu/users/ice/00Tree.html" -I "node_modules" --charset=gbk -o ooTree.html 對照上面的tree命令參數的含義,不難理解上面的命令的含義 用tree命令,生成的一個目錄樹結構:(-C)始終打開彩色化, -L 3(向下深刻3層級目錄) -T(用字符串替換默認的HTML標題和H1標題),-I(忽略node_modules) --charser=gbk(設置HTML輸出編碼格式,這裏設置gbk,中文的話，就會是亂碼的,通常都是utf-8), -o(指定輸出目錄) 以上就是git版在tree使用命令的參數

  • 具體使用,能夠訪問http://mama.indstate.edu/users/ice/tree/,此文檔 缺點:須要你去對下載tree.exe文件格式,並手動複製到Git\usr\bin目錄下

若是想要忽略某些文件,例如:node_modules或者其餘文件,要知道node_modules通常是不要上傳到代碼倉庫中去的,那怎麼辦?單純windows這個tree命令就知足不了咱們的須要,上面的方法也是能夠解決了的

下面介紹其餘一種方式就是npm包管理工具,確定是能找到的,此方法不管是DOS壞境下仍是git終端下,都是可使用的

基於node的treer

treer是一個生成目錄結構樹的命令行工具

$ npm install --global treer 
# or globally 
$ npm install -g treer 
複製代碼

待安裝完成後,能夠用treer --help檢測,若是以下所示:表示treer已經安裝完成

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:請指定生成結構的目錄 "D:\\公開課\\2019\\react\\myfirstreactapp")
  -i, --ignore [ig]      You can ignore specific directory name(經過這個參數能夠忽略特定的文件目錄名稱)
  -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,在當前目錄下,它會將目錄結構保存在result.txt的文件中
D:\公開課\2019\react\myfirstreactapp>treer -d > result.txt
D:\公開課\2019\react\myfirstreactapp>editplus result.txt(注意在命令行下若是沒有進行配置,是不行的，須要進行壞境變量配置一下的)

複製代碼
  • -i 要跳過的目錄名稱模式，它也支持rege正則,過濾掉制定的目錄結構
  • -e 導出到文件中,treer -e 要導出到的指定文件 -i 忽略的目錄 例如:treer -e ./result.txt -i node_modules,要注意treer相對應的參數順序是固定的,不可隨意調換,否則就違背本意了的 缺陷:格式固定,參數順序先後順序不可隨意調換
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
複製代碼

當你輸出這個信息的時候,表示目錄結構已經成功了,那麼接下來你逐行在後面添加對應的註釋就能夠了的

  • -h 輸出幫助信息,treer -h
D:\公開課\2019\react\myfirstreactapp
├─.gitignore ------------------------------ 忽略配置,將本地代碼上傳到代碼倉庫時,要忽略的文件,例如node_modules
├─package-lock.json ----------------------- 項目文件名稱,依賴包,對整個文件的描述，node裏面的一些內容，讓你的項目變成一個node包,腳手架自動生成的文件
├─package.json ---------------------------- 對整個應用程序的描述,應用名稱,版本號,一些依賴包,以及項目的啓動,打包，測試配置
├─README.md ------------------------------- 說明文檔
├─src ------------------------------------- 這個是咱們最應該關注的，開發過程當中最重要的一個目錄,項目所用的全部源代碼
|  ├─App.css ------------------------------ App應用組件的樣式
|  ├─App.js ------------------------------- App應用組件的邏輯代碼,構成一個react組件的基本組成部分
|  ├─App.test.js -------------------------- App自動化測試文件
|  ├─index.css ---------------------------- 首頁index的樣式
|  ├─index.js ----------------------------- 整個程序運行的入口文件
|  ├─logo.svg ----------------------------- 圖標,資源
|  ├─serviceWorker.js --------------------- 引入這個是爲了幫助咱們藉助網頁去寫手機app應用這樣的一個功能,若是上傳到https協議的服務器上,在斷網的狀況下,依然能夠看到以前的頁面
|  ├─view
|  |  └home.js
|  ├─components
|  |     └test.txt
├─public ---------------------------------- 公共部分
|   ├─favicon.ico ------------------------- icon圖標
|   ├─index.html -------------------------- 主頁面,首頁的模板
|   └manifest.json ------------------------ 定義成app應用的方式來使用,快捷方式的圖標,能夠配置icons，定義快捷方式的圖標,定義快捷方式跳轉的網址到哪裏,主題顏色
複製代碼

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

基於tree-node-cli

相似樹的格式列出目錄的內容，相似於Linux樹命令。提供了CLI和Node API 安裝:

npm install -g tree-node-cli
或者
npm install --global tree-node-cli
複製代碼

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

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表示層級數。好比你想要顯示項目的2層結構，能夠用tree -l 2
  • tree -I pattern 用於過濾不想要顯示的文件或者文件夾。好比你想要過濾項目中的node_modules文件夾，可使用tree -I "node_modules",若是想要過濾多個目錄文件,也能夠tree -I "node_modules|public|test_*",最後一個使用到正則匹配，這樣以test_開頭的文件夾都不會被顯示出來,目錄與目錄之間用豎線隔開,中間不要有空格
  • tree > tree.md 將項目結構輸出到tree.md這個文件與在windows DOS的tree命令是同樣的,可是在DOS終端下沒法使用相似linux下的一些參數,進行過濾操做

若是咱們要顯示某個項目下2層的全部文件結構，同時又過濾node_modules文件夾,你能夠這麼寫 tree -L 2 -I "要過濾的文件名",注意根據文檔的參數,這是區分大小寫的,並且要過濾的文件名必須得用雙引號或者單引號包裹起來,在linux命令行裏,參數的大小寫含義是有別的,上面文檔的參數是什麼,就應該是什麼的,這點與windows是不同的,Windows下的dos命令是不區分大小寫的

$ 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
複製代碼

結果顯示以下:

$ 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,而如今又繼續安裝tree-cli,如今安裝的會覆蓋以前安裝的,避免命令的衝突,能夠先卸載以前的tree-node-cli,使用的命令是:npm uninstall -g tree-node-cli,反過來也是同樣 功能:以樹狀格式列出目錄的內容。

Tree-cli是一個遞歸目錄列表程序，它生成文件的深度縮進列表。在沒有參數的狀況下，tree列出當前目錄中的文件。當給定目錄參數時，tree依次列出在給定目錄中找到的全部文件和/或目錄。完成列出全部找到的文件/目錄後，tree返回列出的文件和/或目錄的總數 安裝: npm install -g tree-cli 使用:使用命令樹tree(在DOS命令下,這是個系統命令,功能有限,在git bash就無所謂了的)或者用treee(避免與系統命令發生衝突) 並使用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

複製代碼

根據文檔,各個參數一目瞭然,能夠多試試的,多折騰的

此時你能夠把你整理好的readme文檔更改提交到代碼倉庫當中了,然而當你發現把生成號的目錄結構上傳到github或者公司的gitlab項目上,你會發現,生成的目錄結構並無如本地的同樣,以樹狀圖展現的,而是擠在一塊的

很是粗暴的解決辦法就是:把目錄結構用反引號給包裹起來,對於使用過markdown語法的童鞋來講,是不會陌生的

總結

介紹到這裏:關於使用tree生成目錄結構相關的方法就已經介紹完了的,各類方法沒有優劣之分,選擇一種適合本身的方式就能夠了,不管是windows DOS仍是git bash中操做,我的以爲都是有必要掌握的

當你想要瀏覽項目結構時,這個命令仍是挺有用的,概括一下,展現目錄結構有以下幾種方式

  • windows自帶的tree命令,能展現目錄結構,可是功能有限
  • 下載tree.exe程序,可在git中使用
  • treer,tree-node-cli,tree-cli的使用 在windows中將tree命令加入git-bash中
  • tree軟件下載連接:pan.baidu.com/s/1LJcYidHk… 提取碼：tk4q
  • tree視頻下載:tree視頻下載連接 pan.baidu.com/s/1Pg_B4R1n… 提取碼：0y2d
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程