0 x00. Preface

This article briefly introduces two artifacts from a recent front and back end project I developed called YavueBlog

  • One is tmux
  • One is tmuxinator

When I was developing the front and back end project, I had to start the service with a number of commands:

  • (Front-end development) Run NPM run Dev to develop front-end pages
  • (Front-end development) Run NPM run Dev :theme and compile the SCSS when the SCSS of the theme changes
  • (Front-end development) Run NPM run dev:iconfont, when moving the new SVG icon, automatically build the new font file and iconfont. CSS.
  • (Backend development) Run Make DockerUp to start the Django application. Start Django services, PostgreSQL databases, Redis, etc.

My daily tasks are as follows:

  • One click to start these scripts, the first two tasks, placed on the first terminal.
  • The latter two tasks are placed in the second and third terminals.

The previous approach is to create three terminal tabs, and then the first terminal divided into two screens, and then respectively to each terminal CD or autojump to the corresponding directory, and then manually run the command.

NPM Run dev:theme = NPM run dev:theme = NPM run dev:theme = NPM run dev:theme = NPM run dev:theme = NPM run dev:theme = NPM run dev:theme = NPM run dev:theme = NPM run dev:theme

These commands are a hassle to type over and over again, so why not use a tool?

0x01 tmux + tmuxinator

First installation

brew install tmux
brew install ruby
gem install tmuxinator
Copy the code

What is a tmux? Simply put, it is a terminal reuse software. What is a tmuxinator? In short, software designed to simplify TMUX operations. Just write YAML to quickly open up a terminal window layout that works better for you.

This REPO is recommended for tMUX configuration

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

0x02 Writing a Tmuxinator Configuration File

Enter tmuxinator new yavueblog

Modify the file as follows

# ~/.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: -"Website development":
      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 building": "cd ./YaVueBlog/ && npm run dev:iconfont"
  - "DockerizedDjango": "cd ./YaDjangoBlog/ && make docker-compose-build-up"

Copy the code

This way, every time you develop, you just need to run tmuxinator start Yavueblog, open the IDE and roll up your sleeves.

Three tips to master first to play TMUx

If you’re new to TMUX, pick up these three quick tips. Or you’ll freak out.

  1. Switch terminal
  • C – b + number
  • c-b + n
  1. scrolling

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

  1. Copy the words

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

0xEE Reference link

  • My lot

ChangeLog:

  • Repolish the text and forgo Rails development for a year. Now the main DjangoRestFrameWork + VueJS
  • 2018-01-28 11:44:00 Revised text, adapted to this article