Wrong output folder about gulp-tinypng

[creativeaura]

The plugin temporally download the images to .gulp folder because it have to download the image for the tinypng server.

You can pipe them to any destination folder.

.pipe(gulp.dest('compressed_images')

[ericcholis]

I noticed this as well. I've piped the images to a new folder, but the temporary files in .gulp are still present.

[creativeaura]

Every time you run the task the images for removed. We can't empty the folder until its been copied to the destination folder in the next pipe step.

[lmartins]

@creativeaura Totally missed you comment here, until today when looking for a solution to this.
You're suggesting manually removing that .gulp folder after the images have been processed?

[pyrsmk]

That's what I'm about to do, too bad that the plugin does not clean its stuff itself.

[Ferym26]

How can I delete a folder .gulp/tinypng with gulp?

[pyrsmk]

Take a look at the NPM rimraf module per example.

[Ferym26]

@pyrsmk thx, but how to do it after tinypng task?
var rimraf = require('rimraf');
gulp.task('tinypng', function () {
gulp.src(['app/img//*.png', '!app/img/compressed//*.png'])
.pipe(tinypng('my api key'))
.pipe(gulp.dest('app/img/compressed/'))
.pipe(rimraf('.gulp'));
});
It does not work.

[pyrsmk]

Rimraf is not a gulp module. Search on NPM for a gulp module that remove directories, there are several ;) (note that you'll need to create another task to remove your directory as the files in your tinypng task are your images and not the .gulp/tinypng/ directory)

[Ferym26]

If I do so:

// Compress PNG Task
gulp.task('compress', ['tinypng', 'del']);

gulp.task('tinypng', function () {
gulp.src(['app/img//*.png', '!app/img/compressed//*.png'])
.pipe(tinypng('my api key'))
.pipe(gulp.dest('app/img/compressed/'));
});

gulp.task('del', ['tinypng'], function (cb) {
rimraf('.gulp', cb);
});

then
$gulp compress
[13:31:39] Starting 'tinypng'...
[13:31:39] Finished 'tinypng' after 10 ms
[13:31:39] Starting 'del'...
[13:31:39] Finished 'del' after 8.84 ms
[13:31:39] Starting 'compress'...
[13:31:39] Finished 'compress' after 7 μs
[13:31:42] gulp-tingpng: [compressing] ✔ tumblr_muuig0890N1st5lhmo1_1280.png (done)

the task 'del' does not remove '.gulp' folder. why the task 'tinypng' is finished before the actual end of its operations?

[pyrsmk]

You're not using gulp as expected. Gulp tasks should return streams so tasks are knowing when subtasks have finished.

Furthermore, subtasks are executed all at once! So, when you're calling compress, gulp will execute tinypng and del subtasks in parallel.

First, remove your compress task. It's useless. Rename your del task in compress (to keep logic). And make your tinypng task return gulp.src. Now, when you're running gulp compress, gulp will call the compress task which will be waiting for tinypng to execute and then will run the compress code.

Please refer, to the gulp code to well understand how it's working ;)

[Ferym26]

@pyrsmk here is my repo
https://github.com/Ferym26/GulpSass
I did not understand how it should work =(

[Ferym26]

@pyrsmk helped to find a solution. there is
var tinypng = require('gulp-tinypng');
var rimraf = require('rimraf'); // delete folder
gulp.task('tinypng', function () {
return gulp.src(['app/img//*.png', '!app/img/compressed//*.png'])
.pipe(tinypng('lMaOo89RU3OngPRhsSAzAEjqqxPGe4rU'))
.pipe(gulp.dest('app/img/compressed/'));
});

gulp.task('compress', ['tinypng'], function (cb) {
rimraf('.gulp', cb);
});

[pyrsmk]

👍