打造高效前端工作环境-tmuxinator
2017-05-08 00:00
369 查看
前言
虽然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: ~/ #项目的根目录,作为后续各命令的当前工作目录使用 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 <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原文链接
相关文章推荐
- 打造高效前端工作环境-tmuxinator
- 打造高效前端工作环境 - tmux
- 打造高效前端工作环境_-_tmux
- 打造前端 Deepin Linux 工作环境——安装系统
- 打造前端 Deepin Linux 工作环境——配置 XAMPP 集成环境
- 打造前端 Deepin Linux 工作环境——系统设置以及安装软件
- 打造前端 Deepin Linux 工作环境——安装配置 atom 编辑器
- 打造前端 Deepin Linux 工作环境——开机自动加载 ~/.bash_profile 文件
- 打造前端 Deepin Linux 工作环境——安装 koala css 预编译工具(安装deb包的方法
- 打造前端 Deepin Linux 工作环境——系统更新以及配置字体
- 打造前端 Deepin Linux 工作环境——调节鼠标滚轮速度
- 打造前端 Deepin Linux 工作环境——GUI图形压缩软件 PeaZip 的安装与设置
- 打造前端 Deepin Linux 工作环境——配置静态服务器
- 打造前端 Deepin Linux 工作环境——配置 XAMPP 集成环境2 虚拟主机、数据库
- 打造前端 Deepin Linux 工作环境——安装 nodejs 环境,git 版本管理
- 打造前端 Deepin Linux 工作环境——安装最新版本的火狐firefox浏览器
- [转载] 高效MacBook工作环境配置
- 收藏-如何配置一个高效的 Mac 工作环境
- Android Studio 1.0.1 + Genymotion安卓模拟器打造高效安卓开发环境
- 高效MacBook工作环境配置