openerを使ってnpmスクリプトからブラウザを開いてみる

↓を見てこれはよさそう!!と思ってやってみました。
http://qiita.com/mysticatea/items/12bb6579b9155fd74586

このパッケージを使うと、npmスクリプトから指定したページをブラウザで開くことができます。
Win/Mac/Linuxどの環境でも、同じスクリプトでブラウザを開けるのがいい感じ。
これは便利!!

ここ最近、VSCodeからブラウザ開くタスク作れないかなぁ、、なんて思って色々調べてましたが、npmのパッケージを使って簡単にクロスプラットフォームに実現する方法がありました♪

以下のコマンドでdevDependenciesに入れておいて、npmスクリプトからブラウザ開くのに使えます。

npm install opener --save-dev

で、こんなnpmスクリプトを書いておくと、ブラウザを開くことができます。

  "scripts": {
        :
    "browser": "opener http://localhost:3000/"
        :
  },

サーバーの起動とブラウザ起動をセットにする

今度はnode.jsのサーバー実行とブラウザの起動を、ひとつのスクリプトで一気に実行してみます。
npmスクリプト中では、&&で複数のコマンドを続けて実行することもできますが、そうするとnodeのサーバーを起動して実行している間は後続のコマンドが実行されません。

ということで、複数のnpmスクリプトを並列で実行することができるnpm-run-allというパッケージを使ってみます。

インストールは以下のコマンドで。

npm install npm-run-all --save-dev

  "scripts": {
    "server": "node ./bin/www",
    "browser": "opener http://localhost:3000/",
    "start": "npm-run-all -p server browser"
  },

こうしておくと、npm startと打つだけで、サーバーの起動とブラウザの起動をまとめて行うことができます。

TypeScriptのコンパイルもしてみる

もうひとひねり加えて、startコマンドの前にTypeScriptコンパイラのコンパイルを走らせてみます。

  "scripts": {
    "build": "tsc",
    "prestart": "npm run build",
    "server": "node ./bin/www",
    "browser": "opener http://localhost:3000/",
    "start": "npm-run-all -p server browser"
  },

こうすることで、npm startと打つだけで、tsファイルのコンパイル⇒node.jsのサーバー起動⇒ブラウザ起動、というのをまとめて行うことができます。

prestartを使わずに、npm-run-allだけで実行する場合はこんな感じ。

"start": "npm-run-all build -p server browser"

サンプルコード

↓express&typescriptなプロジェクトで使ってみたサンプルです。
https://github.com/sourcechord/typescript-express-template