Gulp (4.x) File that just works (including npm dependencies and webp-Support)

// Note: this file is to be updated regularly /** * Gulpfile * * Usage: * $ npm i --save-dev gulp gulp-autoprefixer gulp-browserify gulp-clean-css gulp-concat del babelify gulp-uglify gulp-px-to-rem gulp-sass gulp-sourcemaps gulp-twig gulp-connect deepmerge gulp-htmlmin gulp-imagemin gulp-webp * $ gulp build (for deployment) * $ gulp serve (for development) */ 'use strict'; // Import Requirements const autoprefixer = require('gulp-autoprefixer'); const babelify = require('babelify'); const browserify = require('gulp-browserify'); const cleanCSS = require('gulp-clean-css'); const concat = require('gulp-concat'); const connect = require('gulp-connect'); const deepMerge = require('deepmerge'); const del = require('del'); const gulp = require('gulp'); const htmlmin = require('gulp-htmlmin'); const imagemin = require('gulp-imagemin'); const px2rem = require('gulp-px-to-rem'); const sass = require('gulp-sass'); const sourcemaps = require('gulp-sourcemaps'); const twig = require('gulp-twig'); const uglify = require('gulp-uglify'); const webp = require('gulp-webp'); // Custom Variables const src = './src'; const components = src + '/components/**/*'; const assets = src + '/assets/**/*'; const assetsImages = src + '/assets/images/**/*'; const dist = './dist'; const twigTemplates = 'views/*.twig'; const twigLayouts = 'layout/*.twig'; const js = [src + '/js/index.js']; const scss = [src + '/scss/index.scss']; const css = 'index.css'; const baseFontSize = 16; // base font size in pixel const languages = ['de', 'en']; /** * When building html, we need to use uncached json data. * require() returns cached file content, so we delete the cache before requiring a json file. */ function requireUncached(module) { delete require.cache[require.resolve(module)]; return require(module); } /** * Sub-Task: Build JS * * - Compile ES6 -> ES5 (sourcemaps included) * - Minify (with uglify) */ gulp.task( 'build:js', () => gulp .src(js) .pipe( browserify({ debug: true, transform: [ babelify.configure({ presets: ['es2015'] }) ] }) ) .pipe(uglify()) // minify .pipe(gulp.dest(dist)) // output .pipe(connect.reload()) // reload ); /** * Sub-Task: Build CSS * * - Compile SCSS -> CSS * - Add Browserprefixes * - Minify * - Concat to a single File * - Create Sourcemaps */ gulp.task( 'build:css', () => gulp .src(scss) .pipe(sourcemaps.init()) // init sourcemaps .pipe(sass()) // do the sass .pipe( autoprefixer({ // see .browserslistrc cascade: false }) ) // autoprefix .pipe(cleanCSS()) // cleanup & minify .pipe(px2rem({ rootPX: baseFontSize })) // convert pixels to rem .pipe(concat(css)) // zusammenführen der Dateien (hier nur eine) .pipe(sourcemaps.write('.')) // write sourcemaps .pipe(gulp.dest(dist)) // output .pipe(connect.reload()) // reload ); /** * Sub-Task: Build HTML * * - Compile Twig -> HTML */ gulp.task('build:html', () => { return Promise.all( languages.map(lang => { return new Promise(resolve => { return gulp .src(twigTemplates) .pipe( twig({ data: deepMerge.all([requireUncached(src + '/db.json'), { lang, data: { lang } }]), filters: [ { name: 'withModifier', func: function(prefix, modifier) { let classes = [prefix]; const modifiers = modifier[0] || []; classes = [ ...classes, ...modifiers.filter(suffix => suffix).map(suffix => `${prefix}--${suffix}`) ]; return classes.join(' '); } }, { name: 'slugify', func: function(text) { return text .toString() .toLowerCase() .replace(/\s+/g, '-') // Replace spaces with - .replace(/[^\w\-]+/g, '') // Remove all non-word chars .replace(/\-\-+/g, '-') // Replace multiple - with single - .replace(/^-+/, '') // Trim - from start of text .replace(/-+$/, ''); // Trim - from end of text } } ] }) ) .pipe(htmlmin({ collapseWhitespace: true })) .pipe(gulp.dest(lang === 'de' ? `${dist}` : `${dist}/${lang}`)) .pipe(connect.reload()) // reload .on('end', resolve); }); }) ); }); /** * Sub-Task: Build Assets * * - Add Assets to Distribution * - Excludes /assets/images */ gulp.task('build:assets', () => gulp.src([assets, '!' + assetsImages]).pipe(gulp.dest(dist + '/assets/')) ); gulp.task('build:png', () => gulp .src(assets + '.png') .pipe(imagemin()) .pipe(gulp.dest(dist + '/assets/')) ); gulp.task('build:jpg', () => gulp .src(assetsImages + '.{jpg,jpeg}') .pipe(imagemin()) .pipe(gulp.dest(dist + '/assets/')) ); gulp.task('build:svg', () => gulp .src(assetsImages + '.svg') .pipe(imagemin()) .pipe(gulp.dest(dist + '/assets/')) ); gulp.task('build:webp', () => gulp .src(assetsImages + '.{png,jpg,jpeg}') .pipe(webp()) .pipe(gulp.dest(dist + '/assets/')) ); /** * Task: Clean * * - Remove the Distribution folder */ gulp.task('clean', () => { return del([`${dist}**/*`]); }); gulp.task('connect', function() { connect.server({ host: '0.0.0.0', root: ['dist/', 'dist/en'], livereload: true }); }); gulp.task('watch', function(cb) { // Watch SCSS gulp.watch(src + '/scss/**/*.scss', gulp.series('build:css')); gulp.watch(components + '.scss', gulp.series('build:css')); // Watch JS gulp.watch(src + '/js/**/*.js', gulp.series('build:js')); gulp.watch(components + '.js', gulp.series('build:js')); // Watch TWIG Views gulp.watch(twigTemplates, gulp.series('build:html')); gulp.watch(twigLayouts, gulp.series('build:html')); gulp.watch(components + '.twig', gulp.series('build:html')); gulp.watch(`${src}/*.json`, gulp.series('build:html')); cb(); }); /** * Task: Build * * The Distribution of this build can be deployed * * - Start Task "Clean" * - Start Sub-Tasks * * Includes Assets */ gulp.task( 'build', gulp.series( 'clean', gulp.parallel('build:js', 'build:css', 'build:html', 'build:assets'), gulp.parallel('build:assets'), gulp.parallel('build:png', 'build:jpg', 'build:svg'), 'build:webp' ) ); /** * Task: Re-Build * * This Task is for development only * * - Start Task "Clean" * - Start Sub-Tasks * ! Excludes Assets */ gulp.task( 'reBuild', gulp.series('clean', gulp.parallel('build:js', 'build:css', 'build:html')) ); /** * Task: Serve * * Start a local server to serve files from dist/ */ gulp.task('serve', gulp.series('clean', 'reBuild', gulp.parallel('connect', 'watch'))); /** * Task: Default * * Watch for changes and Re-Build * Usage in command line: `$ gulp` * * - Start watching SCSS, JS and HTML Files */ gulp.task('default', gulp.series('build', 'watch'));