用 tmux 與 tmuxinator 打造開發工作流

02-02

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 tmuxnbrew install rubyngem install tmuxinatorn

什麼是 tmux? 簡單而言，就是一個終端復用軟體。什麼是 tmuxinator? 簡單而言，就是為了簡化 tmux 操作的軟體。只需要編寫 yaml 即快速開啟一個比較適合你的終端窗口布局。

關於 tmux 的配置，推薦這個 repo

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

0x02 編寫 Tmuxinator 配置文件

輸入 tmuxinator new yavueblog

修改文件如下

# ~/.tmuxinator/yavueblog.ymlnnname: yavueblognroot: ~/Codes/PublicRepos/YaBlogSystem/nn# 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.npre_window: pyenv activate 3.5.2/envs/py3-dailynnwindows:n - "網站開發":n layout: main-verticaln # 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: aftern panes:n - "cd ./YaVueBlog/ && npm run dev"n - "cd ./YaVueBlog/ && npm run dev:theme"n - "iconfont 構建": "cd ./YaVueBlog/ && npm run dev:iconfont"n - "DockerizedDjango": "cd ./YaDjangoBlog/ && make docker-compose-build-up" n這樣的話，每次開發就只需要運行 tmuxinator start yavueblog，並且打開 IDE 直接捋起袖子就是干就好了。n

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