gulpfile.js

const gulp = require('gulp');
const sass = require('gulp-sass');
const clean = require('gulp-clean');
const concat = require('gulp-concat');
const rename = require('gulp-rename');
const uglify = require('gulp-uglify');
const htmlmin = require('gulp-htmlmin');
const cleanCss = require('gulp-clean-css');
const htmlPartial = require('gulp-html-partial');

/**
 * Project info
 */
const project = require('./package');
const projectName = project.name;

/**
 * Files and paths info
 */
const path = {
    src: './app/',
    dest: './dist/',
};

const src = {
    scss: path.src + 'assets/scss/',
    scssMain: path.src + 'assets/scss/main.scss',
    css: path.src + 'assets/css/',
    html: path.src + 'pages/',
    htmlComponents: path.src + 'components/',
    js: path.src + 'assets/js/',
    jsVendor: path.src + 'assets/js/vendor/',
    jsApp: path.src + 'assets/js/app/',
    fonts: path.src + 'assets/fonts/',
    img: path.src + 'assets/img/',
    config: path.src + 'assets/config/'
};

const dest = {
    css: path.dest + 'assets/css/',
    html: path.dest,
    js: path.dest + 'assets/js/',
    fonts: path.dest + 'assets/fonts/',
    img: path.dest + 'assets/img/',
    config: path.dest + 'assets/config/'
};

/**
 * Gulp tasks
 */
gulp.task('sass', () =>
    gulp.src(src.scssMain)
        .pipe(sass())
        .pipe(gulp.dest(src.css))
);

gulp.task('css', () =>
    gulp.src(src.css + '**/*.css')
        .pipe(cleanCss({compatibility: 'ie8', level: {1: {specialComments: 0}}}))
        .pipe(rename({extname: '.min.css'}))
        .pipe(gulp.dest(dest.css))
);

gulp.task('build-html', () =>
    gulp.src(src.html + '**/*.html')
        .pipe(htmlPartial({basePath: src.htmlComponents}))
        .pipe(htmlmin({collapseWhitespace: true}))
        .pipe(gulp.dest(dest.html))
);

gulp.task('build-js-vendor', () =>
    gulp.src([
        src.jsVendor + 'jquery.min.js',
        src.jsVendor + 'jquery-*',
        src.jsVendor + 'popper*',
        src.jsVendor + 'bootstrap*',
        src.jsVendor + '**/*.js'
    ])
        .pipe(concat(projectName + '.min.js'))
        .pipe(uglify())
        .pipe(gulp.dest(dest.js))
);

gulp.task('build-js-app', () =>
    gulp.src(src.jsApp + '*.js')
        .pipe(concat('app.min.js'))
        .pipe(uglify())
        .pipe(gulp.dest(dest.js))
);

gulp.task('build-js-pages', () =>
    gulp.src(src.jsApp + 'pages/**/*.js')
        .pipe(uglify())
        .pipe(rename({extname: '.min.js'}))
        .pipe(gulp.dest(dest.js + 'pages/'))
);

gulp.task('copy-config', () =>
    gulp.src(src.config + '*')
        .pipe(gulp.dest(dest.config))
);

gulp.task('copy-fonts', () =>
    gulp.src(src.fonts + '*')
        .pipe(gulp.dest(dest.fonts))
);

gulp.task('copy-images', () =>
    gulp.src(src.img + '*')
        .pipe(gulp.dest(dest.img))
);

gulp.task('copy-favicon', () =>
    gulp.src(path.src + 'favicon.ico')
        .pipe(gulp.dest(path.dest))
);

gulp.task('copy-google', () =>
    gulp.src(path.src + 'googlefec928b2d5735d35.html')
        .pipe(gulp.dest(path.dest))
);

gulp.task('clean', () =>
    gulp.src(path.dest + '*', {read: false})
        .pipe(clean({force: true}))
);

/**
 * Gulp task workflow
 */
gulp.task('build-css', gulp.series(
    'sass',
    'css'
));

gulp.task('build-js', gulp.parallel(
    'build-js-vendor',
    'build-js-app',
    'build-js-pages'
));

gulp.task('copy', gulp.parallel(
    'copy-fonts',
    'copy-images',
    'copy-config',
    'copy-favicon',
    'copy-google'
));

gulp.task('watch-html', () =>
    gulp.watch([src.html + '**/*.html', src.htmlComponents + '**/*.html'], gulp.series('build-html'))
);

gulp.task('watch-scss', () =>
    gulp.watch(src.scss + '**/*.scss', gulp.series('build-css'))
);

gulp.task('watch-js', () =>
    gulp.watch(src.js + '**/*.js', gulp.series('build-js'))
);

gulp.task('watch-assets', () => {
    gulp.watch([src.img + '**/*', src.fonts + '**/*', src.config + '**/*'], gulp.series('copy'))
});

gulp.task('watch', gulp.parallel(
    'watch-scss',
    'watch-html',
    'watch-js',
    'watch-assets'
));

gulp.task('build-clean', gulp.series(
    'clean',
    gulp.parallel(
        'build-css',
        'build-html',
        'build-js',
        'copy',
    ),
));

/**
 * Default gulp task, builds and then watches
 */
gulp.task('default', gulp.series(
    'build-clean',
    'watch'
));