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/'));
});ポイントを説明します。
- 2行目 は gulp-browserify じゃない
- 3行目の vinyl-source-stream がいる
まず1番目の gulp-browserify じゃないということですが、これはなんだかもう更新されてなくてブラックリスト入りしてるらしい。
普通の browserify を使いましょう。
そして2行目の vinyl-source-stream ですが、私もあまりよくわかっていないのですが、
どうやら gulp とは、 vinyl というオブジェクトを返してそれをあれこれ手を加えていくもののようです。
そして、 bundle() で返されたオブジェクトは vinyl ではないので、 vinyl に変換する必要があると。
こちらの記事が参考になりました。
というわけで上述のようなソースになりました。
他参考にした記事は以下などなど
さらにこれを 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 もういらないかも？！
