115
Help us understand the problem. What are the problem?

More than 5 years have passed since last update.

posted at

updated at

gulpとBrowserifyでJSをビルドしてみた

はじめに

gulpBrowserifyを組み合わせてフロントエンドJSをビルドする機会があったので、一通りやってみたことをまとめてみた。

gulpについて

Node.jsのstreamを活用したビルドシステム、ということらしい。
Streamのおかげでビルドフローをとても直感的に記述できると感じた。
他のWebフロントエンドのビルドシステムは使ったことがないので比較はできないけど…。

Browserifyについて

node.jsと同じように (npm、requireなどを使って) モジュール化されたフロントエンドJSが書けるツール。便利。
JSのモジュール化というと、最近はwebpackというのもあるらしい。

基本

gulpfile.coffee
gulp = require 'gulp'
source = require 'vinyl-source-stream'
browserify = require 'browserify'

gulp.task 'build', ->
  browserify
      entries: ['./src/index.js']
    .bundle()
    .pipe source 'bundle.js'
    .pipe gulp.dest 'build'

gulp.task 'default', ['build']
  • Browserify結果のReadable streamをbundle()で得る
  • vinyl-source-streamで普通のstreamからgulpのstreamに
  • gulp.destでディレクトリに突っ込む

gulp-browserifyというgulpでBrowserifyを扱うプラグインもあるが、gulp公式的には非推奨らしく、browserifyを直接使ったほうが良さそう。

ソースにCoffeeScriptを使う

gulpfile.coffee
gulp = require 'gulp'
source = require 'vinyl-source-stream'
browserify = require 'browserify'

gulp.task 'build', ->
  browserify
      entries: ['./src/index.coffee']
      extensions: ['.coffee', '.js']
    .transform 'coffeeify'
    .bundle()
    .pipe source 'bundle.js'
    .pipe gulp.dest 'build'
  • .transform 'coffeeify'で、coffeeifyというCoffeeScriptサポートを追加するBrowserify用のプラグインを指定
    • 入力にCoffeeScriptが使えるようになる。
  • browserify-shimなどの他のプラグインも同様に使える。

Uglifyを使ってminify

gulpfile.coffee
gulp = require 'gulp'
source = require 'vinyl-source-stream'
buffer = require 'vinyl-buffer'
browserify = require 'browserify'
uglify = require 'gulp-uglify'

gulp.task 'build', ->
  browserify
      entries: ['./src/index.coffee']
      extensions: ['.coffee', '.js']
    .transform 'coffeeify'
    .bundle()
    .pipe source 'bundle.js'
    .pipe buffer()
    .pipe uglify()
    .pipe gulp.dest 'build'

これとは別に、Browserifyのプラグイン (uglifyify)を使ってuglifyする方法もあるようだ。

Source maps を出力する

gulpfile.coffee
gulp = require 'gulp'
source = require 'vinyl-source-stream'
buffer = require 'vinyl-buffer'
browserify = require 'browserify'
uglify = require 'gulp-uglify'
sourcemaps = require 'gulp-sourcemaps'

gulp.task 'build', ->
  browserify
      entries: ['./src/index.coffee']
      extensions: ['.coffee', '.js']
      debug: true
    .transform 'coffeeify'
    .bundle()
    .pipe source 'bundle.js'
    .pipe buffer()
    .pipe sourcemaps.init
      loadMaps: true
    .pipe uglify()
    .pipe sourcemaps.write()
    .pipe gulp.dest 'build'

gulp.task 'watch', ->
  gulp.watch path, ['compile']

gulp.task 'default', ['compile']
  • 最初のbrowserifydebug: trueを指定
    • これでBrowserifyの出力にはsource mapsがコメントとして含まれるようになる
  • sourcemaps.initloadMaps: trueを指定
    • 使っているのはgulp-sourcemapsというプラグインで、gulp中の処理(uglifyなど)のsource mapを生成してくれる
    • loadMaps: trueでBrowserifyの出力の中のsource mapを拾う
  • sourcemaps.write()でsource mapsをコメントとして出力
    • 引数を指定すると別ファイルにもできる

追記

watchifyで監視・インクリメンタルビルド

watchifyを使うと、ファイルを監視してインクリメンタルなbrowserifyビルドを行うことができる。
特に大きなプロジェクトになると全体を毎回ビルドし直すより圧倒的に速いので捗る。

gulpと組み合わせる方法の参考: https://github.com/gulpjs/gulp/blob/master/docs/recipes/fast-browserify-builds-with-watchify.md

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Sign upLogin
115
Help us understand the problem. What are the problem?