A simple gulpfile was written that collects statics in a separate folder and the functionality for viewing changes is configured. But there is a problem when changing the script starts to collect all the files in a row. it takes a lot of time, I want to configure so that when changing, everything is not collected in a row, but only those files that have been changed.
const gulp = require('gulp')
const less = require("gulp-less")
const cleanCSS = require('gulp-clean-css');
const changed = require('gulp-changed');
const paths = {
style: {
src: 'static/**/*.less',
dest: 'static/dist',
}
}
function styles(){
return gulp.src([paths.style.src, '!static/js/**' ])
.pipe(less())
.pipe(cleanCSS())
.pipe(gulp.dest(paths.style.dest))
.pipe(gulp.src('static/images/**/*.+(png|jpg|jpeg|gif|svg)'))
.pipe(gulp.dest('static/dist/images'))
.pipe(gulp.src('static/my/images/**/*.+(png|jpg|jpeg|gif|svg)'))
.pipe(gulp.dest('static/dist/my/images'))
}
function buildLess() {
return gulp.src(paths.style.src)
.pipe(changed(paths.style.dest, { hasChanged: changed.compareContents }))
.pipe(less())
.pipe(cleanCSS())
.pipe(gulp.dest(paths.style.dest))
}
function watch() {
gulp.watch(paths.style.src, buildLess)
}
exports.styles = styles
exports.watch = watch