Doge420/gulpfile.js

'use strict';

/* paths to source files (src), to ready files (build), as well as to those whose changes need to be monitored (watch) */
var path = {
    build: {
        html: 'assets/build/',
        js: 'assets/build/js/',
        wasm: 'assets/build/js',
        css: 'assets/build/css/',
        img: 'assets/build/img/',
        fonts: 'assets/build/fonts/'
    },
    src: {
        html: 'assets/src/*.html',
        js: 'assets/src/js/*.js',
        style: 'assets/src/style/main.scss',
        img: 'assets/src/img/**/*.*',
        fonts: 'assets/src/fonts/**/*.*',
        wasm: 'assets/src/js/*.wasm'
    },
    watch: {
        html: 'assets/src/**/*.html',
        js: 'assets/src/js/**/*.js',
        css: 'assets/src/style/**/*.scss',
        img: 'assets/src/img/**/*.*',
        fonts: 'assets/srs/fonts/**/*.*'
    },
    clean: './assets/build/*'
};

/* настройки сервера */
var config = {
    server: {
        baseDir: './assets/build'
    },
    notify: false
};

/* include gulp and plugins */
var gulp = require('gulp'),  // include Gulp
    webserver = require('browser-sync'), // server for work and automatic page updates
    plumber = require('gulp-plumber'), // bug tracking module
    rigger = require('gulp-rigger'), // a module to import the contents of one file into another
    sourcemaps = require('gulp-sourcemaps'), // module for generating a map of source files
    sass = require('gulp-sass'), // module for compiling SASS (SCSS) to CSS
    autoprefixer = require('gulp-autoprefixer'), // module for automatic installation of auto-prefixes
    cleanCSS = require('gulp-clean-css'), // CSS minification plugin
    uglify = require('gulp-uglify'), // JavaScript minification module
    cache = require('gulp-cache'), // module for caching
    imagemin = require('gulp-imagemin'), // plugin for compressing PNG, JPEG, GIF and SVG images
    jpegrecompress = require('imagemin-jpeg-recompress'), // jpeg compression plugin
    pngquant = require('imagemin-pngquant'), // png compression plugin
    del = require('del'), // plugin for deleting files and directories
    rename = require('gulp-rename');

/* tasks */

// start the server
gulp.task('webserver', function () {
    webserver(config);
});

// compile html
gulp.task('html:build', function () {
    return gulp.src(path.src.html) // selection of all html files in the specified path
        .pipe(plumber()) // error tracking
        .pipe(rigger()) // attachment import
        .pipe(gulp.dest(path.build.html)) // uploading ready files
        .pipe(webserver.reload({ stream: true })); // server reboot
});

// compile styles
gulp.task('css:build', function () {
    return gulp.src(path.src.style) // get main.scss
        .pipe(plumber()) // for bug tracking
        .pipe(sourcemaps.init()) // initialize sourcemap
        .pipe(sass()) // scss -> css
        .pipe(autoprefixer()) // add prefix
        .pipe(gulp.dest(path.build.css))
        .pipe(rename({ suffix: '.min' }))
        .pipe(cleanCSS()) // minimize CSS
        .pipe(sourcemaps.write('./')) // write sourcemap
        .pipe(gulp.dest(path.build.css)) // output to build
        .pipe(webserver.reload({ stream: true })); // server restart
});

// compile js
gulp.task('js:build', function () {
    return gulp.src(path.src.js) // get file main.js
        .pipe(plumber()) // for bug tracking
        .pipe(rigger()) // import all files to main.js
        .pipe(gulp.dest(path.build.js))
        .pipe(rename({ suffix: '.min' }))
        .pipe(sourcemaps.init()) //initialize sourcemap
        .pipe(uglify()) // minimize js
        .pipe(sourcemaps.write('./')) //  write sourcemap
        .pipe(gulp.dest(path.build.js)) // put ready file
        .pipe(webserver.reload({ stream: true })); // server restart
});

gulp.task('wasm:build', function () {
    return gulp.src(path.src.wasm)
    .pipe(gulp.dest(path.build.wasm))
    .pipe(webserver.reload({stream: true}))
});

// move fonts
gulp.task('fonts:build', function () {
    return gulp.src(path.src.fonts)
        .pipe(gulp.dest(path.build.fonts));
});

// image processing
gulp.task('image:build', function () {
    return gulp.src(path.src.img) // path to image source
        .pipe(cache(imagemin([ // image compression
            imagemin.gifsicle({ interlaced: true }),
            jpegrecompress({
                progressive: true,
                max: 90,
                min: 80
            }),
            pngquant(),
            imagemin.svgo({ plugins: [{ removeViewBox: false }] })
        ])))
        .pipe(gulp.dest(path.build.img)); // output ready files
});

// remove catalog build
gulp.task('clean:build', function () {
    return del(path.clean);
});

// clear cache
gulp.task('cache:clear', function () {
    cache.clearAll();
});

// assembly
gulp.task('build',
    gulp.series('clean:build',
        gulp.parallel(
            'html:build',
            'css:build',
            'js:build',
            'fonts:build',
            'image:build',
            'wasm:build'
        )
    )
);

// launching tasks when files change
gulp.task('watch', function () {
    gulp.watch(path.watch.html, gulp.series('html:build'));
    gulp.watch(path.watch.css, gulp.series('css:build'));
    gulp.watch(path.watch.js, gulp.series('js:build'));
    gulp.watch(path.watch.img, gulp.series('image:build'));
    gulp.watch(path.watch.fonts, gulp.series('fonts:build'));
});

// default tasks
gulp.task('default', gulp.series(
    'build',
    gulp.parallel('webserver','watch')
));