用于src的gulp搜索文件夹并保存到父文件夹

Question

I am trying to make a gulp task go through a given directory, search in all subdirectories (recursively inside them also going through all possible subdirectories) for folders with a specific name (src) and have the destination to the parent folder.

So every folder which has a folder inside named SRC will be the destination for the images inside that SRC folder. 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's not working tho, stays with 'compressing image' at 0, and I have to exit the process.

any help appreciated

EDIT

Example folder structure

--gulpFolder

--testimages

    --headers

        --src

        --funky

             --src

Right 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 logs the right properties for the files, but I don't know why It always re-creates a folder named 'headers' and saves the images there. In the example case, it creates a folder named headers inside the 'headers' folder and another one inside the 'funky' folder and saves the images inside them.

Answer 1

I think it is just not setting the proper path (.pop() is behaving different that you expect), tried it with gulp-imagemin and setting destination. If I understood your use case correct:

# 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

For that 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;
        }));

});

Answer 2

I was using wrong PATH var.

right 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))
});