新しい日記

新しい日記

gulp で browserify

ちょっと前から話題の browserify を導入してみました。

browserify とは?

javascript で require ができるようになる。
jquery だとか、その他いろいろなライブラリを使っていると、その依存関係を考慮して html 順番に読み込ませたり、
あるいは順番に concat したりしてたけど、 require できたらあら楽ちん!ということらしい。(間違ってたらすいません)

私の場合は、パッケージ管理の目的が強いです。
今まで bower でそのあたりの外部ライブラリを管理していたのですが、gulp 使用目的で npm で package.json とかいうファイルを作って、さらに bower.json とかいうのも出てきて2個もいるのか、と思っていたところ。 全部 npm でできるならそのほうがいいよねと思い導入してみました。

まずはグローバルにインストールして、コマンドラインから使ってみる

$ npm install -g browserify

のちに、作業ディレクトリに移動しローカルにも インストールしましょう。

$ npm install --save-dev browserify

例えば、作業ディレクトリに以下のような中身の app.js があって、jquery に依存しているとしましょう。(※サンプルコードは適当です)

app.js

$('#hoge').hide();

ここでは、jquery を require したいので、以下のようにしましょう。

app.js

var $ = require('jquery');
$('#hoge').hide();

ここで、jquery どこででてくんのよ、という問題がありますので、npm で jquery をローカルにインストールした上で、

$ npm install --save-dev jquery

package.json に "browser" を以下のように書き足しましょう

{
  ~略~
  "browser": {
    "jquery": "./node_modules/jquery/dist/jquery.js"
  },
  "devDependencies": {
    "browserify": "^11.0.1",
  ~略~
  }
}

そしてコマンドでこうだ!

$ browserify app.js > main.js

すると、 作業ディレクトリ上に main.js という、 jquery と一緒になった app.js が得られます。簡単!

gulp で browserify したい

本題です。
どうせ開発で使うんだったら gulp で watch して自動でやってほしいですし。

開発例は先ほどと同じ前提です。

問題は gulpfile.js をどう書くかということで。
まあ普通に src して browserify ってやって gulp.dest でいけんのかなと思ってたら引っかかった。

最初に結果どうなったかを書きます。

var gulp = require('gulp');
var browserify = require('browserify');
var source = require('vinyl-source-stream');

gulp.task('js', function(){
  browserify({
    entries: ['js/app.js']
  })
  .bundle()
  .pipe(source('main.js'))
  .pipe(gulp.dest('js/'));
});

ポイントを説明します。

  1. 2行目 は gulp-browserify じゃない
  2. 3行目の vinyl-source-stream がいる

まず1番目の gulp-browserify じゃないということですが、これはなんだかもう更新されてなくてブラックリスト入りしてるらしい。
普通の browserify を使いましょう。

そして2行目の vinyl-source-stream ですが、私もあまりよくわかっていないのですが、
どうやら gulp とは、 vinyl というオブジェクトを返してそれをあれこれ手を加えていくもののようです。
そして、 bundle() で返されたオブジェクトは vinyl ではないので、 vinyl に変換する必要があると。
こちらの記事が参考になりました。

umai-bow.hateblo.jp

というわけで上述のようなソースになりました。

他参考にした記事は以下などなど

qiita.com
easyramble.com

さらにこれを uglify したい

やったーできた、じゃあこれを uglify しよう! と思って、 pipe(source('main.js'))のあとに pipe(uglify()) 書いたらエラーでる…
と、調べたところ、これもやはり vinyl オブジェクト関連の問題だった。
vinyl-buffer というものをインストールすると uglify できるようになります!

$ npm install --save-dev vinyl-buffer

最終的な gulpfile.js は以下の様になりました。

var gulp = require('gulp');
var browserify = require('browserify');
var source = require('vinyl-source-stream');
var buffer = require('vinyl-buffer');
var $ = require('gulp-load-plugins')({
    pattern: ['gulp-*', 'gulp.*'],
    replaceString: /\bgulp[\-.]/
});

gulp.task('js', function(){
  browserify({
    entries: ['js/app.js']
  })
  .bundle()
  .pipe(source('main.js'))
  .pipe(buffer())
  .pipe($.uglify())
  .pipe(gulp.dest('js/'));
});

bower もういらないかも?!