browserify と watchify で複数ファイルを個別にbundleする方法。たぶん最小構成のはず。

今更ながら。
同じようなことをするやり方は様々あると思うが、なるべくnode moduleはインストールしたくないし、できればgulp-watchifyより、本家のwatchifyの方が何となく良いんじゃないか？とか、よくわかっていないなりにここまでたどり着いたので、その方法をメモ。

# やりたいこと
```text:フォルダ構成
/src/js
├── module
│    ├── _nav.js
│    ├── _slide.js
│    └── _calc.js
│ 
├── top.js
└── page.js
```

サイト内で共通のものはモジュールに。
サイト内の各ページ単位で、使いたいモジュールだけをrequireしたい。

この例で言えば、
top.jsは、`_nav.js`と`_slide.js`を。
page.jsは、`_nav.js`と`_calc.js`をそれぞれrequireできるようにしたい。

```text:出力結果
dist/js
├── top.js     //_nav.jsと_slide.jsをrequire
└── page.js  //_nav.jsと_calc.jsをrequire
```

# なんでそんなことするの？
複数人で開発していると、誰がどこを触って、いつ間にか何かが追加されたり、問題が起きたり。その問題範囲を明確にするために良いのかなー、どうなのかなーで考えていました。

この例で言えば、
私が作ったのはtop.jsです。page.jsは、作ってないからそんなの知りません！
って言えたらいいな。

# 最低限必要なmoduleはたったの４つ
* gulp
* browserify
* watchify
* vinyl-source-stream

# gulpfile.js
```javascript:gulpfile.js
'use strict';

/**************************************************
 * modules laod
 *************************************************/
//gulp
var gulp            = require('gulp');

//browserify module
var browserify      = require('browserify');
var watchify        = require('watchify');
var source          = require('vinyl-source-stream');

/**************************************************
 * path
 *************************************************/
var paths = {
    src : './src/js/',
    dist : './dist/js/',
    files : ['top.js', 'page.js']
}

/**************************************************
 * tasks
 *************************************************/
//browserify and watchify
gulp.task('bundle', function(){
    paths.files.forEach(function(entryPoint){
        // bundle option
        var bundler = watchify(
            browserify({
                cache: {}, //watchifyの差分ビルドを有効化
                entries:[paths.src + entryPoint],
                debug: true,
                packageCache: {} //watchifyの差分ビルドを有効化
            })
        );
        //bundle function
        function bundled(){
            return bundler
                .bundle()
                .pipe(source(entryPoint))
                .pipe(gulp.dest(paths.dist));
        }
        bundler.on('update', bundled);
        bundler.on('log', function(message){console.log(message)});
        return bundled();
    })
});

```

# サンプルコード
```javascript:module/_nav.js
function nav() {
    console.log("nav.js");
}

module.exports = nav;
```
```javascript:module/_slide.js
function slide() {
    console.log("slide.js");
}

module.exports = slide;
```
```javascript:top.js
var nav = require('./module/_nav');
var slide = require('./module/_slide');
```

```text:出力結果
(function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
function nav() {
    console.log("nav.js");
}

module.exports = nav;

},{}],2:[function(require,module,exports){
function slide() {
    console.log("slide.js");
}

module.exports = slide;

},{}],3:[function(require,module,exports){
var nav = require('./module/_nav');
var slide = require('./module/_slide');

},{"./module/_nav":1,"./module/_slide":2}]},{},[3])
//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIm5vZGVfbW9kdWxlcy9icm93c2VyLXBhY2svX3ByZWx1ZGUuanMiLCJzcmMvanMvbW9kdWxlL19uYXYuanMiLCJzcmMvanMvbW9kdWxlL19zbGlkZS5qcyIsInNyYy9qcy90b3AuanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7QUNBQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7O0FDTEE7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBOztBQ0xBO0FBQ0E7QUFDQSIsImZpbGUiOiJnZW5lcmF0ZWQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlc0NvbnRlbnQiOlsiKGZ1bmN0aW9uIGUodCxuLHIpe2Z1bmN0aW9uIHMobyx1KXtpZighbltvXSl7aWYoIXRbb10pe3ZhciBhPXR5cGVvZiByZXF1aXJlPT1cImZ1bmN0aW9uXCImJnJlcXVpcmU7aWYoIXUmJmEpcmV0dXJuIGEobywhMCk7aWYoaSlyZXR1cm4gaShvLCEwKTt2YXIgZj1uZXcgRXJyb3IoXCJDYW5ub3QgZmluZCBtb2R1bGUgJ1wiK28rXCInXCIpO3Rocm93IGYuY29kZT1cIk1PRFVMRV9OT1RfRk9VTkRcIixmfXZhciBsPW5bb109e2V4cG9ydHM6e319O3Rbb11bMF0uY2FsbChsLmV4cG9ydHMsZnVuY3Rpb24oZSl7dmFyIG49dFtvXVsxXVtlXTtyZXR1cm4gcyhuP246ZSl9LGwsbC5leHBvcnRzLGUsdCxuLHIpfXJldHVybiBuW29dLmV4cG9ydHN9dmFyIGk9dHlwZW9mIHJlcXVpcmU9PVwiZnVuY3Rpb25cIiYmcmVxdWlyZTtmb3IodmFyIG89MDtvPHIubGVuZ3RoO28rKylzKHJbb10pO3JldHVybiBzfSkiLCJmdW5jdGlvbiBuYXYoKSB7XG4gICAgY29uc29sZS5sb2coXCJuYXYuanNcIik7XG59XG5cbm1vZHVsZS5leHBvcnRzID0gbmF2O1xuIiwiZnVuY3Rpb24gc2xpZGUoKSB7XG4gICAgY29uc29sZS5sb2coXCJzbGlkZS5qc1wiKTtcbn1cblxubW9kdWxlLmV4cG9ydHMgPSBzbGlkZTtcbiIsInZhciBuYXYgPSByZXF1aXJlKCcuL21vZHVsZS9fbmF2Jyk7XG52YXIgc2xpZGUgPSByZXF1aXJlKCcuL21vZHVsZS9fc2xpZGUnKTtcbiJdfQ==

```

# source-mapは？minifyは？
どちらもvinyl-bufferのmoduleをインストールしないといけない。
まぁ必要であれば！

## 参考
http://2inc.org/blog/2015/05/13/4818/
http://takahashifumiki.com/web/programing/3512/
http://qiita.com/DJ_Middle/items/3e533922078914285268