gulpfile.js

// Defining requirements
var gulp = require('gulp');
var plumber = require('gulp-plumber');
var sass = require('gulp-sass');
var babel = require('gulp-babel');
var postcss = require('gulp-postcss');
var watch = require('gulp-watch');
var rename = require('gulp-rename');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var imagemin = require('gulp-imagemin');
var webp = require('gulp-webp');
var ignore = require('gulp-ignore');
var rimraf = require('gulp-rimraf');
var sourcemaps = require('gulp-sourcemaps');
var browserSync = require('browser-sync').create();
var del = require('del');
var cleanCSS = require('gulp-clean-css');
const directoryExists = require('directory-exists');
var gulpSequence = require('gulp-sequence');
var replace = require('gulp-replace');
var autoprefixer = require('autoprefixer');

// Configuration file to keep your code DRY
var cfg = require('./gulpconfig.json');
var paths = cfg.paths;

// Run:
// gulp sass
// Compiles SCSS files in CSS
gulp.task('sass', function() {
	return gulp
		.src(paths.sass + '/*.scss')
		.pipe(
			plumber({
				errorHandler: function(err) {
					console.log(err);
					this.emit('end');
				}
			})
		)
		.pipe(sourcemaps.init({ loadMaps: true }))
		.pipe(sass({ errLogToConsole: true }))
		.pipe(postcss([autoprefixer()]))
		.pipe(sourcemaps.write(undefined, { sourceRoot: null }))
		.pipe(gulp.dest(paths.css));
});

gulp.task('sass-fa', function() {
	return gulp
		.src(`${paths.sass}/vendors/fontawesome/fontawesome.scss`)
		.pipe(
			plumber({
				errorHandler: function(err) {
					console.log(err);
					this.emit('end');
				}
			})
		)
		.pipe(sourcemaps.init({ loadMaps: true }))
		.pipe(sass({ errLogToConsole: true }))
		.pipe(postcss([autoprefixer()]))
		.pipe(sourcemaps.write(undefined, { sourceRoot: null }))
		.pipe(gulp.dest(paths.css));
});

gulp.task('minify-fa', function() {
	return gulp
		.src(`${paths.css}/fontawesome.css`)
		.pipe(sourcemaps.init({ loadMaps: true }))
		.pipe(cleanCSS({ compatibility: '*' }))
		.pipe(
			plumber({
				errorHandler: function(err) {
					console.log(err);
					this.emit('end');
				}
			})
		)
		.pipe(rename({ suffix: '.min' }))
		.pipe(sourcemaps.write('./'))
		.pipe(gulp.dest(paths.css));
});


// Run:
// gulp build-fa
// Build FontAwesome files for external (i.e. admin) use.
gulp.task('build-fa', function(callback) {
	gulp.series( 'sass-fa', 'minify-fa')(callback);
});

// Run:
// gulp watch
// Starts watcher. Watcher runs gulp sass task on changes
gulp.task('watch', function() {
	gulp.watch(`${paths.sass}/**/*.scss`, gulp.series('styles'));
	gulp.watch(`${paths.sass}/vendors/fontawesome/*.scss`, gulp.series('build-fa'));
	gulp.watch(
		[
			`${paths.dev}/js/**/*.js`,
			'js/**/*.js',
			'!js/theme.js',
			'!js/theme.min.js'
		],
		gulp.series('scripts')
	);

	//Inside the watch task.
	gulp.watch(`${paths.imgsrc}/**`, gulp.series('imagemin-watch'));
});

// Run:
// gulp watch-fa
// Starts watcher. Watcher runs gulp sass task on FontAwesome file changes
gulp.task('watch-fa', function() {
	gulp.watch(`${paths.sass}/vendors/fontawesome/*.scss`, gulp.series('build-fa'));
});

// Run:
// gulp imagemin
// Running image optimizing task
gulp.task('imagemin', function() {
	gulp
		.src(`${paths.imgsrc}/**`)
		.pipe(imagemin())
		.pipe(gulp.dest(paths.img));
});

// Run:
// gulp webp
// Converts jpeg/png to webp
gulp.task('webp', function () {
	return gulp.src([

		/*`${paths.uploads}/!**!/!*.jpg`,
		`${paths.uploads}/!**!/!*.jpeg`,
		`${paths.uploads}/!**!/!*.png`,
		`${paths.uploads}/!**!/!*.gif`,*/

		`${paths.img}/**/*.jpg`,
		`${paths.img}/**/*.jpeg`,
		`${paths.img}/**/*.png`,
		`${paths.img}/**/*.gif`,
	])
		.pipe(webp())
		.pipe(gulp.dest(function (file) {
			return file.base;
		}))
});

/**
 * Ensures the 'imagemin' task is complete before reloading browsers
 * @verbose
 */
gulp.task(
	'imagemin-watch',
	gulp.series('imagemin', function() {
		browserSync.reload();
	})
);

// Run:
// gulp cssnano
// Minifies CSS files
gulp.task('cssnano', function() {
	return gulp
		.src(paths.css + '/theme.css')
		.pipe(sourcemaps.init({ loadMaps: true }))
		.pipe(
			plumber({
				errorHandler: function(err) {
					console.log(err);
					this.emit('end');
				}
			})
		)
		.pipe(rename({ suffix: '.min' }))
		.pipe(cssnano({ discardComments: { removeAll: true } }))
		.pipe(sourcemaps.write('./'))
		.pipe(gulp.dest(paths.css));
});

gulp.task('minifycss', function() {
	return gulp
		.src(`${paths.css}/theme.css`)
		.pipe(sourcemaps.init({ loadMaps: true }))
		.pipe(cleanCSS({ compatibility: '*' }))
		.pipe(
			plumber({
				errorHandler: function(err) {
					console.log(err);
					this.emit('end');
				}
			})
		)
		.pipe(rename({ suffix: '.min' }))
		.pipe(sourcemaps.write('./'))
		.pipe(gulp.dest(paths.css));
});

gulp.task('cleancss', function() {
	return gulp
		.src(`${paths.css}/*.min.css`, { read: false }) // Much faster
		.pipe(ignore('theme.css'))
		.pipe(rimraf());
});

gulp.task('styles', function(callback) {
	gulp.series('sass', 'minifycss')(callback);
});

// Run:
// gulp browser-sync
// Starts browser-sync task for starting the server.
gulp.task('browser-sync', function() {
	browserSync.init(cfg.browserSyncWatchFiles, cfg.browserSyncOptions);
});

// Run:
// gulp scripts.
// Uglifies and concat all JS files into one
gulp.task('scripts', function() {
	var scripts = [
		// Start - All BS4 stuff
		`${paths.dev}/js/bootstrap4/bootstrap.bundle.js`,

		// End - All BS4 stuff

		`${paths.dev}/js/skip-link-focus-fix.js`,
		`${paths.dev}/js/loadmore.js`,

		// Adding currently empty javascript file to add on for your own themes´ customizations
		// Please add any customizations to this .js file only!
		`${paths.dev}/js/custom-javascript.js`
	];
	gulp
		.src(scripts, { allowEmpty: true })
		.pipe(babel(
			{
				presets: ['@babel/preset-env']
			}
		))
		.pipe(concat('theme.min.js'))
		.pipe(uglify())
		.pipe(gulp.dest(paths.js));

	return gulp
		.src(scripts, { allowEmpty: true })
		.pipe(babel())
		.pipe(concat('theme.js'))
		.pipe(gulp.dest(paths.js));
});

// Deleting any file inside the /src folder
gulp.task('clean-source', function() {
	return del(['src/**/*']);
});

// Run:
// gulp watch-bs
// Starts watcher with browser-sync. Browser-sync reloads page automatically on your browser
gulp.task('watch-bs', gulp.parallel('browser-sync', 'watch'));

// Run:
// gulp copy-assets.
// Copy all needed dependency assets files from bower_component assets to themes /js, /scss and /fonts folder. Run this task after bower install or bower update
gulp.task('copy-assets', function(callback) {
	////////////////// All Bootstrap 4 Assets /////////////////////////
	// Copy all JS files
	gulp
		.src(`${paths.node}/bootstrap/dist/js/**/*.js`)
		.pipe(gulp.dest(`${paths.sass}/vendors/bootstrap4`));

	// Copy all Bootstrap SCSS files
	gulp
		.src(`${paths.node}/bootstrap/scss/**/*.scss`)
		.pipe(gulp.dest(`${paths.sass}/vendors/bootstrap4`));

	////////////////// End Bootstrap 4 Assets /////////////////////////

	// Check if FontAwesome pro package available.
	var fa_dir = 'fontawesome-free';
	var pro_dir = `${paths.node}/@fortawesome/fontawesome-pro`;

	(async function() {
		const result = await directoryExists(pro_dir);
		if ( result ) {
			fa_dir = 'fontawesome-pro';
		}

		// Copy all Font Awesome Fonts
		gulp
			.src(`${paths.node}/@fortawesome/${fa_dir}/webfonts/**/*.{ttf,woff,woff2,eot,svg}`)
			.pipe(gulp.dest('./webfonts'));

		// Copy all Font Awesome SCSS files
		gulp
			.src(`${paths.node}/@fortawesome/${fa_dir}/scss/*.scss`)
			.pipe(gulp.dest(`${paths.sass}/vendors/fontawesome`));
	})();

	// _s SCSS files
	gulp
		.src(`${paths.node}/undescores-for-npm/sass/media/*.scss`)
		.pipe(gulp.dest(`${paths.sass}/vendors/underscores`));

	// _s JS files into /src/js
	gulp
		.src(`${paths.node}/undescores-for-npm/js/skip-link-focus-fix.js`)
		.pipe(gulp.dest(`${paths.dev}/js`));

	gulp.series('build-fa')(callback);
});

// Deleting the files distributed by the copy-assets task
gulp.task('clean-vendor-assets', function() {
	return del([
		`${paths.sass}/vendors/bootstrap4/**`,
		`${paths.sass}/vendors/fontawesome/**`,
		`${paths.sass}/vendors/underscores/**`,
		`${paths.dev}/js/bootstrap4/**`,
		`${paths.dev}/js/skip-link-focus-fix.js`,
		`${paths.js}/**/skip-link-focus-fix.js`,
		`${paths.js}/**/popper.min.js`,
		`${paths.js}/**/popper.js`,
		'./webfonts/*wesome*.{ttf,woff,woff2,eot,svg}',
		paths.vendor !== '' ? paths.js + paths.vendor + '/**' : ''
	]);
});

// Deleting any file inside the /dist folder
gulp.task('clean-dist', function() {
	return del([paths.dist + '/**']);
});

// Run
// gulp dist
// Copies the files to the /dist folder for distribution as simple theme
gulp.task(
	'dist',
	gulp.series(['clean-dist'], function() {
		return gulp
			.src(
				[
					'**/*',
					`!${paths.bower}`,
					`!${paths.bower}/**`,
					`!${paths.node}`,
					`!${paths.node}/**`,
					`!${paths.dev}`,
					`!${paths.dev}/**`,
					`!${paths.dist}`,
					`!${paths.dist}/**`,
					`!${paths.distprod}`,
					`!${paths.distprod}/**`,
					`!${paths.sass}`,
					`!${paths.sass}/**`,
					'!readme.txt',
					'!readme.md',
					'!package.json',
					'!package-lock.json',
					'!gulpfile.js',
					'!gulpconfig.json',
					'!CHANGELOG.md',
					'!.travis.yml',
					'!jshintignore',
					'!codesniffer.ruleset.xml',
					'*'
				],
				{ buffer: true }
			)
			.pipe(
				replace(
					'/js/jquery.slim.min.js',
					'/js' + paths.vendor + '/jquery.slim.min.js',
					{ skipBinary: true }
				)
			)
			.pipe(
				replace('/js/popper.min.js', '/js' + paths.vendor + '/popper.min.js', {
					skipBinary: true
				})
			)
			.pipe(
				replace(
					'/js/skip-link-focus-fix.js',
					'/js' + paths.vendor + '/skip-link-focus-fix.js',
					{ skipBinary: true }
				)
			)
			.pipe(gulp.dest(paths.dist));
	})
);

// Deleting any file inside the /dist-product folder
gulp.task('clean-dist-product', function() {
	return del([paths.distprod + '/**']);
});

// Run
// gulp dist-product
// Copies the files to the /dist-prod folder for distribution as theme with all assets
gulp.task(
	'dist-product',
	gulp.series(['clean-dist-product'], function() {
		return gulp
			.src([
				'**/*',
				`!${paths.bower}`,
				`!${paths.bower}/**`,
				`!${paths.node}`,
				`!${paths.node}/**`,
				`!${paths.dist}`,
				`!${paths.dist}/**`,
				`!${paths.distprod}`,
				`!${paths.distprod}/**`,
				'*'
			])
			.pipe(gulp.dest(paths.distprod));
	})
);

// Run
// gulp compile
// Compiles the styles and scripts and runs the dist task
gulp.task('compile', gulp.series('styles', 'watch-fa', 'scripts', 'dist'));

// Run:
// gulp
// Starts watcher (default task)
gulp.task('default', gulp.series('watch'));