1. No category

Browserify + Gulpでビルドしたソースコードを
uglifyする
Title
Browserify + Gulpでビルドしたソースコードをuglifyする
Category
Programming::JavaScript::Browserify
Created at
2014-12-28T20:07:54.000+09:00
Created by
making
Updated at
2014-12-28T20:07:54.000+09:00
Updated by
making
Orininal URL
http://blog.ik.am/#/entries/309
前回のビルド結果だとソースコードがかなり大きくなってしまうので、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が消える？