打造高效前端工作環境-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