Posted at

gulpとbrowserifyで指定ディレクトリ以下のファイルをすべてbundleにする

More than 5 years have passed since last update.


概要 / motivation

gulpのbrowserifyを使って複数のbundleを作りたい

一部bundleにしたくないものは除外したい


task

gulp = require 'gulp'

browserify = require 'browserify'
source = require 'vinyl-source-stream'
_ = require 'lodash'
fs = require 'fs'
async = require 'async'

gulp.task 'browserify', () ->
BUNDLE_PATHS =
SRC: 'path/to/bundles'
DEST: 'path/to/dest'
EXCEPTION_BUNDLES =
'EXEPTION_FILE_NAME'

bundleThese = (srcs) ->
_.each srcs, (_sorce) ->
bundle = browserify([BUNDLE_PATHS.SRC + _source]).bundle()
bundle
.pipe source(_source)
.pipe gulp.dest BUNDLE_PATHS.DEST

fs.readdir BUNDLE_PATHS.SRC, (err, files) ->
if err then throw err
fileList = []
async.forEach files, (file, cb) ->
if /.*\.js$/.test(file)
for tester in EXCEPTION_BUNDLES
regexp = new RegExp(tester)
if not regexp.test(file)
fileList.push(file)
bundleThese(fileList)

やってることは簡単で、指定のディレクトリ内にあるファイル名を配列に入れて、それぞれに対してbrowserifyしてるだけ。

除外したいファイル名も配列にして入れておけばとりあえず正規表現使って除外できてる。(とりあえず…


gulp所感

今までgrunt-browserify使ってたけど2倍以上早くて鼻水出た。

gulp自体、gruntに比べてかなり書きやすい。

あとはwatchできるようになったらもう離れられないと思う。

ちなみにgulp-browserifyっていうプラグインもあるけどBLACKLISTEDらしいので使わないほうがよさげ。

今日(2014/07/21)はじめてってイイカンジにbrowserifyで複数bundle作成がなさそうだったから書いた、けど、お前…これ普通にできるやつやで、とかあったら教えて下さい :worried:


公式/samples

Fast browserify builds with watchify

https://github.com/gulpjs/gulp/blob/master/docs/recipes/fast-browserify-builds-with-watchify.md


参考

how to output multiple bundles with browserify and gulp - StackOverflow

http://stackoverflow.com/questions/23835898/how-to-output-multiple-bundles-with-browserify-and-gulp