Last active
September 2, 2015 15:05
-
-
Save suisho/1f6721d4904899bf4f85 to your computer and use it in GitHub Desktop.
Browserifyの共通モジュール部分だけ分離したいならfactor-bundleが便利 ref: http://qiita.com/inuscript/items/b933af4d44a4712cb8f8
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
browserify x.js y.js -p [ factor-bundle -o bundle/x.js -o bundle/y.js ] \ | |
-o bundle/common.js |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
$ npm i -D gulp browserify babelify factor-bundle vinyl-source-stream | |
$ npm i -D mkdirp glob del |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
. | |
├── output | |
│ ├── client | |
│ └── entry | |
├── src | |
│ ├── entry | |
│ └── lib | |
└── vendor |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<script type="text/javascript" src="./output/client/common.js"></script> | |
<script type="text/javascript" src="./output/entry/foo.js"></script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
var gulp = require('gulp') | |
var path = require("path") | |
var browserify = require('browserify') | |
var babelify = require('babelify') | |
var source = require('vinyl-source-stream') | |
var glob = require("glob") | |
var del = require("del") | |
var mkdirp = require("mkdirp") | |
var factor = require('factor-bundle') | |
var dest = './output/' | |
gulp.task('clean', function() { | |
del(dest) | |
}) | |
gulp.task('browserify', function() { | |
// entry対象が結構あるような状態を想定 | |
var entries = "./src/entry/**/*" | |
// 出力先をこのあたりに・・・ | |
var outputDir = "./output/entry" | |
// factor-bundleの出力先を決める。 | |
// ちゃんとディレクトリ出力先を変更しておかないと元ファイル書き換えられちゃうので注意! | |
var files = glob.sync(entries, {nodir: true}) | |
var outputs = files.map(function(file){ | |
return file.replace("./src/entry", outputDir) | |
}) | |
// factor-bundleの出力先のディレクトリが無かったりすると面倒見てくれないので作っとく。 | |
mkdirp.sync(outputDir) | |
// browserify部分開始 | |
browserify({ | |
entries: files, | |
extensions: ['js', 'jsx'], | |
}) | |
// transformしたいならこんな具合。最近鉄板なのでbabelっとく。 | |
// babelのtransformに際して、何らかの理由でnpm入りしないなーみたいなのがあれば対象外にしておく。 | |
// ignoreオプションではなくonlyオプションを使うのもよい | |
.transform(babelify.configure({ | |
ignore: /vendor/ | |
})) | |
// factor-bundleの登場。先ほど用意したoutputを追加 | |
.plugin(factor, { | |
output: outputs | |
}) | |
// 共通部分を出力してやる。 | |
.bundle() | |
.pipe(source("common.js")) | |
.pipe(gulp.dest(path.join(dest, "client"))) | |
}) | |
gulp.task('watch', function() { | |
gulp.watch('src/**/*', ['browserify']) | |
}) | |
gulp.task('default', ['browserify', 'watch']) | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment