LoginSignup
1
2

More than 5 years have passed since last update.

gulpでwatchifyを使うと、require出来ないモジュールがある

Posted at

下記のjs:bundleタスクでwatchifyでjsを監視するようにしてたのですが、どうにもうまくいかない。最初はうまく動いていたのに、突然taskがStarting 'js:bundle'...と表示されてからFinishedにならずにbundle.jsが吐出されなくなりました。watchifyはbrowserifyのラッパーなので、browserifyでも同じ症状が出るかもしれません。

reuiqreの記述を外していく、どうやらhandlebarsだけ読み込めていなかったようです。jqueryとbootstrapだけだとbundleができます。ただ、一つ謎なのがhandlebars.jsではなくhandlebars.min.jsを置いて、require 'handlebars.min'とすると何故かbundleできます。

そこでwatchifyでエラーログを出すようにして、再度トライ。

# src.~ ,destPathにはパスの文字列が入っている

gulp.task 'js:bundle', ->
  bundler = watchify browserify(cache: {}, packageCache: {})
  bundler.add(src.js + '/app.js')
  bundle = ->
    bundler.bundle()
      .on 'error', (err) ->
        console.log err.message
        @.emit 'end'
      .pipe source('bundle.js')
      .pipe buffer()
      .pipe $.uglify()
      .pipe $.rename 'app.min.js'
      .pipe gulp.dest(destPath + '/js/')
  bundler.on 'update', bundle
  bundle()
$ gulp js:bundle
[02:22:53] Requiring external module coffee-script/register
[02:22:54] Using gulpfile ~/repo/table_generetor_2/gulpfile.coffee
[02:22:54] Starting 'js:bundle'...
Cannot find module 'source-map' from '/Users/mitsuru/repo/table_generetor_2/src/js'
[02:22:54] Finished 'js:bundle' after 644 ms

source-mapというモジュールが見つからないと出るのでnpm install --save-dev source-mapを叩いて、gulpfileは何もいじらずに再度タスクを走らせると今度はbundle出来ました。圧縮版の.min.jsならsrouce-mapがいらないとはどういうことだろう?

ちなみに下記のようにerrorのイベントハンドラの記述場所を変えたらエラーが出なくなりました。どうやらbundle()の直後に記述しないといけないようです。

gulp.task 'js:bundle', ->
  bundler = watchify browserify(cache: {}, packageCache: {})
  bundler.add(src.js + '/app.js')
  bundle = ->
    bundler.bundle()
      .pipe source('bundle.js')
      .pipe buffer()
      .pipe $.uglify()
      .pipe $.rename 'app.min.js'
      .pipe gulp.dest(destPath + '/js/')
  bundler.on 'update', bundle
  bundler.on 'error', (err) ->
        console.log err.message
        @.emit 'end'
  bundle()
1
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
2