---
title: Browserify + Gulpでビルドしたソースコードをuglifyする
tags: ["Bower", "Browserify", "Gulp", "JavaScript"]
categories: ["Programming", "JavaScript", "Browserify"]
date: 2014-12-28T11:07:54Z
updated: 2014-12-28T11:07:54Z
---

[前回](http://blog.ik.am/#/entries/308)のビルド結果だとソースコードがかなり大きくなってしまうので、uglifyで圧縮する。

gulpを使っているときは`gulp-uglify`を使う。


``` bash
$ npm install --save-dev gulp-uglify
```

`Gulpfile.js`を修正。

``` javascript
var browserify = require('browserify');
var gulp = require('gulp');
var source = require('vinyl-source-stream');
var es6ify = require('es6ify');
var uglify = require('gulp-uglify'); // here

gulp.task('browserify', function () {
    return browserify({debug: true})
        .add(es6ify.runtime)
        .transform(es6ify)
        .require(require.resolve('./index.js'), {entry: true})
        .bundle()
        .pipe(source('bundle.js'))
        .pipe(uglify()) // here
        .pipe(gulp.dest('./'));
});
```

このままだとエラーになった。

``` bash
$ gulp browserify
[20:00:57] Using gulpfile ~/work/hello-es6/Gulpfile.js
[20:00:57] Starting 'browserify'...

events.js:72
        throw er; // Unhandled 'error' event
              ^
Error: /Users/maki/work/hello-es6/bundle.js: Streaming not supported
```

Streamingがサポートされていない??

[StackOverflow](http://stackoverflow.com/questions/24992980/how-to-uglify-output-with-browserify-in-gulp)に解決策が書いてあった。`vinyl-buffer`が必要らしい。

``` bash
$ npm install --save-dev vinyl-buffer
```

`Gulpfile.js`を再修正。

```
var browserify = require('browserify');
var gulp = require('gulp');
var source = require('vinyl-source-stream');
var buffer = require('vinyl-buffer'); // here
var es6ify = require('es6ify');
var uglify = require('gulp-uglify'); // here

gulp.task('browserify', function () {
    return browserify({debug: true})
        .add(es6ify.runtime)
        .transform(es6ify)
        .require(require.resolve('./index.js'), {entry: true})
        .bundle()
        .pipe(source('bundle.js'))
        .pipe(buffer()) // here
        .pipe(uglify()) // here
        .pipe(gulp.dest('./'));
});
```

うまくビルドできた。

``` bash
$ gulp browserify
[20:05:07] Using gulpfile ~/work/hello-es6/Gulpfile.js
[20:05:07] Starting 'browserify'...
[20:05:08] Finished 'browserify' after 1.27 s
```

227Kから40Kまで圧縮された。

[bowerを使ったサンプル](http://blog.ik.am/#/entries/307)でも試したところ、667Kが83Kに圧縮あれた。これは必須ですね。
ただ、SourceMapが消える？