用 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 等等，

个人平常任务以下以下：

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

之前的作法都是新建三个终端选项卡，而后第一个终端分两屏，而后分别到各个终端 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 的话，火速掌握下面三个小技巧。要否则会抓狂的。

1. 切换终端

• c-b + 数字
• c-b + n

2. 滚屏

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

3. 复制文字

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 重修文字，适配本文