资讯专栏INFORMATION COLUMN

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

aaron / 895人阅读

摘要:当下次从版本管理器下载项目后,直接执行引入变量到项目配置文件中参数形式调用键值对形式调用环境变量调用设置开发环境上下文在项目配置文件中加入配置项。

前言

 虽然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
示例:

$ mux n demo

然后进入项目配置编辑界面

# ~/.tmuxinator/demo.yml
# 默认配置
name: demo #项目(配置)名称,不要包含句号
root: ~/   #项目的根目录,作为后续各命令的当前工作目录使用

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

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/ # 可在窗口下通过root来配置该窗口下各命令的当前工作目录
            panes:
                - vim pugjs.md

然后保存文件就OK了!

2.打开项目(i.e.根据项目配置启动tmux会话),mux mux s
示例:

$ mux demo

然后tmuxinator就会创建一个tmux会话,并根据刚才编辑的配置文件创建窗口和窗格

3.关闭项目(i.e.根据项目配置关闭tmux会话),mux st
示例:在tmux某个shell中输入

$ mux st demo

4.编辑项目配置,mux e mux o
5.查看现有项目配置,mux l
6.删除项目(i.e.删除现有项目配置),mux d []*
7.修改项目配置名称,mux c

进阶

1.项目配置文件路径随心玩
 眼利的同学可能会发现当我们输入mux n demo后创建的配置文件首行为# ~/.tmuxinator/demo.yml,这个正是demo这个项目配置文件的路径。也就是说默认情况下项目配置将保存在~/.tmuxinator/下,并以项目名称.yml作为文件名。这样我们就能在任意目录下通过命令mux 打开项目了。
 但一旦误删了项目配置那么就要重新设置了,能不能把它也挪到项目中通过版本管理器(git etc.)作保障呢?必须可以的哦!

# 假设项目目录为~/repos/demo/
$ mv ~/.tmuxinator/demo.yml ~/repos/demo/.tmuxinator.yml &&
ln -s ~/repos/demo/.tmuxinator.yml ~/.tmuxinator/demo.yml

 那么除了通过mux 外,当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/fsjohn... ^_^肥仔John

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/23533.html

相关文章

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

    摘要:当下次从版本管理器下载项目后,直接执行引入变量到项目配置文件中参数形式调用键值对形式调用环境变量调用设置开发环境上下文在项目配置文件中加入配置项。 前言  虽然tmux能让我们方便组织工作环境,但每次重新打开会话时都需要手动重新创建窗口、窗格和执行各种程序,能不能像VS那样以工程为单位保存窗口、窗格和各种所需执行的程序的信息呢?tmuxinator恰恰能解决我们这个需求! 安装与配置 ...

    vboy1010 评论0 收藏0
  • 多窗口管理器Tmux - 从入门到精通

    摘要:的主要元素分为三层一组窗口的集合,通常用来概括同一个任务。安装是的配置管理工具,解决了服务器关机后丢失问题。而且可定制化,相较于同类瓦片式窗口管理器,提供了更多的定制和快捷键,是同类软件中的佼佼者。 tmux 的基本概念 我们先来理解下 tmux 的几个元素。tmux 的主要元素分为三层 Session 一组窗口的集合,通常用来概括同一个任务。session 可以有自己的名字便于任务...

    syoya 评论0 收藏0
  • macOS打造Web前端开发环境高效管理macOS

    摘要:本配置比较适合前端开发人员,打造开发,自动补全使用效率好的已解决安装却提示需要的问题提示安装常用工具及,如使用工具不一样的,可自已进行相关配置详细配置安装安装插件所需的已在初使化环境中配置完成适合前端相关开发,设置参考许可证 Ren Chunhuis Dotfiles 本配置比较适合Web前端开发人员,打造 iTerm + Zsh + Vim/NeoVim + Tmux] 开发,自动补...

    selfimpr 评论0 收藏0
  • 【转】给年轻的前端程序员提升能力的几条建议

    摘要:如果你问一个年轻的前端开发人员,你在今后的年内如何提升自己的能力他可能会说我现在对前端比较熟悉,但我想深入了解,另外现在发展的很快我也想看一下。再举一个例子,我会留意身边的程序员所用的键盘。只有少部分的程序员会买高端的静电容键盘,比如。 如果你问一个年轻的前端开发人员,你在今后的 3 年内如何提升自己的能力?他可能会说我现在对 Web 前端比较熟悉,但我想深入了解 AngularJS,...

    Ryan_Li 评论0 收藏0
  • mac 下的新玩具

    摘要:为啥需要,因为能更快更方便的进行代码提示与代码补全,每个人的精力都是有限的,能打一个字母出来结果就绝对不打第二个。 tools zsh为啥需要zsh,因为能更快更方便的进行代码提示与代码补全,每个人的精力都是有限的,能打一个字母出来结果就绝对不打第二个。 plugins=(git brew mvn svn svn-fast-info sbt go pip zsh-syntax-high...

    canopus4u 评论0 收藏0

发表评论

0条评论

aaron

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<