用 tmux 與 tmuxinator 打造開發工作流

iTwocucao發表於2018-02-01
UX

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 的話，火速掌握下面三個小技巧。要不然會抓狂的。

  1. 切換終端
  • c-b + 數字
  • c-b + n
  1. 滾屏

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

  1. 複製文字

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

0xEE 參考連結

ChangeLog:

  • 2017-03-08 09:33:37 重新潤飾文字，棄用 Rails 開發一年。現在主 DjangoRestFrameWork+VueJS
  • 2018-01-28 11:44:00 重修文字，適配本文

相關文章