用 tmux 与 tmuxinator 打造开发工作流

0x00. 前言

本文就我最近开发的一个前后端的项目（名字叫做 yavueblog) 来简单介绍两个神器

一个是 tmux
一个是 tmuxinator

我在开发这个前后端的项目的时候要开启要通过不少的命令来启动服务：

（前端开发）运行 npm run dev 进行开发前端页面
（前端开发）运行 npm run dev:theme , 当主题的 SCSS 发生变化的同时，编译 SCSS
（前端开发）运行 npm run dev:iconfont, 当移入了新的 svg 图标的时候，自动构建出新的字体文件与 iconfont.css 。
（后端开发）运行 make dockerup 中开启 Django 应用。启动 Django 服务，PostgreSQL 数据库，Redis 等等，

我的日常任务如下如下：

一键启动这些脚本，前两个任务，放在第一个终端。
后面两个任务放在第二、三个终端里。

以前的做法都是新建三个终端选项卡，然后第一个终端分两屏，然后分别到各个终端 cd 或者 autojump 到对应的目录，然后手动运行命令。

加上运行 npm run dev:theme 的时候，我是通过 Python 的 watchdog 来实现对指定目录和指定类型文件的变化进行监听的，所以还要切换 PyEnv 自定义的 Python 的环境中。

这些命令反反复复输入还是挺麻烦的事情，为何不用工具来解决呢？

0x01 tmux + tmuxinator

先安装

brew install tmux
brew install ruby
gem install tmuxinator

什么是 tmux? 简单而言，就是一个终端复用软件。什么是 tmuxinator? 简单而言，就是为了简化 tmux 操作的软件。只需要编写 yaml 即快速开启一个比较适合你的终端窗口布局。

关于 tmux 的配置，推荐这个 repo

https://github.com/gpakosz/.tmux

0x02 编写 Tmuxinator 配置文件

输入 tmuxinator new yavueblog

修改文件如下

# ~/.tmuxinator/yavueblog.yml

name: yavueblog
root: ~/Codes/PublicRepos/YaBlogSystem/

# Optional tmux socket
# socket_name: foo

# Runs before everything. Use it to start daemons etc.
# pre: sudo /etc/rc.d/mysqld start

# Runs in each window and pane before window/pane specific commands. Useful for setting up interpreter versions.
pre_window: pyenv activate 3.5.2/envs/py3-daily

windows:
  - "网站开发":
      layout: main-vertical
      # Synchronize all panes of this window, can be enabled before or after the pane commands run.
      # 'before' represents legacy functionality and will be deprecated in a future release, in favour of 'after'
      # synchronize: after
      panes:
        - "cd ./YaVueBlog/ && npm run dev"
        - "cd ./YaVueBlog/ && npm run dev:theme"
  - "iconfont 构建": "cd ./YaVueBlog/ && npm run dev:iconfont"
  - "DockerizedDjango": "cd ./YaDjangoBlog/ && make docker-compose-build-up"

这样的话，每次开发就只需要运行 tmuxinator start yavueblog，并且打开 IDE 直接捋起袖子就是干就好了。

0x03 玩 tmux 首先要掌握的三个小技巧

如果你刚用 tmux 的话，火速掌握下面三个小技巧。要不然会抓狂的。

切换终端

c-b + 数字
c-b + n

滚屏

https://superuser.com/questions/209437/how-do-i-scroll-in-tmux

复制文字

https://superuser.com/questions/196060/selecting-text-in-tmux-copy-mode

0xEE 参考链接

我的 Github

ChangeLog:

2017-03-08 09:33:37 重新润饰文字，弃用 Rails 开发一年。现在主 DjangoRestFrameWork+VueJS
2018-01-28 11:44:00 重修文字，适配本文