Gulp, how to optimize the assembly of js files?

Question

JavaScript

Hello!
How to optimize the assembly of js files when changing one file? It is necessary that gulp does not rebuild everything, but that using cache it only makes changes to changed files.

'use strict';

var gulp = require('gulp'),
    del = require('del'),
    less = require('gulp-less'),
    debug = require('gulp-debug'),
    sourcemaps = require('gulp-sourcemaps'),
    browserSync = require('browser-sync'),
    gulpIf = require('gulp-if'),
    autoPrefixer = require('gulp-autoprefixer'),
    notify = require('gulp-notify'),
    rigger = require('gulp-rigger'),
    imagemin = require('gulp-imagemin'),
    pngquant = require('imagemin-pngquant'),
    rimraf = require('rimraf'),
    cssmin = require('gulp-minify-css'),
    multipipe = require('multipipe'),
    uglify = require('gulp-uglify');

var path = {
    build: {
        html: 'build/',
        js: 'build/js/',
        css: 'build/css/',
        img: 'build/img/',
        fonts: 'build/fonts/'
    },
    src: {
        html: 'src/*.html',
        js: 'src/js/main.js',
        style: 'src/style/main.less',
        img: 'src/img/**/*.*',
        fonts: 'src/fonts/**/*.*'
    },
    watch: {
        html: 'src/**/*.html',
        js: 'src/js/**/*.js',
        style: 'src/style/**/*.less',
        img: 'src/img/**/*.*',
        fonts: 'src/fonts/**/*.*',
        build: 'build/**/*.*'
    },
    clean: './build'
};

gulp.task('html:build', function() {
    return gulp.src(path.src.html)
        .pipe(rigger())
        .pipe(gulp.dest(path.build.html));
});

gulp.task('js:build', function() {
    return multipipe(
        gulp.src(path.src.js),
        rigger(),
        sourcemaps.init(),
        uglify(),
        sourcemaps.write(),
        gulp.dest(path.build.js)
    ).on('error', notify.onError());
});

gulp.task('style:build', function() {
    return multipipe(
        gulp.src(path.src.style),
        sourcemaps.init(),
        less(),
        autoPrefixer(),
        // cssmin(),
        sourcemaps.write(),
        gulp.dest(path.build.css)
    ).on('error', notify.onError());
});

gulp.task('image:build', function() {
    return multipipe(
        gulp.src(path.src.img),
        imagemin({
            progressive: true,
            svgoPlugins: [{removeViewBox: false}],
            use: [pngquant()],
            interlaced: true
        }),
        gulp.dest(path.build.img)
    ).on('error', notify.onError());
});

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

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

gulp.task('build', gulp.series(
    'clean',
    gulp.parallel(
        'html:build',
        'js:build',
        'style:build',
        'fonts:build',
        'image:build'
        )
));

gulp.task('watch', function(){
    gulp.watch(path.watch.html, gulp.series('html:build'));
    gulp.watch(path.watch.style, gulp.series('style: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'));
});

gulp.task('webserver', function() {
    browserSync.init({
        server: './build'
    });
    browserSync.watch(path.watch.build).on('change', browserSync.reload);
});
gulp.task('dev', gulp.series('build', gulp.parallel('watch', 'webserver')));

Answer 1

Use gulp-load-plugins to optimize connections. When building, not all modules take into account only changes - it all depends on the implementation of a particular plugin.