Gulp search folder for src and save to parent folder
I am trying to execute a gulp task through a given directory, search in all subdirectories (recursively within them, also going through all possible subdirectories) for folders with a specific name (src), and have the destination parent folder.
Thus, each folder with a folder inside the SRC name will be a place for images inside that SRC folder. The files will be saved with the same name
here is what I have so far:
gulp.task('img', function() {
gulp.src('../../../uploads/slider-images/**/src/*.jpg')
.pipe(plumber(plumberErrorHandler))
.pipe(imagemin({
optimizationLevel: 7,
progressive: true
}))
.pipe(gulp.dest(function (file) {
var destPath = file.base.split("/").pop().join('/');
return destPath;
}));
});
It doesn't work, stays with "compress the image" to 0 and I need to exit the process.
any help appreciated
EDIT
Example folder structure
--gulpFolder
--testimages
--headers
--src
--funky
--src
Now I got to this piece of code:
gulp.task('img', function () {
let plumberErrorHandler = (err) => {
console.log('Plumber Err', err);
};
var sourcePath = '../testimages/';
var endPath;
return gulp.src(sourcePath + '**/src/**/*.jpg')
.pipe(plumber(plumberErrorHandler))
.pipe(imagemin({
optimizationLevel: 6,
progressive: true
}))
.pipe(rename(function(file) {
let dir = file.dirname.split('\\');
dir.pop();
file.dirname = dir.join('/');
endPath = sourcePath + file.dirname + '/';
gutil.log(file);
}))
.pipe(gulp.dest(function(file) {
return endPath;
}));
});
It writes the correct properties for the files, but I don't know why it always creates a folder called "headers" and stores the images there. In the example case, it creates a folder with headers inside the “headers” folder and another inside the “funky” folder and stores the images inside them.
source to share
I think this is just not setting the correct path (.pop () behaves differently which you expect), tried it with gulp-imagemin and setting the destination. If I understood correctly your use case:
# before
../../images/one/src/img.jpg
../../images/two/src/img.jpg
# after run
../../images/two/img.jpg
../../images/one/src/img.jpg
../../images/two/img.jpg
../../images/one/src/img.jpg
In this case, this would be the implementation:
const path = require('path');
const gulp = require('gulp');
const imagemin = require('gulp-imagemin');
const plumber = require('gulp-plumber');
const rename = require('gulp-rename');
gulp.task('img', function () {
let plumberErrorHandler = (err) => {
console.log('Plumber Err', err);
};
const sourcePath = '...//testimages';
return gulp.src(path.join(sourcePath, '/**/src/**/*.jpg'))
.pipe(plumber(plumberErrorHandler))
.pipe(imagemin({
optimizationLevel: 0,
progressive: true
}))
.pipe(rename(function(file) {
let dir = file.dirname.split('/');
dir.pop(); // remark - pop removes the src in this case
file.dirname = path.join(sourcePath, dir.join('/'));
}))
.pipe(gulp.dest(function(file) {
return sourcePath;
}));
});
source to share
I was using the wrong PATH var.
correct task code:
const path = require('path');
gulp.task('img', function () {
let plumberErrorHandler = (err) => {
console.log('Plumber Err', err);
};
var sourcePath = '../testimages/';
var endPath;
return gulp.src(sourcePath + '**/src/**/*.jpg')
.pipe(plumber(plumberErrorHandler))
.pipe(imagemin({
optimizationLevel: 6,
progressive: true
}))
.pipe(rename(function(file) {
file.dirname = path.dirname(file.dirname);
file.basename = file.basename;
return file;
}))
.pipe(gulp.dest(sourcePath))
});
source to share