Gulp 4 gulpfile.js example / sample / style (December 2018)

gulpfile.js

// Load plugins
const { series, parallel, src, dest, task } = require('gulp');
const { exec } = require('child_process');
const pug = require('gulp-pug');
const data = require('gulp-data');
const merge = require('gulp-merge-json');
const sass = require('gulp-sass');
const fs = require('fs');
const path = require('path');
const del = require('del');

// ES6 modules (imports and exports) as they are not yet supported natively in Node
// so I'm using gulp.task instead of commonJs exports.aTaskName = aFunc
task(clean);
clean.description = 'Clean the build directory';
task('build',
    series(
        series(pug_data, pug_src),
        series(api_clean, api_build, api_copy),
        parallel(
            bulma, tablefilter, sweetalert2, jquery, js, fontawesome, font_mfizz,
            images
)));
task('build').description = 'Build the static website';
task('default', series('clean', 'build'));
task('default').description = 'clean + build';

function clean() {
    // You can use multiple globbing patterns as you would with `gulp.src`
    return del(['build']);
};

// aggregate different JSON files into one database
function pug_data() {
    return src('data/**/*.json')
        .pipe(merge({
            fileName: 'data.json',
            edit: (json, file) => {
                // Extract the filename and strip the extension
                var filename = path.basename(file.path),
                    parentFolder = path.basename(path.dirname(file.path)),
                    filenameStrip = filename.replace(path.extname(filename), '');
                var primaryKey = parentFolder + '_' + filenameStrip;

                // Keep the tree structure
                var data = {};
                if(typeof data[parentFolder] === 'undefined') {
                    data[parentFolder] = {};
                }
                data[parentFolder][filenameStrip] = json;

                return data;
            },
            jsonSpace: '  '
        }))
        .pipe(dest('temp/'));
};

// compile pug templates into HTML and pass data in argument
function pug_src() {
    return src('pug/*.pug')
        .pipe(data(function() {
            return JSON.parse(fs.readFileSync('temp/data.json'));
        }))
        .pipe(pug({
            pretty: true,
        }))
        .pipe(dest('build/'));
};

function api_clean() {
    return del('temp/api');
};

// build the static JSON API via an external script, I didn't find a cleaner way to do it with gulp
// also require 'pug:data' to be run before
function api_build() {
    return exec('node make-scripts/static-json-api.js');
};

function api_copy(cb) {
    return src('temp/api/**/*.json')
        .pipe(dest('build/api/'))
};

// build the customized bulma CSS
function bulma() {
    return src('sass/bulma.sass')
        .pipe(sass())
        .pipe(dest('build/css/vendor/bulma/'));
};

function tablefilter() {
    return src('node_modules/tablefilter/dist/tablefilter/**/*',
        { base: 'node_modules/tablefilter/dist/'}
    )
        .pipe(dest('build/js/vendor/'));
};

function sweetalert2() {
    return src('node_modules/sweetalert2/dist/sweetalert2.all.min.js')
        .pipe(dest('build/js/vendor/sweetalert2/'));
};

function jquery() {
    return src('node_modules/jquery/dist/jquery.min.js')
        .pipe(dest('build/js/vendor/jquery/'));
};

// copy personal (non-vendor) scripts
function js() {
    return src('js/**/*.js')
        .pipe(dest('build/js/'));
};

function fontawesome() {
    return src(['node_modules/@fortawesome/fontawesome-free-webfonts/css/*',
    'node_modules/@fortawesome/fontawesome-free-webfonts/webfonts/*'],
    { base: 'node_modules/@fortawesome/fontawesome-free-webfonts/'}
    )
        .pipe(dest('build/css/vendor/fontawesome/'));
};

function font_mfizz() {
    return src(['node_modules/font-mfizz/dist/*',
    '!node_modules/font-mfizz/dist/preview.html',
    ])
        .pipe(dest('build/css/vendor/font-mfizz/'));
};

function images() {
    return src('img/**/*.*')
        .pipe(dest('build/img/'));
};