How to set gulp.dest() in same directory as pipe inputs?

Question

I need all the found images in each of the directories to be optimized and recorded into them without setting the path to the each folder separately. I don't understand how to make that.

var gulp = require('gulp');
var imageminJpegtran = require('imagemin-jpegtran');

gulp.task('optimizeJpg', function () {

return gulp.src('./images/**/**/*.jpg')
    .pipe(imageminJpegtran({ progressive: true })())
    .pipe(gulp.dest('./'));
});

Possible duplicate of [Modify file in place (same dest) using Gulp.js and a globbing pattern](http://stackoverflow.com/questions/23247642/modify-file-in-place-same-dest-using-gulp-js-and-a-globbing-pattern) — numbers1311407, Nov 27 '15 at 00:36
The only problem in the original code snippet is that `dest` is being called with `'./'` instead of the base, `'./images'`. Fixing that error would make this work without changing the approach. — numbers1311407, Nov 27 '15 at 00:39

score 85 · Accepted Answer · edited May 23 '17 at 16:34

85

Here are two answers.
First: It is longer, less flexible and needs additional modules, but it works 20% faster and gives you logs for every folder.

var merge = require('merge-stream');

var folders =
[
    "./pictures/news/",
    "./pictures/product/original/",
    "./pictures/product/big/",
    "./pictures/product/middle/",
    "./pictures/product/xsmall/",
    ...
];

gulp.task('optimizeImgs', function () {

    var tasks = folders.map(function (element) {

        return gulp.src(element + '*')
            .pipe(sometingToDo())
            .pipe(gulp.dest(element));

    });

    return merge(tasks);

});

Second solution: It's flexible and elegant, but slower. I prefer it.

return gulp.src('./pictures/**/*')
    .pipe(somethingToDo())
    .pipe(gulp.dest(function (file) {
        return file.base;
    }));

edited May 23 '17 at 16:34

ElChiniNet

2,778
2
19
27

answered Apr 23 '15 at 08:34

Andrey Vaganov

1,684
1
12
18

can solution 2 be improved to work with unknown folder depth? I'd like to iterate trough whole folder structure? – Rouz Sep 06 '16 at 19:37
2

@Rouz it already works with unknown folder depth. `foo/**/*` means all files in foo and any level of its subdirectories. Two double stars is redundant. – temoto Sep 22 '16 at 23:53
I've been looking for this for ages! I couldn't accept that you can't output files where they are! Thanks a lot. – Sampgun Jun 04 '20 at 16:56
1

Just wanted to add that solution 2 works great when you're using a `tsconfig.json` file to specify input/output (for those landing here with that circumstance). Firstly, ensure you comment out (or remove) *outDir*. Second, if you're using **babel** (gulpfile.babel.js), you can make it even more elegant: `gulp.dest( file => file.base )`. Thanks for the answer! – Rik Sep 18 '20 at 00:35

score 13 · Answer 2 · answered Apr 22 '15 at 13:39

13

Here you go:

gulp.task('optimizeJpg', function () {

    return gulp.src('./images/**/**/*.jpg')
        .pipe(imageminJpegtran({ progressive: true })())
        .pipe(gulp.dest('./images/'));
});

Gulp takes everything that's a wildcard or a globstar into its virtual file name. So all the parts you know you want to select (like ./images/) have to be in the destination directory.

answered Apr 22 '15 at 13:39

ddprrt

7,424
3
29
25

Why two double stars? – tvanc Nov 08 '16 at 17:36
1

@turibe, The double stars are the **wildcards** mentioned by ddbrrt – Mario Alberto Contreras Mar 28 '17 at 15:34
4

@MarioAlbertoContreras one pair should suffice. "./images/**/*.jpg" is just as good as "./images/**/**/*.jpg" – tvanc Mar 28 '17 at 15:39

score 10 · Answer 3 · answered Jun 02 '17 at 21:00

10

You can use the base parameter:

gulp.task('uglify', function () {
  return gulp.src('./dist/**/*.js', { base: "." })
    .pipe(uglify())
    .pipe(gulp.dest('./'));
});

answered Jun 02 '17 at 21:00

g.breeze

1,940
19
24

How to set gulp.dest() in same directory as pipe inputs?

3 Answers3

Linked