如何在 gulp 任务中为图像排除文件夹？

Question

我在前端项目中使用 Gulp 4。我想为 gulp-imagemin 排除“img”文件夹中的“fav”文件夹。我怎样才能做到这一点？这是我的项目结构：

structure

这是我的 gulpfile.js：

var paths = {
    html: {
        src: "src/**/*.html",
        dest: "dest/"
    },

    styles: {
        src: "src/styles/**/*.sass",
        dest: "dest/styles/"
    },

    scripts: {
        src: "src/js/**/*.js",
        dest: "dest/js/"
    },

    images: {
        src: "src/img/**/*.*",
        dest: "dest/img/"
    }
};

function images() {
    return gulp.src(paths.images.src)
        .pipe(imagemin({
            progressive: true,
            interlaced: true,
            use: [pngquant()],
        }))
        .pipe(svgo())
        .pipe(gulp.dest(paths.images.dest));
}

感谢和愉快的编码！

Answer 1

你也可以试试gulp-filter:

const filter = require('gulp-filter');

// function images() {
gulp.task('images', function () {

  // restore option lets us bring back the removed files later
  const f = filter(paths.images.exclude, { restore: true });

  return gulp.src(paths.images.src)

    // filter out, remove, files in the fav directory
    .pipe(f)

    // do stuff to remaining files (not including fav/*.*)
    .pipe(imagemin({
      progressive: true,
      interlaced: true,
      use: [pngquant()],
    }))
    .pipe(svgo())

    // Bring back the files previously removed from the stream
    .pipe(f.restore)

    .pipe(gulp.dest(paths.images.dest));
});

var paths = {
  images: {
    src: "src/img/**/*.*",
    exclude: ["src/img/**/*.*", "!src/img/fav/*.*"],
    dest: "dest/img/"
  }
};

gulp.task('default', ['images']);

[以 gulp3.9 风格编写，因为这是我在测试台上的内容。]

但我确实同意，在这种情况下，按照@Abijeet 的建议只完成两项任务可能会更好。

Answer 2

使用！选择与路径不匹配的所有内容，并结合正常路径。

images: {
    src: ["src/img/**/*.*", "!src/img/fav/*.*"]
    dest: "dest/img/"
}

Answer 3

我会尝试以下方法，

images: {
    src: ["src/img/**/*.*"],
    dest: "dest/img/"
}

我没有对此进行测试，但我认为应该可以。注意!，它告诉 Gulp 忽略这些文件。

根据评论更新

撤消之前对images.src所做的更改。

为此，我建议您在将文件复制到 dest 后使用另一个进程。

如下用另一个对象更新路径数组，

minify: {
   src: ["dest/img/**/*.*", "!dest/img/fav/*.*"],
   dest: ["dest/img/"]
}


function minify() {
    return gulp.src(paths.minify.src)
        .pipe(imagemin({
            progressive: true,
            interlaced: true,
            use: [pngquant()],
        }))
        .pipe(svgo())
        .pipe(gulp.dest(paths.minify.dest));
}

应该可以。我不确定这是否是最好的方法，所以我会等待其他人回答。