gulp-tinypng
gulp-tinypng copied to clipboard
creativeaura
Wrong output folder
The plugin is outputting all images to a folder called .gulp instead of what was declared on the gulp task.
Would also be nice if the plugin could preserve the original directory structure, instead of outputting everything into a single folder.
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')
I noticed this as well. I've piped the images to a new folder, but the temporary files in .gulp are still present.
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.
@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?
That's what I'm about to do, too bad that the plugin does not clean its stuff itself.
@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.
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)
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?
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 ;)
@pyrsmk here is my repo https://github.com/Ferym26/GulpSass I did not understand how it should work =(
@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); });