Question

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

这是我的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

我会尝试以下内容，

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

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

根据评论更新

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

为此，我建议您在将文件复制到目标后使用其他流程。

使用另一个对象更新paths数组，如下所示，

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

那应该有用。我不确定这是否是最好的方法，所以我等着其他人回答。

Answer 2

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

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

Answer 3

您也可以尝试使用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建议的那样。

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

3 个答案:

根据评论更新