How to transpile CoffeeScript to JavaScript (last 2 versions and ie >= 11) using Browserify and coffeeify transform? - gulp

Question

CoffeeScript 2 outputs latest, modern syntax which is not compatible with older browsers and gulp-uglify.
GulpUglifyError: unable to minify JavaScript
Caused by: SyntaxError: Unexpected token: operator «=», expected: punc «,»

Answer 1

Had a hard time figuring this one out so dropping some code here in case it can help others.
Gulp 4 and CoffeeScript 2 introduces breaking changes so updating dependencies can be tedious.
One breaking change is that CoffeeScript now outputs modern syntax that isn’t supported in older browsers (it also breaks gulp-uglify). To support these browsers (and to keep using gulp-uglify), transpilation is required.
Install packages
npm install #babel/core #babel/preset-env browserify coffeeify coffeescript glob gulp gulp-sourcemaps gulp-uglify gulp-util merge-stream vinyl-buffer vinyl-source-stream --save-dev
Edit gulpfile.js
'use strict';
const gulp = require('gulp');
const gutil = require('gulp-util');
const merge = require('merge-stream');
const browserify = require('browserify');
const glob = require('glob');
const source = require('vinyl-source-stream');
const path = require('path');
const buffer = require('vinyl-buffer');
const sourcemaps = require('gulp-sourcemaps');
const uglify = require('gulp-uglify');
var minify;
if (process.env.MINIFY === 'true') {
minify = true;
} else {
minify = false;
}
function browserifyTask() {
var files = glob.sync('./app/*.coffee');
return merge(files.map(function(file) {
return browserify({
entries: file,
extensions: ['.coffee'],
debug: true
})
.transform('coffeeify', {
transpile: {
presets: [
[
'#babel/preset-env',
{
targets: {
browsers: ['last 2 versions', 'ie >= 11']
}
}
]
]
}
})
.on('error', gutil.log)
.bundle()
.pipe(source(path.basename(file, '.coffee') + ".js"))
.pipe(buffer())
.pipe(sourcemaps.init({ loadMaps: true }))
.pipe((minify === true) ? uglify().on('error', gutil.log) : gutil.noop())
.pipe(sourcemaps.write('./'))
.pipe(gulp.dest('public/js'));
}));
}
const build = gulp.series(browserifyTask);
exports.default = build;