Gulpfile example for front-end packages (both build & client-side) with just yarn (i.e. depends on npm, but no Bower needed!)

gulpfile.js

// This is a sample gulpfile based off of the 
// ghost 'edition' theme (https://github.com/TryGhost/Edition)
// but designed to only use
// yarn for management of both 
// build-time npm packages and
// client-side npm packages. 
// 
// Most of the interesting stuff is in the refreshNodeDependencies function.
// 
// More info: https://bower.io/blog/2017/how-to-migrate-away-from-bower/
//            https://forum.ghost.org/t/themes-how-to-approach-client-side-js-assets-with-yarn/25052/2

const {series, parallel, watch, src, dest} = require('gulp');
const pump = require('pump');

// gulp plugins and utils
const livereload = require('gulp-livereload');
const gulpStylelint = require('gulp-stylelint');
const postcss = require('gulp-postcss');
const concat = require('gulp-concat');
const uglify = require('gulp-uglify');
const zip = require('gulp-zip');
const beeper = require('beeper');
const del = require('del');

// postcss plugins
const easyimport = require('postcss-easy-import');
const autoprefixer = require('autoprefixer');
const cssnano = require('cssnano');

// gulp distribute node_modules files 
const gulp = require('gulp');
const npmDist = require('gulp-npm-dist');
const rename = require('gulp-rename');
function serve(done) {
    livereload.listen();
    done();
}

function handleError(done) {
    return function (err) {
        if (err) {
            beeper();
        }
        return done(err);
    };
};

function hbs(done) {
    pump([
        src(['*.hbs', 'partials/**/*.hbs', 'members/**/*.hbs']),
        livereload()
    ], handleError(done));
}

function css(done) {
    pump([
        src('assets/css/screen.css', {sourcemaps: true}),
        postcss([
            easyimport,
            autoprefixer(),
            cssnano()
        ]),
        dest('assets/built/', {sourcemaps: '.'}),
        livereload()
    ], handleError(done));
}

// Clean/Copy node client-side 
// dependencies to ./assets/js/node_dist
function refreshNodeDependencies(done) {
    const deletedDirectoryPaths =   del.sync(['assets/js/node_dist/**']);
    // console.log('Deleted files:\n', deletedDirectoryPaths.join('\n'));
    if(npmDist().length == 0)
        return done();
    
    gulp.src(npmDist(), {base:'./node_modules/'})
        .pipe(rename(function(path) {
            path.dirname = path.dirname.replace(/\/dist/, '').replace(/\\dist/, '');
        }))
        .pipe(gulp.dest('./assets/js/node_dist'));
    return done();
}

function js(done) {
    pump([
        src([
            'assets/js/node_dist/**/*.js',
            'assets/js/lib/*.js',
            'assets/js/main.js'
        ], {sourcemaps: true}),
        concat('main.min.js'),
        uglify(),
        dest('assets/built/', {sourcemaps: '.'}),
        livereload()
    ], handleError(done));
}

function lint(done) {
    pump([
        src(['assets/css/**/*.css', '!assets/css/vendor/*']),
        gulpStylelint({
            fix: true,
            reporters: [
                {formatter: 'string', console: true}
            ]
        }),
        dest('assets/css/')
    ], handleError(done));
}

function zipper(done) {
    const filename = require('./package.json').name + '.zip';

    pump([
        src([
            '**',
            '!node_modules', '!node_modules/**',
            '!dist', '!dist/**',
            '!yarn-error.log'
        ]),
        zip(filename),
        dest('dist/')
    ], handleError(done));
}


const hbsWatcher = () => watch(['*.hbs', 'partials/**/*.hbs', 'members/**/*.hbs'], hbs);
const cssWatcher = () => watch('assets/css/**/*.css', css);
const jsWatcher = () => watch('assets/js/**/*.js', js);
const watcher = parallel(hbsWatcher, cssWatcher, jsWatcher);
const build = series(refreshNodeDependencies, css, js);

exports.build = build;
exports.lint = lint;
exports.zip = series(build, zipper);
exports.default = series(build, serve, watcher);