gulpfile.babel.js

import del from 'del';
import gulp from 'gulp';
import sass from 'gulp-sass';
import rename from 'gulp-rename';
import cleanCSS from 'gulp-clean-css';
import autoprefixer from 'gulp-autoprefixer';
import sourcemaps from 'gulp-sourcemaps';
import scssLint from 'gulp-scss-lint';

/**
 * Gulp
 * 
 * [1] Styles
 * [2] Javascript
 * [3] Images
 * [4] Clean
 * [5] Build
 * [6] Watch
 * [7] Develop
 * [8] Default
 * 
 * Gulp is an automated taskrunner to process files. Here, we're using Gulp 
 * to build all the front-end code which is optimised and written to to single 
 * files, for example:
 * 		style.css (style.min.css)
 * 		main.js (main.min.js)
 * This helps us maintain a consistent codebase and rapidly improves development
 * time by automating the minification, autoprefixing CSS for different browser
 * vendors, minifying JS and even optimising images by compressing them.
 * To add to this, Gulp also lints our code to not only ensure consistency,
 * but to allow other developers to easily read code. 
 */


import config from './config/config.gulp';

/**
 * Task: Styles
 * 
 * A task to build SCSS stylesheets and merge them into a single CSS file.
 * The sourcemaps are then generated, minifed and renamed from style.css 
 * to style.min.css
 */
gulp.task('styles', (done) => {

	return gulp.src(config.sourcePaths.styles)
		.pipe(scssLint({
			'config': '.scss-lint.yml'
		}))
		.pipe(sourcemaps.init())
		.pipe(sourcemaps.identityMap())
		.pipe(sass({
			outputStyle: 'expanded'
		}))
		.pipe(autoprefixer({
			browsers: ['last 5 versions'],
			cascade: false
		}))
		.pipe(gulp.dest(config.buildPaths.styles))
		.pipe(rename({
			suffix: '.min'
		}))
		.pipe(cleanCSS())
		.pipe(sourcemaps.write(config.buildPaths.sourcemaps))
		.pipe(gulp.dest(config.buildPaths.styles));
});

/**
 * Task: Clean
 * 
 * Cleans the build directory by deleting everything inside.
 */
gulp.task('clean', () => del('build/**/*'));

/**
 * Task: Build
 * 
 * Run an asynchronous set of tasks to build styles, javascript
 * and any images within the /src directory.
 */
gulp.task('build', gulp.parallel('styles'));

/**
 * Task: Watch
 * 
 * Watch for any changes made within the /src directory. Depending 
 * on what type of file is changed, it will run a specified task to 
 * rebuild those particular files.  
 */
gulp.task('watch', function () {
	gulp.watch(`${config.sourcePaths.styles}`, gulp.series('styles'));
});

/**
 * Task: Develop
 * 
 * First clean the /build directory, then build the assets and watch
 * for any file changes made. This runs as an asynchronous and 
 * continuous task. 
 */
gulp.task('develop', gulp.parallel('clean', 'build', 'watch'));

/**
 * Task: Default
 * 
 * Default gulp task to run when simply executing `gulp` on the 
 * command line.
 */
gulp.task('default', gulp.parallel('develop'));