Vorlon.jsをgulp+browserSync環境で実行する

やりたいのはbrowserSyncを実行しつつ、ローカル環境でのみVorlon.jsをhtmlに動的に差し込んで実行したい。

Vorlon.jsに関しては省略します。
Vorlon.jsとは？ ブラウザーでWebデバッグできるお手軽な開発者ツール

前提としてnpm i -g vorlonでインストールを済ませておきます。

gulpfile.js

var gulp = require('gulp');
var browserSync = require('browser-sync');
var shell = require('gulp-shell');

gulp.task('default', ['vorlon', 'browser-sync', 'watch']);

gulp.task('vorlon', shell.task(['vorlon']));

gulp-shellでvorlonコマンドを実行させます。
私の環境の場合、全てのhtmlに共通したjsを読み込んでいる事が多いので
そういった共通js(後述ではcommon.js)にhttp://localhost:1337/vorlon.jsをcreateElementで作成します。

common.js

var localHost = /localhost|192\.168\.0\./;
var hostname = location.hostname;

if(localHost.test(hostname)) {
  createVorlonJS();
}

function createVorlonJS() {
  var script = document.createElement('script');
  script.type = 'text/javascript';
  script.src = '//'+location.hostname+':1337/vorlon.js';
  var s = document.getElementsByTagName('script')[0];

  return s.parentNode.insertBefore(script, s.nextSibling);
}

あとはいつも通りコマンドでgulpを叩くだけです。
一々htmlにデバッグのときだけ直接書くのは面倒なのでjsでさくっと作ってみましたが、静的に書いた場合との差が何かあるかもしれません。