日韩av黄I国产麻豆传媒I国产91av视频在线观看I日韩一区二区三区在线看I美女国产在线I麻豆视频国产在线观看I成人黄色短片

歡迎訪問 生活随笔!

生活随笔

當前位置: 首頁 > 前端技术 > HTML >内容正文

HTML

打造高效前端工作环境-tmuxinator

發布時間:2025/3/15 HTML 31 豆豆
生活随笔 收集整理的這篇文章主要介紹了 打造高效前端工作环境-tmuxinator 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

前言

?雖然tmux能讓我們方便組織工作環境,但每次重新打開會話時都需要手動重新創建窗口、窗格和執行各種程序,能不能像VS那樣以工程為單位保存窗口、窗格和各種所需執行的程序的信息呢?tmuxinator恰恰能解決我們這個需求!

安裝與配置

?安裝gem

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

?確保gem的源有且僅有http://gems.ruby-china.org/

$ gem sources -l

?安裝Tmuxinator

$ gem install tmuxinator

?配置別名mux和tmuxinator子命令智能補全
自動根據使用的shell(bash,zsh,fish)下載配置腳本,并啟用配置。

$ 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

入門

1.創建并編輯項目配置,mux n <project_name>
示例:

$ mux n demo

然后進入項目配置編輯界面

# ~/.tmuxinator/demo.yml # 默認配置 name: demo #項目(配置)名稱,不要包含句號 root: ~/ #項目的根目錄,活動Pane會首先cd到此目錄windows:- editor: # 配置名稱為editor的窗口layout: main-vertical # 由于editor下存在多個窗格,因此需要layout可以設置布局(5個默認值even-horizontal,even-vertical,main-horizontal,main-vertical,tiled)panes:- vim # 配置一個窗格運行vim- guard # 配置另一個窗格運行guard- server: bundle exec rails s # 配置名稱為server的窗口, 且僅有一個執行bundle exec rail s的窗格- logs: tail -f log/development.log # 配置名稱為logs的窗口, 且僅有一個執行tail -f log/development.lgo的窗格

根據修改配置得到如下

# ~/.tmuxinator/demo.yml name: demo root: ~/repos/demo/ pre_window: nvm use 4# Runs before everything. Use it to start daemons etc. # pre: nvm use 4# Specifies (by name or index) which window will be selected on project startup. If not set, the first window is used. # startup_window: logs# Pass command line options to tmux. Useful for specifying a different tmux.conf. # tmux_options: -f ~/.tmux.mac.confwindows:- editor: vim index.html- server: npm run dev- stats:layout: even-horizontalpanes:- npm run watch:html- npm run watch:css- npm run watch:js- note:root: ~/repos/note/ # 可在窗口下通過root來配置該窗口下各命令的當前工作目錄panes:- vim pugjs.md

然后保存文件就OK了!

2.打開項目(i.e.根據項目配置啟動tmux會話),mux <project_name>或mux s <project_name>
示例:

$ mux demo

然后tmuxinator就會創建一個tmux會話,并根據剛才編輯的配置文件創建窗口和窗格

3.關閉項目(i.e.根據項目配置關閉tmux會話),mux st <project_name>
示例:在tmux某個shell中輸入

$ mux st demo

4.編輯項目配置,mux e <project_name> 或 mux o <project_name>
5.查看現有項目配置,mux l
6.刪除項目(i.e.刪除現有項目配置),mux d <project_name> [<project_name>]*
7.修改項目配置名稱,mux c <old_project_name> <new_project_name>

進階

1.項目配置文件路徑隨心玩
?眼利的同學可能會發現當我們輸入mux n demo后創建的配置文件首行為# ~/.tmuxinator/demo.yml,這個正是demo這個項目配置文件的路徑。也就是說默認情況下項目配置將保存在~/.tmuxinator/下,并以項目名稱.yml作為文件名。這樣我們就能在任意目錄下通過命令mux <project_name>打開項目了。
?但一旦誤刪了項目配置那么就要重新設置了,能不能把它也挪到項目中通過版本管理器(git etc.)作保障呢?必須可以的哦!

# 假設項目目錄為~/repos/demo/ $ mv ~/.tmuxinator/demo.yml ~/repos/demo/.tmuxinator.yml && ln -s ~/repos/demo/.tmuxinator.yml ~/.tmuxinator/demo.yml

?那么除了通過mux <project_name>外,當pwd為項目目錄時,直接輸入mux也會打開當前項目。而且可以通過mux的其他命令來管理項目配置文件。
?當下次從版本管理器下載項目后,直接執行

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

2.引入變量到項目配置文件中
?參數形式

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

調用mux demo args0 args1
?鍵值對形式

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

調用mux demo ws="repos/demo/"
?環境變量

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

調用set $ws="repos/demo/" && mux demo

3.設置開發環境上下文
?在項目配置文件中加入pre_window配置項。
示例:

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

總結

?尊重原創,轉載請注明來自:http://www.cnblogs.com/fsjohnhuang/p/6057845.html ^_^肥仔John

轉載于:https://www.cnblogs.com/fsjohnhuang/p/6057845.html

總結

以上是生活随笔為你收集整理的打造高效前端工作环境-tmuxinator的全部內容,希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯,歡迎將生活随笔推薦給好友。