gulpfile.js

import gulp from 'gulp';
import del from 'del'
import pug from 'gulp-pug'
import dartSass from 'sass';
import gulpSass from 'gulp-sass';
const sass = gulpSass(dartSass);
import autoprefixer from 'gulp-autoprefixer'
import browserSync from 'browser-sync'
import webpack from 'webpack-stream'
import imagemin from 'gulp-imagemin';
import concat from 'gulp-concat'
import plumber from 'gulp-plumber'
import rename from 'gulp-rename'

let paths = {
    dirs: {
        build: './build'
    },
    html: {
        src: './src/pages/*.pug',
        dest: './build',
        watch: ['./src/pages/*.pug', './src/templates/**/*.pug', './src/blocks/**/*.pug']
    },
    css: {
        src: './src/styles/main.scss',
        dest: './build/css',
        watch: ['./src/blocks/**/*.scss', './src/styles/**/*.scss', './src/styles/*.scss']
    },
    js: {
        src: ['./src/plugins/*.js', './src/blocks/**/*.js', './src/scripts/**/*.js'],
        dest: './build/js',
        watch: ['./src/blocks/**/*.js', './src/scripts/**/*.js'],
    },
    images: {
        src: ['./src/blocks/**/img/*', './src/images/**/*'],
        dest: './build/img',
        watch: ['./src/blocks/**/img/*', './src/images/**/*']
    },
    fonts: {
        src: './src/fonts/**/*',
        dest: './build/fonts',
        watch: './src/fonts/**/*'
    }
};

gulp.task('clean', function () {
    return del(paths.dirs.build);
});

gulp.task('templates', function () {
    return gulp.src(paths.html.src)
        .pipe(plumber())
        .pipe(pug({
            pretty: true
        }))
        .pipe(gulp.dest(paths.html.dest))
        .pipe(browserSync.reload({
            stream: true
        }));
});

gulp.task('styles', function () {
    return gulp.src(paths.css.src)
        .pipe(plumber())
        .pipe(sass())
        .pipe(autoprefixer({
            overrideBrowserslist: ['last 3 versions']
        }))
        .pipe(gulp.dest(paths.css.dest))
        .pipe(browserSync.reload({
            stream: true
        }));
});

gulp.task('scripts', function () {
    return gulp.src(paths.js.src)
        .pipe(plumber())
        .pipe(webpack({
            // mode: 'development',
            mode: 'production',
            output: {
                filename: 'main.js'
            }
        }))
        .pipe(concat('scripts.js'))
        .pipe(concat('main.js'))
        .pipe(gulp.dest(paths.js.dest))
        .pipe(browserSync.reload({
            stream: true
        }));
});

gulp.task('images', function () {
    return gulp.src(paths.images.src)
        .pipe(plumber())
        .pipe(imagemin())
        .pipe(rename({
            dirname: ''
        }))
        .pipe(gulp.dest(paths.images.dest));
});

gulp.task('fonts', function () {
    return gulp.src(paths.fonts.src)
        .pipe(plumber())
        .pipe(gulp.dest(paths.fonts.dest))
        .pipe(browserSync.reload({
            stream: true
        }));
});

gulp.task('server', function () {
    browserSync.init({
        server: {
            baseDir: paths.dirs.build
        },
        reloadOnRestart: true,
        // tunnel: 'remote',
        port: 3030,
    });
    gulp.watch(paths.html.watch, gulp.parallel('templates'));
    gulp.watch(paths.css.watch, gulp.parallel('styles'));
    gulp.watch(paths.js.watch, gulp.parallel('scripts'));
    gulp.watch(paths.images.watch, gulp.parallel('images'));
    gulp.watch(paths.fonts.watch, gulp.parallel('fonts'));
});

gulp.task('build', gulp.series(
    'clean',
    'templates',
    'styles',
    'scripts',
    'images',
    'fonts'
));

gulp.task('dev', gulp.series(
	'build',
	'server'
));