lite-serverを使った開発サーバの構築

Lite-Serverのパッケージを使った開発サーバの構築方法を説明したいと思います。開発用のタスクはnpm-scriptsを使用します。

記載した実行環境は以下の通りです。Node.jsのインストールについては、『Angular2の開発環境を構築（angular-cli）』を参考にして下さい。

• OS : Windows 7 Home Premium
• Node.js : V6.9.4
• npm : V3.10.10

また、記載したコード等をコピー＆ペーストする場合には円マークに注意して下さい。コード中の円マークは「U+00A5」で表現しています。 『円マークとバックスラッシュ』を参考にして下さい。

 

 

１．使用するパッケージの説明

（1）lite-server

軽量のローカルWEBサーバです。BrowserSyncが内蔵されており、js、html、cssなどのソースファイルの変更を監視し、自動的にブラウザのリロードを行ってくれます。

 

 

２．プロジェクトディレクトリの作成

最初にプロジェクトで使用するディレクトリを作成します。今回は「C:¥web-dev¥Javascript¥jtest03」をプロジェクトディレクトリとして使用します。プロジェクトディレクトリの下にソースを格納するsrcフォルダも作成して下さい。

 

 

３．package.jsonの作成

パッケージのインストールやnpm-scripts実行のためのpackage.jsonを作成します。[-y]オプションを指定して実行して、デフォルト値で作成します。作成後は必要に応じて、name、version、description等の項目をエディタで編集して下さい。

 

 

４．パッケージのインストール

lite-serverのパッケージをローカルインストールします。[--save-dev]オプションを付けて、パッケージ情報をdevDependenciesにバージョン付きでpackage.jsonに書き込みます（開発時のみに利用するライブラリのバージョンを管理します）。

ワーニング表示される場合があるかもしれませんが、とりあえずOKとして良いと思います。インストールバージョンは以下のようになります。

 

 

５．lite-serverの環境を構築

以下の手順に従い、lite-serveの実行環境を構築します。

（1）最初にルートとなるsrc\index.htmlを作成します。ファイルはUTF-8で作成して下さい。

（2）bs-config.jsonを新規作成します。lite-serverの[-c]オプションで、bs-config.jsonを指定する事によって、実行時の動作オプションを指定する事が出来ます。

（3）次にlite-serverをテスト実行します。コマンドの実行で標準ブラウザが起動して、http://localhost:3000にアクセスされます。

 

 

６．開発で使用するnpm-scriptsを定義する。

package.jsonのscript部にnpm-scriptsを定義します。今までのように「node_modules¥.bin¥・・・」のように長い相対パスをいちいち入力することなく、「npm run コマンド名」のように簡潔なコマンドを記述することが可能になります。コピペする時は『円マークとバックスラッシュ』に中止して下さい。