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