Browserify + Gulpでビルドしたソースコードをuglifyする

前回のビルド結果だとソースコードがかなり大きくなってしまうので、uglifyで圧縮する。

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

$ npm install --save-dev gulp-uglify

Gulpfile.jsを修正。

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('./'));
});

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

$ 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に解決策が書いてあった。vinyl-bufferが必要らしい。

$ 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('./'));
});

うまくビルドできた。

$ 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を使ったサンプルでも試したところ、667Kが83Kに圧縮あれた。これは必須ですね。ただ、SourceMapが消える？

IK.AM

Browserify + Gulpでビルドしたソースコードをuglifyする