2016-05-28

npm でパッケージ管理しながら Gulp で Browserify を実行させて http-server で動作確認を行う

JavaScript ライブラリを色々使ってみようぜってことで、Node.js がお送りする npm でパッケージを管理しながら、Gulp を使って Browserify を試してみようという。そんで動作確認には http-server というお手軽なウェブサーバーを使う。

一連の作業は Mac OSX El Capitan にて、標準のターミナルに Finder、エディタは CotEditor を使った。

Node.js は以下の記事に沿って、v5.11.1 を導入したところ。

作業の流れは以下のとおり。

作業ディレクトリを作る
npm init で package.json を作る
Browserify を試すために jQuery をインストールする
Browserify をインストールして単独で使ってみる
Gulp をインストールして Browserify のビルドを定義してみる
http-server で動作確認してみる

1. 作業ディレクトリを作る

まずは適当なところに作業ディレクトリを作る。

ディレクトリの作り方をいつも悩むが、ぼくは /Users/【User】/Documents/ 配下に Dev/NodeTest/ とディレクトリを作って、NodeTest ディレクトリを作業ディレクトリのルートにした。npm パッケージは、そのパッケージが依存する別のパッケージをさらに子階層に持つため、特に Windows の場合は、作業するディレクトリはなるべくルートに近いところにしておかないと、パスが長過ぎてエラーが発生する。

以降の作業は /Users/【User】/Documents/Dev/NodeTest/ に移動した状態でターミナル操作などを行っている。

2. `npm init` で package.json を作る

npm init というコマンドを使うと、その作業ディレクトリ内で使う npm のパッケージを管理するための package.json というファイルを対話形式で生成できる。

$ cd /Users/【User】/Documents/Dev/NodeTest/
$ npm init

名前とバージョンは必須だが、適当で良い。その他は未入力でもいいので Enter で適当に進めていく。完了すると作業ディレクトリに package.json というファイルができる。

package.json を手書きして、npm install コマンドを叩けば必要なパッケージがインストールできたりする。逆に npm install --save とかでパッケージをインストールするときに、自動的に package.json にパッケージ情報を書かせることもできる。

--save オプションには何か違いがあるので以下を参照。今回はあまり考えずになんとなく --save-dev で書いていくことにする。-D という省略記法もある。

参考 : 勉強メモ/npmの使い方(node.js=v0.11.16, npm=2.3.0, 2015-03時点) - Qiita

–save / –save-dev / –save-optional の違い

--save は package.json の dependencies に追記される。

--save-dev は package.json の devDependencies に追記される。

--save-optional は package.json の optionalDependencies に追記される。

それぞれの違いだが、package.jsonがモジュールとして外部に公開し、他の人がnpm installした時に影響する。

他の人が npm install した時に、dependencies に指定したパッケージが全てインストールされる。

devDependencies に追記したものは開発時にのみ使うパッケージを指定するのに使う。そのパッケージの利用者にとっては不要で、開発者のみが使うため、利用者が npm install パッケージ名するときはこの依存パッケージはインストールされない。もし devDependencies もインストールしたい場合は、–dev 設定を有効化(これはnpm installのオプションではなく、 npm help 7 config にあるようにnpmの設定である)して、npm install パッケージ名 –dev とする。

ただし、利用者がpackage.json含めたソースコード全体をgitなどからcloneして開発する = 開発者と同等の立場として、追加パラメータ無しで package.json のあるディレクトリで npm install とだけした場合は、開発者の立場になるわけなので、devDependencies もインストールされる。というか、依存関係は全てインストールされるらしい。 –production つければ、package.jsonのところで npm install –production なら devDependencies はインストールされない。

dependencies と devDependencies の使い分けだが、パッケージやプロジェクトが実行時に必要となるのを dependencies に設定し、ビルド時だけしか使われないようなビルドツール・ライブラリなどは devDependencies に入れておくと良さそう。

参考 : npmでnode.jsのpackageを管理する - Qiita

3. Browserify を試すために jQuery をインストールする

npm のパッケージは npm install -g とするとグローバルインストールになる、という話はよく見かけるが、その作業ディレクトリ内で使いたいパッケージは、既にグローバルインストールしてあっても再度 npm install --save-dev でその作業ディレクトリ内にインストールする必要がある。

グローバルインストールは、パスが通っている npm の配下にパッケージがインストールされるため、どんな階層に居てもコマンドを叩いて実行することができるようになる。つまり、作業ディレクトリに関係なく、コマンドラインで利用したいパッケージは、グローバルインストールしておく、ということだ。例えば gulp とか bower なんかである。

一方ローカルインストールは、その作業ディレクトリで利用する npm パッケージを入れる方法。そのディレクトリ内で作った成果物が、その npm パッケージを利用している・依存している、という場合はローカルインストールである。そしてこの「依存している」という宣言を、--save オプションなどで示すことで、package.json にその情報が記録される、というワケである。

# 普通 jQuery なんかをグローバルインストールすることはないが…。
$ npm install -g jquery

# 作業ディレクトリ内で使うときはローカルインストールする
$ npm install jquery --save-dev

4. Browserify をインストールして単独で使ってみる

JS ファイル内で require() 構文が使えるようになり、単一ファイルにまとめてビルドしてくれる Browserify をインストールしてみる。これも --global でインストール済みでも、再度 npm install しておく。

install は i と省略できるので、以下の2つは同じ動作になる。

$ npm install browserify --save--dev
$ npm i browserify -D

次にサンプルの HTML と JavaScript ファイルを作る。いずれも作業ディレクトリのルートに作ることにする。touch コマンドで空ファイルを作成。

$ touch index.html
$ touch src.js

index.html は以下のように書いて、あとでビルドする予定の JS ファイル「dest.js」を読み込むようにしておく。空ファイルをエディタで開いてカキカキ。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Node Test</title>
  </head>
  <body>
    <p>Test.</p>
    <script src="dest.js"></script>
  </body>
</html>

src.js には require を使って jQuery を読み込ませた簡単なコードを書いてみる。

// jQuery を読み込む
var $ = require("jquery");

$(function() {
  console.log("Test.");
});

src.js ができたら、試しにコマンドラインから Browserify を実行してビルドしてみる。

$ browserify src.js > test.js

こうすると作業ディレクトリに test.js ができていて、開いてみると何やら jQuery のモジュールがゴッソリ入っていて、最後の方に src.js 内に書いた自分のコードが入っている。

Browserify はこうやって、npm install で入れたライブラリを読み込んで1つの JS ファイルに結合できる。

5. Gulp をインストールして Browserify のビルドを定義してみる

簡単なビルドであれば npm run というコマンドでもできるらしい。

参考 : フロントエンド開発の３ステップ（npmことはじめ） - Qiita

でも今回は Gulp をお試しするってことで。

まずは Gulp をインストール。あと、よく分かってないけど vinyl-source-stream ってヤツも、Browserify の時に必要になるようなので入れておく。

$ npm install gulp --save--dev
$ npm install vinyl-source-stream --save-dev

参考 : gulp で browserify - 新しい日記
参考 : gulp と browserify と vinyl の話
参考 : JSをbrowserifyでビルドし、ライセンスコメントを適切に残す - $shibayu36->blog;

そしたら Gulp のタスクを定義する gulpfile.js を作業ディレクトリ直下に作る。

$ touch gulpfile.js

gulpfile.js の中にはこんな感じに書く。

var gulp = require("gulp");
var browserify = require("browserify");
var source = require("vinyl-source-stream");

// build-js というタスク名で定義
gulp.task("build-js", function() {
  browserify({
    // ビルド対象のファイルを指定する
    entries: ["./src.js"]
  })
  .bundle()    // Browserify を実行
  .pipe(source("dest.js"))    // bundle() が返したファイルストリームを vinyl っていう形式に変えないといけない。
  .pipe(gulp.dest("./"));    // JS を出力
});

この定義ファイルに沿って Gulp を実行する。

# gulpfile.js 内に書いたタスク名で実行
$ gulp build-js

こんな風にすると、作業ディレクトリ直下に dest.js が生成されている。

6. http-server で動作確認してみる

http-server という、コマンドラインで簡単にウェブサーバーが立てられるライブラリがある。手軽に動作確認したい時に使えそう。

参考 : Node.jsのhttp-serverっていうコマンドラインのウェブサーバーが便利 | Firegoby

まずはグローバルインストール。

$ npm install -g http-server

次に作業ディレクトリで以下のコマンドを実行。

$ http-server

たったこれだけでサーバが起動する。アクセス URL はコマンド実行後に表示される。どれでも良い。

アクセスすると、作成していた index.html が開き、この中で読み込むように書いておいた dest.js は先程 Gulp タスクとして実行した Browserify のビルド結果ファイル。先ほどのコードでいえばコンソールに「Test.」の文言が出ていれば、正しく jQuery を require できている。

では最後にこれまでのコマンドのまとめ。

# 作業ディレクトリを用意して移動・npm init で package.json を作る
$ cd /Users/(User)/Documents/Dev/NodeTest/
$ npm init

# 必要なモジュールをインストールする
$ npm install --save-dev jquery
$ npm install --save-dev browserify
$ npm install --save-dev gulp
$ npm install --save-dev vinyl-source-stream

# 必要なファイルの生成 (個別の中身は前述のとおり)
$ touch index.html
$ touch src.js
$ touch gulpfile.js

# Gulp タスクを実行し JS ファイルをビルドする
$ gulp build-js

# http-server で動作確認する
$ npm install -g http-server
$ http-server

以上。長くなったけど、コレで npm と Browserify と Gulp と http-server というライブラリの基礎がお試しできた。

次回はファイルの変更を検知して、Gulp でのビルドを自動で実行させるようにする。

Gulp で Browser-Sync を動かしてブラウザにリアルタイムに変更を反映させる