Skip to content

Instantly share code, notes, and snippets.

@suisho
Last active September 2, 2015 15:05
Show Gist options
  • Save suisho/1f6721d4904899bf4f85 to your computer and use it in GitHub Desktop.
Save suisho/1f6721d4904899bf4f85 to your computer and use it in GitHub Desktop.
Browserifyの共通モジュール部分だけ分離したいならfactor-bundleが便利 ref: http://qiita.com/inuscript/items/b933af4d44a4712cb8f8
browserify x.js y.js -p [ factor-bundle -o bundle/x.js -o bundle/y.js ] \
-o bundle/common.js
$ npm i -D gulp browserify babelify factor-bundle vinyl-source-stream
$ npm i -D mkdirp glob del
.
├── output
│   ├── client
│   └── entry
├── src
│   ├── entry
│   └── lib
└── vendor
<script type="text/javascript" src="./output/client/common.js"></script>
<script type="text/javascript" src="./output/entry/foo.js"></script>
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