Gulp 4 Configuration File

gulpfile.js

// Alphasite Build Tool
// Verion: 2.0
// Author: jon@youandme.digital
//
// Built and tested on:
// - Node: v.10.14.1
// - NPM: v.6.4.1
// - Gulp: v.4.0

// load required npm plugins (from a-z)
const autoprefixer = require('autoprefixer');
const cleancss = require('gulp-clean-css');
const color_rgba_fallback = require('postcss-color-rgba-fallback');
const combinemq = require('gulp-combine-mq');
const compressimages = require('gulp-imagemin');
const concat = require('gulp-concat');
const criticalcss = require('gulp-penthouse');
const cssnano = require('cssnano');
const fs = require('fs');
const gulp = require('gulp');
const gulp_util = require('gulp-util');
const opacity = require('postcss-opacity');
const pixrem = require('pixrem');
const postcss = require('gulp-postcss');
const pseudoelements = require('postcss-pseudoelements');
const rename = require('gulp-rename');
const replace = require('gulp-replace');
const rev = require('gulp-rev');
const revFormat = require('gulp-rev-format');
const sass = require('gulp-sass');
const size = require('gulp-size');
const svg2png = require('gulp-svg2png');
const svgsprite = require('gulp-svg-sprite');
const touch = require('gulp-touch-cmd');
const uglify = require('gulp-uglify');
const vmin = require('postcss-vmin');

// load postcss plugins
const postcss_plugins = [
	autoprefixer(),
	color_rgba_fallback,
	cssnano(),
	opacity,
	pixrem,
	pseudoelements,
	vmin
];

// define build paths
const path_build = {
	src: 'build/',
	dest: 'dist/assets/template/',
};
// define asset paths
const path_assets = {
	images: {
		src: path_build.src + 'img/',
		dest: path_build.dest + 'i/'
	},
	sass: {
		src: path_build.src + 'scss/',
		dest: path_build.dest + 'c/'
	},
	sprite: {
		src: path_build.src + 'sprite/*',
		svg: 'i/sprite.svg',
		css: '../../../' + path_build.src + 'scss/theme/_sprite.scss'
	},
	templates: {
		src: path_build.src + 'tpl/'
	}
};

// generate timestamp
// and convert to string
const timestamp = new Date().getTime().toString();

// generate svg sprite file
function generate_sprite_svg() {
	return gulp
		.src(path_assets.sprite.src)
		.pipe(svgsprite({
			shape: {
				spacing: {
					padding: 5
				}
			},
			mode: {
				css: {
					dest: "./",
					layout: "vertical",
					sprite: path_assets.sprite.svg,
					bust: false,
					render: {
						scss: {
							dest: "../../../build/scss/lib/theme/_sprite.scss",
							template: "build/tpl/sprite-template.scss"
						}
					}
				}
			},
			variables: {
				mapname: "icons"
			}
		}))
		.pipe(gulp.dest(path_build.dest))
		.pipe(touch());
}

// generate png sprite file
function generate_sprite_png() {
	return gulp
		.src(path_build.dest + path_assets.sprite.svg)
		.pipe(svg2png())
		.pipe(size({
			showFiles: true
		}))
		.pipe(gulp.dest(path_assets.images.dest))
		.pipe(touch());
}

// compile sass
function compile_sass() {
	return gulp
		.src('./build/scss/**/*.scss')
		.pipe(sass())
		.pipe(cleancss({
			compatibility: 'ie11'
		}))
		.pipe(gulp.dest('./build/css/'))
		.pipe(touch());
}

// compile javascript
function compile_js() {
	return gulp
		.src('./build/js/[^_]*.js')
		.pipe(uglify({
			mangle: false
		}))
		.pipe(concat('s.min.js'))
		.pipe(rev())
		.pipe(revFormat({
            prefix: '.',
            lastExt: true
        }))
		.pipe(gulp.dest('./dist/assets/template/j/'))
		.pipe(touch());
}

// process css
// further settings can be found in package.json
function process_css() {
	return gulp
		.src('./build/css/*.css')
		.pipe(combinemq({
			beautify: false
		}))
		.pipe(postcss(postcss_plugins))
		.pipe(rename({
			suffix: '.min'
		}))
		.pipe(rev())
		.pipe(revFormat({
            prefix: '.',
            lastExt: true
        }))
		.pipe(gulp.dest('./dist/assets/template/c'))
		.pipe(touch());
}

// process critical css
function process_criticalcss_generic() {
	return gulp
		.src('./dist/assets/template/c/c.min.*.css')
		.pipe(criticalcss({
			out: '/ccss_generic.css',
			url: 'https://example.com/',
			width: 1366,
			height: 460,
			strict: true,
			userAgent: 'Mozilla/5.0 (compatible; Googlebot/2.1; +http://www.google.com/bot.html)'
        }))
		.pipe(combinemq({
			beautify: false
		}))
		.pipe(postcss(postcss_plugins))
		.pipe(replace('../', '/assets/template/'))
        .pipe(gulp.dest('./dist/assets/template/c/'))
		.pipe(touch());
}

// process images
// this helper task needs to be run manually
// it is not apart of any automatic build process
function process_images() {
	return gulp
		.src('./dist/assets/template/i/*')
		.pipe(compressimages(
		[
			compressimages.gifsicle({
				interlaced: true,
				optimizationLevel: 2
			}),
			compressimages.jpegtran({
				progressive: true
			}),
			compressimages.svgo({
		        plugins: [
		            {
						removeViewBox: true
					},
		            {
						cleanupIDs: false
					}
		        ]
		    })
		],
		{
			verbose: true
		}))
		.pipe(gulp.dest('./dist/assets/template/i'));
}

// watch build folder
function watch_build() {
	gulp.watch('build/scss/**/*.scss', compile_sass);
	gulp.watch('build/js/**/*.js', compile_js);
	gulp.watch('build/sprite/**/*.svg', generate_sprite_svg, generate_sprite_png);
	gulp.watch('build/css/*.css', process_css);
}

// export build system
function export_build_copy() {
	return gulp
		.src([
			'./node_modules',
			'./build/**/*',
			'./dist/**/*',
			'./gulpfile.js',
			'./package.json',
			'./package-lock.json',
			'./README'
		], {
			base: '.'
		})
		.pipe(gulp.dest('./export/temp'));

}

// rename the temp folder to something more meaningful
function export_build_rename(cb) {
	fs.rename('./export/temp', './export/export-' + timestamp, cb);
	cb();
}

// tasks
gulp.task('generate_sprite_svg', generate_sprite_svg);
generate_sprite_svg.description = 'generate svg sprite file';

gulp.task('generate_sprite_png', generate_sprite_png);
generate_sprite_png.description = 'generate png sprite fallback file';

gulp.task('generate_sprite', gulp.series(generate_sprite_svg, generate_sprite_png));

gulp.task('compile_sass', compile_sass);
compile_sass.description = 'compile sass';

gulp.task('compile_js', compile_js);
compile_js.description = 'compile javascript';

gulp.task('process_css', process_css);
process_css.description = 'process css';

gulp.task('process_criticalcss', gulp.series(process_criticalcss_generic));

gulp.task('process_images', process_images);
process_images.description = 'optimise images - has to be run manually';

gulp.task('watch', watch_build);
watch_build.description = 'default watch task';

gulp.task('build_css', gulp.series(compile_sass, process_css));

gulp.task('build', gulp.series(generate_sprite_svg, generate_sprite_png, compile_sass, compile_js, process_css));

gulp.task('default', gulp.series('build'));

gulp.task('export_build', gulp.series(export_build_copy, export_build_rename));