Nodejs 代码中为 Gulp Webpack 等 Iterm2 窗口添加端口识别标记

发布于 1周前 作者 ionicwang 来自 nodejs/Nestjs

Nodejs 代码中为 Gulp Webpack 等 Iterm2 窗口添加端口识别标记

缘由

最近两年来经常在 Iterm2 中打开好几个窗口运行 Gulp, Webpack 等，在每个窗口布满 log 后，想找到哪个窗口是干嘛的都有些困难，更不用说这个窗口占用了哪个端口。

所以得有方法标记每个窗口是哪个占用哪个端口号，在跑啥。

解决方案

一个 npm 包

npm i set-iterm2-badge

两行代码

var setIterm2Badge = require('set-iterm2-badge')
setIterm2Badge('官网 8080')

看看效果：

多个 Iterm2 窗口切换时效果：

1

工具集成

Gulp 和 Browser Sync

如果使用 Gulp 和 Browser Sync ，要注意 Browser Sync 的 port 并不一定是传入的 port 。 比如下面这个例子，如果 8080 被其他进程占用了， bs 可能会 8081 8082 等一路试下去哪个可用用哪个。所以得使用回调的对象调用最终端口 bs.options.getIn(['port']) 来处理

var bs = require('browser-sync').create();
bs.init({
    port: 8080,
    /*你的其他配置*/
}, function(err, bs) {
    setIterm2Badge(bs.options.getIn(['port']));
});

Webpack Dev Server

要在 Webpack 集成使用这个功能，得使用 'webpack-dev-middleware' 来运行 Webpack 。示例

var devConfig = require(path.resolve(__dirname, './dev'));
var app = express()
var compiler = webpack(devConfig);
app.use(require("webpack-dev-middleware")(compiler, {
    publicPath: devConfig.output.publicPath
}));
var port = 8078
setIterm2Badge('官网 ' + port)
app.listen(port, '0.0.0.0', function (err) {
  if (err) {
    console.log(err)
    return
  }
  console.log('Listening at http://0.0.0.0:' + port)
})

本文同步发布在我的博客： http://zaishanda.com/post/set-iterm2-badge


Harmonyos Next教程
4 回复

支持一下，虽然我用 tmux 可以轻易的设置窗口名字。


本地用 tmux 会不会太累了，创建个新窗口得按几次键。

<prefix>+<c>是默认的，还可以绑定快捷键直接创建 window ，改名也可以。不觉得有啥繁琐。

在 Node.js 开发环境中，为了在使用 Gulp、Webpack 等工具时，在 iTerm2 窗口中添加端口识别标记，可以通过脚本在启动这些工具时动态设置 iTerm2 的窗口标题。iTerm2 支持通过特定的转义序列来设置窗口标题。

以下是一个示例脚本，展示如何在 Node.js 中运行 Gulp 或 Webpack 时，通过修改 iTerm2 窗口标题来包含当前使用的端口号。

const { exec } = require('child_process');
const port = 3000; // 假设这是你要识别的端口

// 设置 iTerm2 窗口标题的转义序列
const setTitle = (title) => `\x1b]2;${title}\x07`;

// 运行 Gulp 或 Webpack 命令，并设置窗口标题
const runCommand = (command) => {
  const title = `Running ${command} on port ${port}`;
  exec(`echo -e "${setTitle(title)}" && ${command}`, (error, stdout, stderr) => {
    if (error) {
      console.error(`exec error: ${error}`);
      return;
    }
    console.log(`stdout: ${stdout}`);
    console.error(`stderr: ${stderr}`);
  });
};

// 示例：运行 Gulp
runCommand('gulp');
// 示例：运行 Webpack（假设你有一个 webpack.config.js 文件）
// runCommand('webpack --config webpack.config.js');

在上面的代码中，我们首先定义了一个 port 变量来存储要识别的端口号，然后使用 iTerm2 的转义序列来设置窗口标题。最后，我们封装了一个 runCommand 函数来运行指定的命令（如 Gulp 或 Webpack），并在命令执行前设置窗口标题。

回到顶部