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