꿀꺽 거리는 소리를 사용하여 ES6을 축소하는 방법

Question

나는 비교적 수동으로 gulpfile.js을 작성하는 데있어서 새로운 방법입니다.

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']); 

지금 내가 다음 link 언급되는 자바 스크립트의 축약를 활성화해야합니다 : 나는 꿀꺽 꿀꺽 파일이 지금까지 다음과 같이 보이는 백본 및 마리오네트 기반 프로젝트가 있습니다. 내 코드의 대부분은 ES6 구문을 사용하기 때문에 uglify-js-harmony을 사용하여 ES6 지원을위한 축소기로 사용하고 있습니다. 없음 (내가 압축 시작을 위해 gulp 작업을 실행할 때 오류를 제공하지 않습니다, 지금

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']); 

하지만 결코 완료 및 빌드 (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에 대한 바로 가기)

참고 추하게-JS에 대한 선호 (최신 선호) 체크 아웃

설정 버전 https://github.com/terinjokes/gulp-uglify/blob/80da765a266cb7ff9d034a73bde0abe18d72d6de/package.json#L13를 찾습니다 uglify 지원 조화의 공식 릴리스가있을 때까지

Answer 2

babili ES6 + minifier -를 사용해보십시오 단지 내가이 동작하지 않습니다 바벨

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