缘由

最近两年来经常在 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