今更ながら。
同じようなことをするやり方は様々あると思うが、なるべくnode moduleはインストールしたくないし、できればgulp-watchifyより、本家のwatchifyの方が何となく良いんじゃないか?とか、よくわかっていないなりにここまでたどり着いたので、その方法をメモ。
やりたいこと
フォルダ構成
/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できるようにしたい。
出力結果
dist/js
├── top.js //_nav.jsと_slide.jsをrequire
└── page.js //_nav.jsと_calc.jsをrequire
なんでそんなことするの?
複数人で開発していると、誰がどこを触って、いつ間にか何かが追加されたり、問題が起きたり。その問題範囲を明確にするために良いのかなー、どうなのかなーで考えていました。
この例で言えば、
私が作ったのはtop.jsです。page.jsは、作ってないからそんなの知りません!
って言えたらいいな。
最低限必要なmoduleはたったの4つ
- gulp
- browserify
- watchify
- vinyl-source-stream
gulpfile.js
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();
})
});
サンプルコード
module/_nav.js
function nav() {
console.log("nav.js");
}
module.exports = nav;
module/_slide.js
function slide() {
console.log("slide.js");
}
module.exports = slide;
top.js
var nav = require('./module/_nav');
var slide = require('./module/_slide');
出力結果
(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