打造高效前端工作环境-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.conf

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 <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

总结

 尊重原创,转载请注明

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏编码小白

servlet容器tomcat和jetty的简单使用

一、tomcat部署     作为基于javaweb开发网页的人,应该都对知道Servlet,Servlet的主要功能在于交互式地浏览和修改数据,生成动态W...

3365
来自专栏测试驿栈

Jmeter(三)_配置元件

Clear Cookies each Iteration:每次迭代请求,清空cookies,GUI中定义的任何cookie都不会被清除。

3292
来自专栏java达人

EasyUI 创建 CRUD 应用

数据收集并妥善管理数据是网络应用共同的必要。CRUD 允许我们生成页面列表,并编辑数据库记录。本教程将向你演示如何使用 jQuery EasyUI 框架实现一个...

2527
来自专栏乐沙弥的世界

Linux 文件目录特殊权限设定(SUID,SGID,SBIT)

Linux文件及目录的权限设定,除了我们孰知的读写执行(rwx)之外,还有一些特殊的权限设定用来满足特定的目录。这些特殊权限的设定主要是SUID,SGID以及S...

1312
来自专栏pangguoming

kafka 主要内容介绍

根据官网的介绍,ApacheKafka®是一个分布式流媒体平台,它主要有3种功能:

1405
来自专栏Java后端技术栈

一文带你详解了解Tomcat的Server配置!

Tomcat隶属于Apache基金会,是开源的轻量级Web应用服务器,使用非常广泛。server.xml是Tomcat中最重要的配置文件,server.xml的...

1132
来自专栏Java帮帮-微信公众号-技术文章全总结

Tomcat7优化

用了很久的Tomcat,没怎么看过它的优化,今天抽出时间研究了下,将内容记录下。 首先,是客户端访问tomcat的一个过程,如图所示: ? 图中间虚线框部分是...

48710
来自专栏Java帮帮-微信公众号-技术文章全总结

Java文件上传与下载【面试+工作】

1.servlet 如何实现文件的上传和下载? 1.1上传文件 通过前台选择文件,然后将资源上传到(即新建一个文件)到发布的资源文件下面, 下载就是url 到发...

1.3K4
来自专栏猿天地

Spring Cloud Ribbon 重试机制

前言 在集群环境中,多个节点来提供服务,难免会有某个节点故障 用Nginx做负载均衡的时候,如果你的应用是无状态的,是可以滚动发布的,也就是一台台去重启应用 这...

4016
来自专栏java技术学习之道

详解Tomcat 配置文件server.xml

2882

扫码关注云+社区

领取腾讯云代金券