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

缘由

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

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

解决方案

一个 npm 包

npm i set-iterm2-badge

两行代码

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

看看效果：

多个 Iterm2 窗口切换时效果：

工具集成

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