更新日: 2015年3月23日
jQuery & JavaScript

Browserify + GulpでクライアントのJavaScript / CoffeeScriptでrequire

先日以下の記事で、クライアントサイド JavaScript での require による依存解決の方法を読みました。一言で言うと Browserify というライブラリを使って、クライアント側 JavaScript でも、モジュールをファイルごとに分割して require で読み込むための手順。

Browserifyでrequireを使ってjavascriptの依存関係をすっきりにしてみる – ぼくのかんがえたさいきょうのうぇぶさーびす

これを真似したくて、昨日日曜日に試したのでその記録です。

【お知らせ】英単語を画像イメージで楽に暗記できる辞書サイトを作りました。英語学習中の方は、ぜひご利用ください！

画像付き英語辞書 Imagict | 英単語をイメージで暗記
【開発記録】
英単語を画像イメージで暗記できる英語辞書サービスを作って公開しました

ぼくうぇぶさんのページでは、JavaScript のビルドツール（タスクランナー）として Grunt を使ってありますが、個人の好みにより私は Gulp を使用します。Grunt も Gulp も JavaScript/CSS などフロントエンド用のビルドツールで、C言語の Make、Ruby の Rake に相当するようなツールです。

browserify の公式ページ＆ドキュメント。
Screen Shot 2015-03-23 at 11.00.27
Browserify
https://github.com/substack/node-browserify

gulp の公式ページ＆ドキュメント。
Screen Shot 2015-03-23 at 11.01.14
gulp.js – the streaming build system
https://github.com/gulpjs/gulp/blob/master/docs/getting-started.md

— 環境 —
Mac OS X
node v0.10.28
npm 2.4.1
gulp CLI version 3.8.11
browserify 9.0.3

では以降、作業記録です。

Gulp と Browserify をインストール

node.js が入ってなかったら最初に入れておきます。私の環境では、Mac 上 Homebrew でインストール。


$ brew install node.js

$ brew install node.js

デフォルトでは brew install node.js で、npm もインストールされます。


$ node -v
v0.10.28
$ npm -v
2.4.1

$ node -v

v0.10.28

$ npm -v

2.4.1

続いて、npm で gulp と browserify を入れる。-g オプションでグローバルにインストール。


$ npm install -g gulp
$ npm install -g browserify
$ gulp -v
[22:03:59] CLI version 3.8.11
$ browserify -v
9.0.3

$ npm install -g gulp

$ npm install -g browserify

$ gulp -v

[22:03:59] CLI version 3.8.11

$ browserify -v

9.0.3

必要な npm パッケージを作業ディレクトリにインストール

次に、作業用のディレクトリ作成して、必要となる npm パッケージをインストールしていきます。


$ mkdir -p ~/work/browserify-gulp-test
$ cd ~/work/browserify-gulp-test
$ mkdir dest
$ mkdir lib

$ mkdir -p ~/work/browserify-gulp-test

$ cd ~/work/browserify-gulp-test

$ mkdir dest

$ mkdir lib

dest はビルドした JavaScript ファイルを配置するディレクトリ、lib は後ほど作成する CoffeeScript のモジュールを配置するディレクトリです。

続いて必要な npm パッケージのインストール。どうやら gulp, browserify などは、作業ディレクトリにもインストールする必要がある模様。その他、CoffeeScript を使えるようにするモジュールを入れます。


$ npm install gulp browserify coffee-script coffeeify vinyl-source-stream

$ npm install gulp browserify coffee-script coffeeify vinyl-source-stream

-g オプションを付けないと、作業中ディレクトリに node_modules というディレクトリが作成されて、そこに npm ライブラリが入る。

coffee-script: gulp のタスクを CoffeeScript で書けるようにする。
coffeeify: CoffeeScript で書いたファイルを Browserify でビルドできるようにする。
vinyl-source-stream: 謎。よく分からんけどなんか必要らしい。

また、調査中に npm install コマンドで –save-dev オプションを付ける書き方を何度も見たのですが、これは…


$ npm init
$ npm install --save-dev gulp browserify coffee-script coffeeify vinyl-source-stream

$ npm init

$ npm install --save-dev gulp browserify coffee-script coffeeify vinyl-source-stream

と npm init して –save-dev オプションを付けてインストールすると、npm init で生成される package.json に、インストールしたライブラリの情報を書き込んでくれるそうです。node.js ライブラリとして公開する場合は、package.json が必要とのことですが、今回は本題から外れるのでスキップ。

npmでnode.jsのpackageを管理する – Qiita
npmの使い方の勉強メモ1(node.js=v0.11.16, npm=2.3.0) – msakamoto-sfのはてなブログ

動作テスト用のファイルを作成

続いて、CoffeeScript ファイルを作成していきます。四角形、三角形、円の面積を求めるモジュールとそれを使う main.coffee を作りました。以下のようなディレクトリ構成になり、モジュール用のファイルは lib ディレクトリ以下に配置します。


browserify-gulp-test/
| dest/
| lib/
| | circle.coffee
| | rectangle.coffee
| | shape.coffee
| | triangle.coffee
| node_modules/
| gulpfile.coffee
| main.coffee
| main.html

browserify-gulp-test/

| dest/

| lib/

| | circle.coffee

| | rectangle.coffee

| | shape.coffee

| | triangle.coffee

| node_modules/

| gulpfile.coffee

| main.coffee

| main.html

lib/shape.coffee

class Shape
  constructor: (x = 0, y = 0) ->
    # instance variables
    @x = x  
    @y = y
 
  # public instance method to be overridden
  area: ->
    "Can not calculate my area!"

module.exports = Shape

class Shape

constructor: (x = 0, y = 0) ->

# instance variables

@x = x

@y = y

# public instance method to be overridden

area: ->

"Can not calculate my area!"

module.exports = Shape

lib/rectangle.coffee

Shape = require './shape'

class Rectangle extends Shape
  constructor: (x, y) ->
    super(x, y)
 
  area: ->
    @x * @y

module.exports = Rectangle

Shape = require './shape'

class Rectangle extends Shape

constructor: (x, y) ->

super(x, y)

area: ->

@x * @y

module.exports = Rectangle

lib/triangle.coffee

Shape = require './shape'

class Triangle extends Shape
  constructor: (x, y) ->
    super(x, y)
 
  area: ->
    @x * @y / 2

module.exports = Triangle

Shape = require './shape'

class Triangle extends Shape

constructor: (x, y) ->

super(x, y)

area: ->

@x * @y / 2

module.exports = Triangle

lib/circle.coffee

Shape = require './shape'

class Circle extends Shape
  constructor: (r) ->
    super(r)
 
  area: ->
     Math.PI * @x * @x

module.exports = Circle

Shape = require './shape'

class Circle extends Shape

constructor: (r) ->

super(r)

area: ->

Math.PI * @x * @x

module.exports = Circle

main.coffee

Rectangle = require './lib/rectangle'
Triangle = require './lib/triangle'
Circle = require './lib/circle'

# Rectangle
rec = new Rectangle(3, 5)
alert rec.area()           # => 15
 
# Triangle
tri = new Triangle(3, 5)
alert tri.area()           # => 7.5
 
# Circle
cir = new Circle(3)
alert cir.area()           # => 28.274333882308138

Rectangle = require './lib/rectangle'

Triangle = require './lib/triangle'

Circle = require './lib/circle'

# Rectangle

rec = new Rectangle(3, 5)

alert rec.area() # => 15

# Triangle

tri = new Triangle(3, 5)

alert tri.area() # => 7.5

# Circle

cir = new Circle(3)

alert cir.area() # => 28.274333882308138

Browserify を使うと、以上のように require でモジュールの他ファイルを読み込むように書けます。すごい。require で指定するファイル名で拡張子（.coffee）を省略していますが、これは後述する gulpfile.coffee で省略するように設定することで利用できる。

gulpfile.coffee を作成して Gulp でビルド

以下の gulpfile.coffee を作成。

gulpfile.coffee

gulp = require 'gulp'
browserify = require 'browserify'
source = require 'vinyl-source-stream'

gulp.task 'build', ->
  browserify 
    entries: ['./main.coffee']      # ビルド対象のファイルを指定
    extensions: ['.coffee', '.js']  # 省略できる拡張子の指定
  .transform 'coffeeify'    # CoffeeScript ファイルを Browserify でビルド
  .bundle()
  .pipe source 'main.js'    # ビルド後のファイル名
  .pipe gulp.dest './dest'  # ビルド後のファイルを配置するディレクトリ

gulp.task('default', ['build']);  # デフォルトのタスクを指定

gulp = require 'gulp'

browserify = require 'browserify'

source = require 'vinyl-source-stream'

gulp.task 'build', ->

browserify

entries: ['./main.coffee'] # ビルド対象のファイルを指定

extensions: ['.coffee', '.js'] # 省略できる拡張子の指定

.transform 'coffeeify' # CoffeeScript ファイルを Browserify でビルド

.bundle()

.pipe source 'main.js' # ビルド後のファイル名

.pipe gulp.dest './dest' # ビルド後のファイルを配置するディレクトリ

gulp.task('default', ['build']); # デフォルトのタスクを指定

続いて gulp でビルド実行。


$ gulp

$ gulp

gulpfile.coffee で default のタスクを書いておくと、コマンドラインでタスクの指定を省略して gulp のみでビルド実行した時に、default に書いたタスクが実行される。

これで CoffeeScript から素の JavaScript にコンパイルされたファイルが、dest/main.js に生成されました。

テスト用の HTML ファイルを作成

コンパイルされた dest/main.js を読み込んで、ブラウザで実行する HTML ファイルを作成します。

main.html

<!DOCTYPE HTML>
<html lang="ja">
<head>
	<meta charset="UTF-8">
	<title></title>
  <script src="./dest/main.js"></script>
</head>
<body>
	
</body>
</html>