Gulp, как оптимизировать сборку js файлов?

Question

[Curiosity]

Здравствуйте!
Как оптимизировать сборку js файлов, при изменении одного файла? Надо чтобы gulp не все заново собирала, а чтоб используя cache вносила только изменения измененных файлов.

'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

[Виталий]

Используйте gulp-load-plugins чтобы оптимизировать подключения. При сборке не все модули учитывают только изменения - всё зависит от реализации конкретного плагина.