打造高效前端工作環境 tmuxinator

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

安裝gem

$ sudo apt install gem

$ gem sources --remove --add

確保gem的源有且僅有

$ gem sources -l

安裝tmuxinator

$ gem install tmuxinator

$ if [[ $shell == *fish* ]];then pushd ~/.config/fish/completions/; else pushd ~/.tmuxinator/; fi &&
curl -o " $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

示例:

$ 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或mux s

示例:

$ mux demo

然後tmuxinator就會建立乙個tmux會話,並根據剛才編輯的配置檔案建立視窗和窗格

3.關閉專案(i.e.根據專案配置關閉tmux會話),mux st

示例:在tmux某個shell中輸入

$ mux st demo

4.編輯專案配置,mux e或mux o

5.檢視現有專案配置,mux l

6.刪除專案(i.e.刪除現有專案配置),mux d *

7.修改專案配置名稱,mux c

1.專案配置檔案路徑隨心玩

眼利的同學可能會發現當我們輸入mux n demo後建立的配置檔案首行為# ~/.tmuxinator/demo.yml，這個正是demo這個專案配置檔案的路徑。也就是說預設情況下專案配置將儲存在~/.tmuxinator/下，並以專案名稱.yml作為檔名。這樣我們就能在任意目錄下通過命令mux開啟專案了。

但一旦誤刪了專案配置那麼就要重新設定了，能不能把它也挪到專案中通過版本管理器(git etc.)作保障呢？必須可以的哦！

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

$ 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

打造高效前端工作環境 tmuxinator

打造高效前端工作環境 tmuxinator

ubuntu工作環境配置

linux工作環境搭建

打造高效前端工作環境 tmuxinator

打造高效前端工作環境 tmuxinator

ubuntu工作環境配置

linux工作環境搭建

相關推薦