Gulpを使用してES6を小さくする方法

Question

私は比較的手動でgulpfile.jsを書きました。今、私は次のようlink呼ばれるのJavascriptの縮小を有効にする必要が

var gulp = require('gulp'); 
var $ = require('gulp-load-plugins')(); 
var browserify = require('browserify'); 
var del = require('del'); 
var watchify = require('watchify'); 
var source = require('vinyl-source-stream'); 
var stylish = require('jshint-stylish'); 
var buffer = require('vinyl-buffer'); 
var _ = require('lodash'); 

var browserSync = require('browser-sync').create(); 
var reload = browserSync.reload; 

gulp.task('clean', function(cb) { 
    return del([ 
    'app/tmp' 
    ], cb); 
}); 

gulp.task('html', function() { 
    return gulp.src('./src/index.html') 
    .pipe($.plumber()) 
    .pipe(gulp.dest('./dist')); 
}); 

gulp.task('images', function() { 
    gulp.src(['./src/assets/images/*.jpg', './src/assets/images/*.svg', './src/assets/images/*.gif', 
    './src/assets/images/*.png' 
    ]) 
    .pipe(gulp.dest('./dist/images')); 
}); 

gulp.task('vendor-css', function() { 
    gulp.src(['./src/assets/styles/vendor/*.css' 
    ]) 
    .pipe(gulp.dest('./dist')); 
}); 

gulp.task('fonts', function() { 
    gulp.src(['./src/assets/fonts/*.eot', './src/assets/fonts/*.woff', './src/assets/fonts/*.ttf', 
    './src/assets/fonts/*.svg' 
    ]) 
    .pipe(gulp.dest('./dist/fonts')); 
}); 

gulp.task('styles', function() { 
    return gulp.src('./src/main.styl') 
    .pipe($.stylus()) 
    .pipe($.autoprefixer()) 
    .pipe($.rename('bundle.css')) 
    .pipe(gulp.dest('./dist')) 
    .pipe(reload({ stream: true })); 
}); 

var bundler = _.memoize(function(watch) { 
    var options = {debug: true}; 

    if (watch) { 
    _.extend(options, watchify.args); 
    } 

    var b = browserify('./src/main.js', options); 

    if (watch) { 
    b = watchify(b); 
    } 

    return b; 
}); 

var handleErrors = function() { 
    var args = Array.prototype.slice.call(arguments); 
    delete args[0].stream; 
    $.util.log.apply(null, args); 
    this.emit('end'); 
}; 

function bundle(cb, watch) { 
    return bundler(watch).bundle() 
    .on('error', handleErrors) 
    .pipe(source('bundle.js')) 
    .pipe(buffer()) 
    .pipe($.sourcemaps.init({ loadMaps: true })) 
    .pipe($.sourcemaps.write('./')) 
    .pipe(gulp.dest('./dist')) 
    .on('end', cb) 
    .pipe(reload({ stream: true })); 
} 

gulp.task('scripts', function(cb) { 
    bundle(cb, true); 
}); 

gulp.task('jshint', function() { 
    return gulp.src(['./src/**/*.js', './test/**/*.js']) 
    .pipe($.plumber()) 
    .pipe($.jshint()) 
    .pipe($.jshint.reporter(stylish)); 
}); 

var reporter = 'spec'; 

gulp.task('mocha', ['jshint'], function() { 
    return gulp.src([ 
    './test/setup/node.js', 
    './test/setup/helpers.js', 
    './test/unit/**/*.js' 
    ], { read: false }) 
    .pipe($.plumber()) 
    .pipe($.mocha({ reporter: reporter })); 
}); 

gulp.task('build', [ 
    'clean', 
    'html', 
    'images', 
    'vendor-css', 
    'fonts', 
    'styles', 
    'scripts', 
    'test' 
]); 

gulp.task('test', [ 
    'jshint' 
]); 

gulp.task('watch', ['build'], function() { 
    browserSync.init({ 
    server: { 
     baseDir: 'dist' 
    } 
    }); 

    reporter = 'dot'; 
    bundler(true).on('update', function() { 
    gulp.start('scripts'); 
    gulp.start('test'); 
    }); 
    gulp.watch('./test/**/*.js', ['test']); 
    gulp.watch(['./src/main.styl', './src/pages/**/*.styl', './src/assets/styles/*.styl'], ['styles']); 
    gulp.watch(['./src/*.html'], ['html']); 
}); 

gulp.task('default', ['watch']); 

：私は一気ファイルは、これまでに以下のように見えたバックボーンとマリオネットベースのプロジェクトを持っています。私は、ほとんどの私のコードがES6の構文を使用しているので、uglify-js-harmonyのものをES6のサポートのための最小化として使用しています。

var gulp = require('gulp'); 
var $ = require('gulp-load-plugins')(); 
var browserify = require('browserify'); 
var del = require('del'); 
var watchify = require('watchify'); 
var source = require('vinyl-source-stream'); 
var stylish = require('jshint-stylish'); 
var buffer = require('vinyl-buffer'); 
var uglifyjs = require('uglify-js-harmony'); 
var minifier = require('gulp-uglify/minifier'); 
var pump = require('pump'); 
var _ = require('lodash'); 

var browserSync = require('browser-sync').create(); 
var reload = browserSync.reload; 

gulp.task('clean', function(cb) { 
    return del([ 
    'app/tmp' 
    ], cb); 
}); 

gulp.task('html', function() { 
    return gulp.src('./src/index.html') 
    .pipe($.plumber()) 
    .pipe(gulp.dest('./dist')); 
}); 

gulp.task('images', function() { 
    gulp.src(['./src/assets/images/*.jpg', './src/assets/images/*.svg', './src/assets/images/*.gif', 
    './src/assets/images/*.png' 
    ]) 
    .pipe(gulp.dest('./dist/images')); 
}); 

gulp.task('vendor-css', function() { 
    gulp.src(['./src/assets/styles/vendor/*.css' 
    ]) 
    .pipe(gulp.dest('./dist')); 
}); 

gulp.task('fonts', function() { 
    gulp.src(['./src/assets/fonts/*.eot', './src/assets/fonts/*.woff', './src/assets/fonts/*.ttf', 
    './src/assets/fonts/*.svg' 
    ]) 
    .pipe(gulp.dest('./dist/fonts')); 
}); 

gulp.task('styles', function() { 
    return gulp.src('./src/main.styl') 
    .pipe($.stylus()) 
    .pipe($.autoprefixer()) 
    .pipe($.rename('bundle.css')) 
    .pipe(gulp.dest('./dist')) 
    .pipe(reload({ stream: true })); 
}); 

var bundler = _.memoize(function(watch) { 
    var options = {debug: true}; 

    if (watch) { 
    _.extend(options, watchify.args); 
    } 

    var b = browserify('./src/main.js', options); 

    if (watch) { 
    b = watchify(b); 
    } 

    return b; 
}); 

var handleErrors = function() { 
    var args = Array.prototype.slice.call(arguments); 
    delete args[0].stream; 
    $.util.log.apply(null, args); 
    this.emit('end'); 
}; 

function bundle(cb, watch) { 
    return bundler(watch).bundle() 
    .on('error', handleErrors) 
    .pipe(source('bundle.js')) 
    .pipe(buffer()) 
    .pipe($.sourcemaps.init({ loadMaps: true })) 
    .pipe($.sourcemaps.write('./')) 
    .pipe(gulp.dest('./dist')) 
    .on('end', cb) 
    .pipe(reload({ stream: true })); 
} 

gulp.task('scripts', function(cb) { 
    bundle(cb, true); 
}); 

gulp.task('jshint', function() { 
    return gulp.src(['./src/**/*.js', './test/**/*.js']) 
    .pipe($.plumber()) 
    .pipe($.jshint()) 
    .pipe($.jshint.reporter(stylish)); 
}); 

gulp.task('compress', function (cb) { 
    var options = { 
    preserveComments: 'license' 
    }; 

    pump([ 
     gulp.src('./dist/bundle.js'), 
     minifier(options, uglifyjs), 
     gulp.dest('./dist') 
    ], 
    cb 
); 
}); 

var reporter = 'spec'; 

gulp.task('mocha', ['jshint'], function() { 
    return gulp.src([ 
    './test/setup/node.js', 
    './test/setup/helpers.js', 
    './test/unit/**/*.js' 
    ], { read: false }) 
    .pipe($.plumber()) 
    .pipe($.mocha({ reporter: reporter })); 
}); 

gulp.task('build', [ 
    'clean', 
    'html', 
    'images', 
    'vendor-css', 
    'fonts', 
    'styles', 
    'scripts', 
    'test', 
    'compress' 
]); 

gulp.task('test', [ 
    'jshint' 
]); 

gulp.task('watch', ['build'], function() { 
    browserSync.init({ 
    server: { 
     baseDir: 'dist' 
    } 
    }); 

    reporter = 'dot'; 
    bundler(true).on('update', function() { 
    gulp.start('scripts'); 
    gulp.start('test'); 
    }); 
    gulp.watch('./test/**/*.js', ['test']); 
    gulp.watch(['./src/main.styl', './src/pages/**/*.styl', './src/assets/styles/*.styl'], ['styles']); 
    gulp.watch(['./src/*.html'], ['html']); 
}); 

gulp.task('default', ['watch']); 

私は開始を圧縮するためgulpタスクを実行すると、すべてのエラーを与えていないが、終了したことがないんやビルド（DIST）はなし（前と同じ構成されています修正一気ファイルには、次のようになります。 minificationが起こる！）。どういうわけか.pipeを使ってこの圧縮タスクをbundle関数に組み込む必要がありますか、ここで間違ったやり方で何かしていますか？ また、bundle.jsが作成された後に縮小を行うのは正しいですか？これは、ここで何をしようとしているのですか、またはソースファイルがまだ連結されていない段階にある必要がありますか？

Answer 1

1. クローンhttps://github.com/terinjokes/gulp-uglify/
2. が、これは一時的なセット - であることをmishoo/UglifyJS2#harmony（https://github.com/mishoo/UglifyJS2#harmonyのショートカット）

ノートにuglify-jsのためれる好ましい（最新のを好ま）チェックアウト

セットバージョンでhttps://github.com/terinjokes/gulp-uglify/blob/80da765a266cb7ff9d034a73bde0abe18d72d6de/package.json#L13を探しますuglifyをサポートするハーモニーが公式にリリースされるまで

Answer 2

babili ES6 + minifierを使用してください - https://github.com/babel/babili バベルを使用してプリセットオプションとしてバビリを渡すだけです

.pipe('*.js', babel({presets: ['babili']}))