You can leverage gulp-babel as such...
const gulp = require('gulp');
const babel = require('gulp-babel');
const uglify = require('gulp-uglify');
gulp.task('minify', () => {
return gulp.src('src/**/*.js')
.pipe(babel({
presets: ['es2015']
}))
.pipe(uglify())
// [...]
});
This will transpile your es6 early in the pipeline and churn out as widely supported "plain" javascript by the time you minify.
May be important to note - as pointed out in comments - the core babel compiler ships as a peer dependency in this plugin. In case the core lib is not being pulled down via another dep in your repo, ensure this is installed on your end.
Looking at the peer dependency in gulp-babel the author is specifying @babel/core (7.x). Though, the slightly older babel-core (6.x) will work as well. My guess is the author (who is the same for both projects) is in the midsts of reorganizing their module naming. Either way, both npm installation endpoints point to https://github.com/babel/babel/tree/master/packages/babel-core, so you'll be fine with either of the following...
npm install babel-core --save-dev
or
npm install @babel/core --save-dev
» npm install gulp-uglify
You can leverage gulp-babel as such...
const gulp = require('gulp');
const babel = require('gulp-babel');
const uglify = require('gulp-uglify');
gulp.task('minify', () => {
return gulp.src('src/**/*.js')
.pipe(babel({
presets: ['es2015']
}))
.pipe(uglify())
// [...]
});
This will transpile your es6 early in the pipeline and churn out as widely supported "plain" javascript by the time you minify.
May be important to note - as pointed out in comments - the core babel compiler ships as a peer dependency in this plugin. In case the core lib is not being pulled down via another dep in your repo, ensure this is installed on your end.
Looking at the peer dependency in gulp-babel the author is specifying @babel/core (7.x). Though, the slightly older babel-core (6.x) will work as well. My guess is the author (who is the same for both projects) is in the midsts of reorganizing their module naming. Either way, both npm installation endpoints point to https://github.com/babel/babel/tree/master/packages/babel-core, so you'll be fine with either of the following...
npm install babel-core --save-dev
or
npm install @babel/core --save-dev
The accepted answer doesn't really answer how to minify straight es6. If you want to minify es6 without transpiling, gulp-uglify v3.0.0 makes that possible:
Update March 2019
Using my original answer, you definitely want to replace the uglify-es package with terser, as it seems uglify-es is no longer being maintained.
Original answer, still works:
1.) First, upgrade your gulp-uglify package to > 3.0.0 If you're using yarn and want to update to the latest version:
yarn upgrade gulp-uglify --latest
2.) Now you can use uglify-es, the "es6 version" of uglify, as so:
const uglifyes = require('uglify-es');
const composer = require('gulp-uglify/composer');
const uglify = composer(uglifyes, console);
gulp.task('compress', function () {
return gulp.src('src/*.js')
.pipe(uglify())
.pipe(gulp.dest('dist'))
});
For more info: https://www.npmjs.com/package/gulp-uglify
Code breaks after using gulp-uglify
Newest 'gulp-uglify' Questions - Stack Overflow
Gulp and uglify - Stack Overflow
Error with gulp-uglify
Videos
» npm install gulp-uglify-es
Please see the edit at the bottom of the question
Here's my entire gulpfile.js.
I was under the impression that the following should work: .pipe(minifyCss()) and, .pipe(uglify())
Assuming that they were appearing after the gulp.src(...) selection of files to minify. Any advice is appreciated. The output of my .css and .js files are not minified, and look exactly the same as the source files. At the very least, I can somewhat see how my css minification wouldn't work, since it may not be correctly syntaxed for scss minification, although the javascript minification looks like it should be working... however, as mentioned, neither are.
var gulp = require('gulp');
var serve = require('gulp-serve');
var sass = require('gulp-sass');
var useref = require('gulp-useref');
var uglify = require('gulp-uglify');
var minifyCss = require('gulp-minify-css');
gulp.task('serve', serve('dist'));
gulp.task('styles', function() {
return gulp.src('app/styles/**/*.scss')
.pipe(sass({
style: "compressed"
}).on('error', sass.logError))
.pipe(minifyCss())
.pipe(gulp.dest('dist/css'));
});
gulp.task('scripts', function() {
return gulp.src('app/scripts/**/*.js')
.pipe(uglify())
.pipe(gulp.dest('dist/js'));
});
gulp.task('html', function() {
var assets = useref.assets();
return gulp.src('app/*.html')
.pipe(assets)
.pipe(assets.restore())
.pipe(useref())
.pipe(gulp.dest('dist'));
});
gulp.task('default', ['styles', 'scripts', 'html'], function() {
// Do nothing/
});EDIT
If I run the scripts task by itself gulp scripts then it minifies fine - only when I run the default task does the minification actually fail. Perhaps there is an asynchronous issue going on?
EDIT 2
It looks to be these two lines that are causing the problem:
.pipe(assets) .pipe(assets.restore())
Which are part of the html gulp task. Need to dig further into why caling useref's asset's restore() erases all minification.
According to the gulp-useref documentation:
It can handle file concatenation but not minification. Files are then passed down the stream. For minification of assets or other modifications, use gulp-if to conditionally handle specific types of assets.
This is kinda balls, imo. I'd like to keep minification out of my 'html' gulp task, but according to this in order to use useref then I'll need to keep the minification in in my 'html' task?