打造高效前端工作环境-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
总结
尊重原创,转载请注明
- 孟昭莉博士:大数据大道之行
- .NET Core系列 :3 、使用多个项目
- 完整部署CentOS7.2+OpenStack+kvm 云平台环境(2)--云硬盘等后续配置
- 完整部署CentOS7.2+OpenStack+kvm 云平台环境(3)--为虚拟机指定固定ip
- ubuntu系统升级记录
- .NET Core系列 :4 测试
- 完整部署CentOS7.2+OpenStack+kvm 云平台环境(4)--用OZ工具制作openstack镜像
- centos下部署NTP时间服务器同步环境记录
- ASP.NET MVC扩展库
- centos7.2部署vnc服务记录
- nginx访问报错:Too many open files accept:
- iptables之NAT端口转发设置
- 使用Combres 库 ASP.NET 网站优化
- jQuery和asp.net mvc相关资源链接
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 基于maven+ssm的增删改查之关于ajax验证用户是否存在存在的问题
- 基于maven+ssm的增删改查之JS303校验
- MyBatis-Generator 用法介绍
- BERT源码分析(PART II)
- Wamp 下运行 CGI 笔记
- JeeSite | 保存信息修改记录续
- 植物大战僵尸辅助
- 基于maven+ssm的增删改查之修改员工信息
- 基于maven+ssm的增删改查之批量删除
- JeeSite | 保存信息修改记录封装
- JeeSite | 数据分页与翻页
- JeeSite | 访问控制权限
- PHP 管理树莓派
- 基于maven+ssm的增删改查之批量删除之全选全不选
- mybatis动态sql之初探(学习where、if、trim标签)