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

前言

 雖然tmux能讓我們方便組織工作環境，但每次重新開啟對談時都需要手動重新建立視窗、窗格和執行各種程式，能不能像VS那樣以工程為單位儲存視窗、窗格和各種所需執行的程式的資訊呢？tmuxinator恰恰能解決我們這個需求！

安裝與設定

 安裝gem

$ sudo apt install gem
$ gem sources --remove https://rubygems.org --add http://gems.ruby-china.org/

 確保gem的源有且僅有http://gems.ruby-china.org/

$ gem sources -l

 安裝Tmuxinator

$ gem install tmuxinator

 設定別名mux和tmuxinator子命令智慧補全
自動根據使用的shell(bash,zsh,fish)下載設定指令碼，並啟用設定。

$ if [[ $SHELL == *fish* ]];then pushd ~/.config/fish/completions/; else pushd ~/.tmuxinator/; fi &&
curl -O "https://raw.githubusercontent.com/tmuxinator/tmuxinator/master/completion/tmuxinator.$(basename $SHELL)" &&
popd &&
if [[ $SHELL != *fish* ]];then echo "source ~/.tmuxinator/tmuxinator.$(basename $SHELL)" >> ~/.$(basename $SHELL)rc; fi &&
if [ -z $EDITOR ];then echo "export EDITOR='vim'" >> ~/.$(basename $SHELL)rc; fi &&
source ~/.$(basename $SHELL)rc

入門

1.建立並編輯專案設定,mux n <project_name>
範例:

$ mux n demo

然後進入專案設定編輯介面

# ~/.tmuxinator/demo.yml
# 預設設定
name: demo #專案(設定)名稱,不要包含句號
root: ~/   #專案的根目錄，作為後續各命令的當前工作目錄使用

windows:
    - editor: # 設定名稱為editor的視窗
            layout: main-vertical # 由於editor下存在多個窗格，因此需要layout可以設定佈局(5個預設值even-horizontal,even-vertical,main-horizontal,main-vertical,tiled)
            panes:
                - vim # 設定一個窗格執行vim
                - guard # 設定另一個窗格執行guard
    - server: bundle exec rails s # 設定名稱為server的視窗, 且僅有一個執行bundle exec rail s的窗格
    - logs: tail -f log/development.log # 設定名稱為logs的視窗, 且僅有一個執行tail -f log/development.lgo的窗格

根據修改設定得到如下

# ~/.tmuxinator/demo.yml
name: demo
root: ~/repos/demo/
pre_window: nvm use 4

windows:
    - editor: vim index.html
    - server: npm run dev
    - stats:
            layout: even-horizontal
            panes:
                - npm run watch:html
                - npm run watch:css
                - npm run watch:js
    - note:
            root: ~/repos/note/ # 可在視窗下通過root來設定該視窗下各命令的當前工作目錄
            panes:
                - vim pugjs.md

然後儲存檔案就OK了！

2.開啟專案(i.e.根據專案設定啟動tmux對談),mux <project_name>或mux s <project_name>
範例:

$ mux demo

然後tmuxinator就會建立一個tmux對談,並根據剛才編輯的組態檔建立視窗和窗格

3.關閉專案(i.e.根據專案設定關閉tmux對談),mux st <project_name>
範例:在tmux某個shell中輸入

$ mux st demo

4.編輯專案設定,mux e <project_name> 或 mux o <project_name>
5.檢視現有專案設定,mux l
6.刪除專案(i.e.刪除現有專案設定),mux d <project_name> [<project_name>]*
7.修改專案設定名稱,mux c <old_project_name> <new_project_name>

進階

1.專案組態檔路徑隨心玩
 眼利的同學可能會發現當我們輸入mux n demo後建立的組態檔首行為# ~/.tmuxinator/demo.yml，這個正是demo這個專案組態檔的路徑。也就是說預設情況下專案設定將儲存在~/.tmuxinator/下，並以專案名稱.yml作為檔名。這樣我們就能在任意目錄下通過命令mux <project_name>開啟專案了。
 但一旦誤刪了專案設定那麼就要重新設定了，能不能把它也挪到專案中通過版本管理器(git etc.)作保障呢？必須可以的哦！

# 假設專案目錄為~/repos/demo/
$ mv ~/.tmuxinator/demo.yml ~/repos/demo/.tmuxinator.yml &&
ln -s ~/repos/demo/.tmuxinator.yml ~/.tmuxinator/demo.yml

 那麼除了通過mux <project_name>外，當pwd為專案目錄時，直接輸入mux也會開啟當前專案。而且可以通過mux的其他命令來管理專案組態檔。
 當下次從版本管理器下載專案後，直接執行

$ ln -s ~/repos/demo/.tmuxinator.yml ~/.tmuxinator/demo.yml

2.引入變數到專案組態檔中
 引數形式

# ~/.tmuxinator/demo.yml
name: demo
root: ~/<%= @args[0] %>

.........

呼叫mux demo args0 args1
 鍵值對形式

# ~/.tmuxinator/demo.yml
name: demo
root: ~/<%= @settings["ws"] %>

.........

呼叫mux demo ws="repos/demo/"
 環境變數

# ~/.tmuxinator/demo.yml
name: demo
root: ~/<%= ENV["ws"] %>

.........

呼叫set $ws="repos/demo/" && mux demo

3.設定開發環境上下文
 在專案組態檔中加入pre_window設定項。
範例:

name: demo
root: ~/repos/demo
pre_window: nvm use 4

本文永久更新連結地址：http://www.linuxidc.com/Linux/2016-11/137232.htm