打造linux办公环境,打造高效前端工作环境-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

示例:

$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

那么除了通过mux 外，当pwd为项目目录时，直接输入mux也会打开当前项目。而且可以通过mux的其他命令来管理项目配置文件。

当下次从版本管理器下载项目后，直接执行

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

2.引入变量到项目配置文件中

参数形式

# ~/.tmuxinator/demo.yml

name: demo

root: ~/

.........

调用mux demo args0 args1

键值对形式

# ~/.tmuxinator/demo.yml

name: demo

root: ~/

.........

调用mux demo ws="repos/demo/"

环境变量

# ~/.tmuxinator/demo.yml

name: demo

root: ~/

.........

调用set $ws="repos/demo/" && mux demo

3.设置开发环境上下文

在项目配置文件中加入pre_window配置项。

示例:

name: demo

root: ~/repos/demo

pre_window: nvm use 4