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

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;