如何使用那个免费的TINYPNG压缩图片?

Question

有人使用gulp-tinypng-nokey这个插件么?
我现在pic1文件夹里有很多文件夹,并且他们的层级数不确定,在使用官方这个API插件的时候没问题

var gulp = require('gulp');
var tinypng = require('gulp-tinypng-compress');
var tiny = require('gulp-tinypng-nokey');
gulp.task('tp', function() {
        gulp.src('pic1/**/*.{png,jpg,jpeg}')
            .pipe(tinypng({
                key: '***',
                sigFile: 'pic1/.tinypng-sigs',
                log: true
            }))
            .pipe(gulp.dest('pic1'));
    })

如上,如果我使用tinypng这个方法,他能正常覆盖掉没压缩的图片.但是这个需要有KEY,并且每个月只有500张,完全不够用....

但是我如果使用tiny这个方法

gulp.task('tp', function() {
    gulp.src('pic1/**/*.{png,jpg,jpeg}')
        .pipe(tiny())
        .pipe(gulp.dest('pic1'));
})

他会在pic1目录下创建一个新目录,然后所有的图片都在这个目录里,我需要挨个目录分别去找相应的图片再覆盖,文件层级一多之后就会比较麻烦.

如何让他保持有原目录层级呢,最好是新产生的图片直接覆盖掉原图

再多描述一下,比如pic1下某张图片A是

pic1/x/yy/z/A.jpg

第一种方法修改后保存了这个路径,新图片仍然在这里
第二种就变成了

pic1/插件自定义的一个名称/A.jpg

而我所有的图片都是在各种目录下的,挨个复制进去特别麻烦

Answer 1

建一个临时文件夹作为中转目录，然后移过去覆盖，再删除临时文件夹。其实不应该覆盖掉原图，src和dist分开最好

Answer 2

JavaScript 最大的优点就是你可以自己编辑需要的脚本，楼主需要的实例也非常简单。你只需要将对应目录下所有的文件夹递归出来。

directories.forEach(function(elem){
    gulp.src('[source-directory].{png,jpg,jpeg}')
        .pipe(tiny())
        .pipe(gulp.dest('[target-directory]'));
});

楼主试试上述的方式吧，只是将文件夹递归出来应该是非常简单的。

---

gulp.src('pic1/*.{png,jpg,jpeg}')
        .pipe(tiny())
        .pipe(gulp.dest('pic1'));

gulp.src('pic2/*.{png,jpg,jpeg}')
        .pipe(tiny())
        .pipe(gulp.dest('pic2'));

gulp.src('pic3/*.{png,jpg,jpeg}')
        .pipe(tiny())
        .pipe(gulp.dest('pic3'));

原理就如上，其实就是你有多少个文件夹，你就处理多少次。如果你觉得这样写太烦了。就参考第一段代码，来优化自己的代码吧，就是一个循环而已。在循环之前将所有的文件夹列表找出来，通过递归的方式。