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

简介: 虽然tmux能让我们方便组织工作环境,但每次重新打开会话时都需要手动重新创建窗口、窗格和执行各种程序,能不能像VS那样以工程为单位保存窗口、窗格和各种所需执行的程序的信息呢?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: ~/   #项目的根目录,作为后续各命令的当前工作目录使用

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

目录
相关文章
|
前端开发 测试技术
【前端验证】记录将发包量作为传参以加速debug的环境优化记录
【前端验证】记录将发包量作为传参以加速debug的环境优化记录
318 0
|
前端开发 开发工具 git
mac前端开发环境
mac前端开发环境
493 0
|
缓存 前端开发 JavaScript
前端开发的必修课:如何让你的网页在弱网环境下依然流畅运行?
【10月更文挑战第30天】随着移动互联网的普及,弱网环境下的网页性能优化变得尤为重要。本文详细介绍了如何通过了解网络状况、优化资源加载、减少HTTP请求、调整弱网参数和代码优化等方法,提升网页在弱网环境下的加载速度和流畅性,从而改善用户体验。
1025 4
|
前端开发
windows10 安装node npm 等前端环境 并配置国内源
windows10 安装node npm 等前端环境 并配置国内源
1174 3
|
前端开发 开发工具 开发者
构建高效的前端开发环境
在如今快节奏的软件开发领域,构建一个高效的前端开发环境变得至关重要。本文将介绍一些关键的工具和技术,帮助开发者提升前端开发效率,包括代码编辑器、版本控制系统、自动化构建工具、包管理器以及调试和性能优化等方面。
284 29
|
前端开发 JavaScript IDE
构建高效的前端开发环境
本文探讨了如何构建一个高效的前端开发环境,包括选择合适的开发工具、优化工作流程和提高代码质量的方法。通过本文的指导,读者可以更好地提升前端开发效率,快速构建出高质量的网站和应用程序。
|
JSON 前端开发 开发工具
初探在WSL中设置vim前端开发环境
初探在WSL中设置vim前端开发环境
|
Dart 前端开发 架构师
【01】vs-code如何配置flutter环境-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈-供大大的学习提升
【01】vs-code如何配置flutter环境-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈-供大大的学习提升
755 26
|
前端开发 API Docker
web前端开发项目走proxy代理后端接口,构建发布到生产等环境后,如何修改api接口
web前端开发项目走proxy代理后端接口,构建发布到生产等环境后,如何修改api接口
487 0
|
前端开发 测试技术 芯片
【前端验证】关于那道经典概率题,用UVM环境来仿真下是男孩的概率
【前端验证】关于那道经典概率题,用UVM环境来仿真下是男孩的概率
306 0

热门文章

最新文章

  • 1
    前端如何存储数据:Cookie、LocalStorage 与 SessionStorage 全面解析
    1318
  • 2
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(九):强势分析Animation动画各类参数;从播放时间、播放方式、播放次数、播放方向、播放状态等多个方面,完全了解CSS3 Animation
    602
  • 3
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(八):学习transition过渡属性;本文学习property模拟、duration过渡时间指定、delay时间延迟 等多个参数
    463
  • 4
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(七):学习ransform属性;本文学习 rotate旋转、scale缩放、skew扭曲、tanslate移动、matrix矩阵 多个参数
    464
  • 5
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(六):全方面分析css的Flex布局,从纵、横两个坐标开始进行居中、两端等元素分布模式;刨析元素间隔、排序模式等
    582
  • 6
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(五):背景属性;float浮动和position定位;详细分析相对、绝对、固定三种定位方式;使用浮动并清除浮动副作用
    760
  • 7
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(四):元素盒子模型;详细分析边框属性、盒子外边距
    1491
  • 8
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(三):元素继承关系、层叠样式规则、字体属性、文本属性;针对字体和文本作样式修改
    339
  • 9
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(二):CSS伪类:UI伪类、结构化伪类;通过伪类获得子元素的第n个元素;创建一个伪元素展示在页面中;获得最后一个元素;处理聚焦元素的样式
    1207
  • 10
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(一):CSS发展史;CSS样式表的引入;CSS选择器使用,附带案例介绍
    551