Creating an efficient front-end working environment-tmuxinator

Posted by dsoftnet on Wed, 03 Jul 2019 18:42:24 +0200

Preface

_Although tmux makes it easy for us to organize our working environment, every time we reopen a session we need to manually re-create windows, panes and execute various programs. Can we save windows, panes and program information in project units like VS?tmuxinator is just the answer to our need!

Installation and Configuration

_Install gem

$ sudo apt install gem
$ gem sources --remove https://rubygems.org --add http://gems.ruby-china.org/

_Ensure that the gem has a source and only one http://gems.ruby-china.org/

$ gem sources -l

_Install Tmuxinator

$ gem install tmuxinator

_Configure the intelligent completion of the alias mux and tmuxinator subcommands
Automatically download the configuration script based on the shell(bash,zsh,fish) used and enable the configuration.

$ if [[ $SHELL == *fish* ]];then pushd ~/.config/fish/completions/; else pushd ~/.tmuxinator/; fi &&
curl -O "https://raw.githubusercontent.com/tmuxinator/tmuxinator/master/completion/tmuxinator.$(basename $SHELL)" &&
popd &&
if [[ $SHELL != *fish* ]];then echo "source ~/.tmuxinator/tmuxinator.$(basename $SHELL)" >> ~/.$(basename $SHELL)rc; fi &&
if [ -z $EDITOR ];then echo "export EDITOR='vim'" >> ~/.$(basename $SHELL)rc; fi &&
source ~/.$(basename $SHELL)rc

Introduction

1. Create and edit the project configuration, MUX <project_name>
Example:

$ mux n demo

Then enter the project configuration editing interface

# ~/.tmuxinator/demo.yml
# Default Configuration
name: demo #Project (configuration) name, do not include period
root: ~/   #The root directory of the project, used as the current working directory for subsequent commands

windows:
    - editor: # Configure a window named editor
            layout: main-vertical # Since there are multiple panes under editor, layout is required to set the layout (five default values even-horizontal,even-vertical,main-horizontal,main-vertical,tiled)
            panes:
                - vim # Configure a pane to run vim
                - guard # Configure another pane to run guard
    - server: bundle exec rails s # Configure a window named server with only one pane executing bundle exec rail s
    - logs: tail -f log/development.log # Configure a window named logs with only one pane executing tail-f log/development.lgo

The configuration is modified as follows

# ~/.tmuxinator/demo.yml
name: demo
root: ~/repos/demo/
pre_window: nvm use 4

windows:
    - editor: vim index.html
    - server: npm run dev
    - stats:
            layout: even-horizontal
            panes:
                - npm run watch:html
                - npm run watch:css
                - npm run watch:js
    - note:
            root: ~/repos/note/ # You can configure the current working directory of the commands under the window through root
            panes:
                - vim pugjs.md

Then save the file and OK!

2. Open the project (i.e. start a tmux session based on the project configuration), MUX <project_name>or MUX s <project_name>
Example:

$ mux demo

Then tmuxinator creates a tmux session and creates windows and panes based on the configuration file you just edited

3. Close the project (i.e. Close the tmux session according to the project configuration), MUX St <project_name>
Example: Enter in a shell in tmux

$ mux st demo

4. Edit the project configuration, MUX e <project_name>or MUX o <project_name>
5. View existing project configurations, mux l
6. Delete project (i.e. Delete existing project configuration), MUX D <project_name> [<project_name>]*
7. Modify the project configuration name, MUX C <old_project_name> <new_project_name>

Advanced

1. Play with the project profile path
_Eye-catching classmates may find that when we enter mux n demo, the first behavior of the profile created # ~/.tmuxinator/demo.yml is the path to the demo project configuration file.That is, by default, the project configuration is saved under ~/.tmuxinator/with the project name.yml as the file name.This allows us to open the project in any directory with the command MUX <project_name>.
_But once you delete the project configuration by mistake, you have to reset it. Can you move it to the project to be guaranteed by the version manager (git etc.)?Must be OK!

# Assume the project directory is ~/repos/demo/
$ mv ~/.tmuxinator/demo.yml ~/repos/demo/.tmuxinator.yml &&
ln -s ~/repos/demo/.tmuxinator.yml ~/.tmuxinator/demo.yml

_Then in addition to mux <project_name>, when pwd is the project directory, directly entering mux also opens the current project.You can also manage project configuration files through other mux commands.
_When the next time you download a project from the Version Manager, execute it directly

$ ln -s ~/repos/demo/.tmuxinator.yml ~/.tmuxinator/demo.yml

2. Introduce variables into the project configuration file
_Parameter Form

# ~/.tmuxinator/demo.yml
name: demo
root: ~/<%= @args[0] %>

.........

Call mux demo args0 args1
_Key-value pair form

# ~/.tmuxinator/demo.yml
name: demo
root: ~/<%= @settings["ws"] %>

.........

Call mux demo ws="repos/demo/"
_Environmental variables

# ~/.tmuxinator/demo.yml
name: demo
root: ~/<%= ENV["ws"] %>

.........

Call set $ws="repos/demo/" & & MUX demo

3. Set the development environment context
_Add a pre_window configuration item to the project configuration file.
Example:

name: demo
root: ~/repos/demo
pre_window: nvm use 4

summary

_Respect the original, reprint from: http://www.cnblogs.com/fsjohnhuang/p/6057845.html ^^Fatty John

Topics: shell Windows vim Session