打造高效前端工作環境 - tmux

前言

 現在前端開發可不容易啊，先打開個VIM，然后再打開個lite-server，一不小心寫個ES2015還要打開個gulp來做預編譯，如果能把這么多個窗口放在一個工作臺上那就好了。咦，tmux不就專干這事的嗎？

tmux入門

安裝sudo apt install tmux

tmux的C/S架構

服務端(Server), 1個服務端維護1～N個會話;
會話(Session), 1個會話對應1~N個窗口;
窗口(Window), 1個窗口對應1~N個窗格;
窗格(Pane)，vim、bash等具體任務就是在窗格中執行。

1.進入tmux
 在shell中執行tmux就會自動創建一個匿名會話、窗口和窗格，而窗格內正在運行著另一個shell程序，這時我們可以像平常使用shell一樣來工作。而tmux真正的威力在于對會話、窗口和窗格的管理，但在此之前我們要先了解開啟魔法的閥門——快捷鍵前綴(prefix)。

2.快捷鍵前綴(prefix)
 tmux為使自身的快捷鍵和其他軟件的快捷鍵互不干擾，特意提供一個快捷鍵前綴,默認為Ctrl+b。因此當我們輸入任何tmux快捷鍵前必須先輸入Ctrl+b。
 由于快捷鍵前綴是可以重置的，因此后文將以<prefix>來指代快捷鍵前綴。

3.操作Pane
創建(通過分割當前pane實現)
<prefix> ",水平分割當前pane
<prefix> %,垂直分割當前pane
關閉
<prefix> x,刪除當前pane
跳轉
<prefix> <up-arrow>/<down-arrow>/<left-arrow>/<right-arrow>, 通過上下左右方向鍵跳轉到對應的pane
<prefix> ;,跳轉到上次激活的pane
<prefix> o,跳轉到下一個pane
<prefix> q,顯示各pane的編號，并輸入編號跳轉到對應的pane
修改尺寸
<prefix>+alt+<up-arrow>/<down-arrow>/<left-arrow>/<right-arrow>, 通過上下左右方向修改當前pane的高寬
縮放
<prefix> z,縮放當前pane
其他
<prefix> {,將當前pane移動到最左邊
<prefix> },將當前pane移動到最右邊
<prefix> !,將當前pane轉變成window

4.操作Windoiw
創建
<prefix> c,創建window
重命名
<prefix> ,,重命名當前window
注意：由于tmux默認會根據當前pane執行的程序來改變window名稱，因此需要在~/.tmux.conf中加入set-option -g allow-rename off來固化window名稱。
關閉
<prefix> &,關閉當前window
跳轉
<prefix> n,跳轉到下一個window
<prefix> p,跳轉到上一個window
<prefix> 0...9,跳轉到對應的window
其他
<prefix> :swap-window -s 2 -t 1, 調轉編號為2和1的兩個window的次序
5.操作Session
<prefix> s,顯示所有會話
<prefix> $,重命名
<prefix> d,脫離當前會話
<prefix> :kill-session,關閉當前會話
<prefix> (,跳轉到上一個會話
<prefix> ),跳轉到下一個會話

tmux進階

1.細摳Session操作
 我們為前端開發環境和后端開發環境分別創建兩個Session來獨立管理，那么我們就可以靈活地在兩個Session間穿梭，并且可以分別和前端、后端開發人員協同工作，下面我們看看相關的命令吧。
$ tmux 或 <prefix> :new, 創建匿名Session
$ tmux new -s mysession 或 <prefix> :new -s mysession, 創建名為mysession的Session
$ tmux kill-session -t mysession,關閉mysession會話
$ tmux kill-session -a,關閉所有會話
$ tmux ls,顯示所有會話信息
$ tmux a,附加到最近一個會話
$ tmux a -t mysession,附加到會話mysession

2.多個panes輸入同步
<prefix> + :setw synchronize-panes

 這個功能在通過ssh維護多臺服務器時十分有用！

3.復制粘貼
 通過tmux我們可以通過純鍵盤操作實現跨pane的復制粘貼。首先在~/.tmux.conf文件中添加setw -g mode-keys vi，啟用vi鍵盤方式(hjkl方向鍵,/?nN搜索)操作buffer內容。
進入復制模式,<prefix> [
開始選擇,<Spacebar>
選擇結束并將內容復制到新的buffer,<Enter>
取消選擇,<Esc>
從buffer_0粘貼到光標位置，<prefix> ]
 可見復制的內容均暫存在buffer中，而tmux也提供直接操作buffer的命令給我們.
<prefix> : show-buffer，顯示buffer_0的內容
<prefix> : capture-pane, 保存當前pane的內容
<prefix> : list-buffers, 顯示所有buffer內容
<prefix> : choose-buffer, 選擇buffer并粘貼
<prefix> : save-buffer buf.txt, 保存buffer內容到but.txt
<prefix> : delete-buffer -b 1, 刪除buffer_1的內容

4.美化狀態欄
 默認的tmux樣式有點丑，而https://github.com/gpakosz/.tmux這個配置則為我們提供漂亮狀態欄.

深入Layout

內置Layout

 tmux為我們內置了5種布局類型
even-horizontal，從左至右平均分布所有pane
even-vertical，從上至下平均分布所有pane
main-horizontal，最上方的pane為主工作區，其余pane位于最下方且從左至右排列
main-vertical，最左邊的pane為主工作區，其余pane位于最右邊且從上至下排列
tiled，從上至下，從左至右平均分布所有pane
 對于main-horizontal和main-vertical布局而言，我們還可以設置主工作區的尺寸

# .tmux.conf
set-window-option -g main-pane-width 100
set-window-option -g main-pane-height 100

自定義Layout

 其實更多的時候，我們工作區的布局遠比內置的復雜。如下左上角為編輯區，右上角為UnitTest回顯，最下面是REPL。
 這時我們就要先調整好window內所有pane的尺寸，然后脫離當前session，獲取當前window的布局信息了。

tmux list-windows

將最后一個]前的內容復制到tmuxinator的yml配置中的layout那，注意pane數量要和layout的布局信息數據一致。

總結

 尊重原創，轉載請注明來自：http://www.cnblogs.com/fsjohnhuang/p/6057050.html ^_^肥仔John