用 tmux 與 tmuxinator 打造開發工做流

時間 2019-11-16

標籤 tmux tmuxinator 打造開發欄目 Linux 简体版

原文原文鏈接

0x00. 前言

本文就我最近開發的一個先後端的項目（名字叫作 yavueblog) 來簡單介紹兩個神器css

一個是 tmux
一個是 tmuxinator

我在開發這個先後端的項目的時候要開啓要經過很多的命令來啓動服務：前端

（前端開發）運行 npm run dev 進行開發前端頁面
（前端開發）運行 npm run dev:theme , 當主題的 SCSS 發生變化的同時，編譯 SCSS
（前端開發）運行 npm run dev:iconfont, 當移入了新的 svg 圖標的時候，自動構建出新的字體文件與 iconfont.css 。
（後端開發）運行 make dockerup 中開啓 Django 應用。啓動 Django 服務，PostgreSQL 數據庫，Redis 等等，

個人平常任務以下以下：vue

一鍵啓動這些腳本，前兩個任務，放在第一個終端。
後面兩個任務放在第2、三個終端裏。

之前的作法都是新建三個終端選項卡，而後第一個終端分兩屏，而後分別到各個終端 cd 或者 autojump 到對應的目錄，而後手動運行命令。mysql

加上運行 npm run dev:theme 的時候，我是經過 Python 的 watchdog 來實現對指定目錄和指定類型文件的變化進行監聽的，因此還要切換 PyEnv 自定義的 Python 的環境中。git

這些命令反反覆覆輸入仍是挺麻煩的事情，爲什麼不用工具來解決呢？github

0x01 tmux + tmuxinator

先安裝sql

brew install tmux
brew install ruby
gem install tmuxinator
複製代碼

什麼是 tmux? 簡單而言，就是一個終端複用軟件。什麼是 tmuxinator? 簡單而言，就是爲了簡化 tmux 操做的軟件。只須要編寫 yaml 即快速開啓一個比較適合你的終端窗口布局。docker

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

https://github.com/gpakosz/.tmuxnpm

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"

複製代碼