Gulp 高效响应图像，可吞咽_Gulp_Graphicsmagick_Responsive Images

Gulp 高效响应图像，可吞咽

gulp

Gulp 高效响应图像，可吞咽,gulp,graphicsmagick,responsive-images,Gulp,Graphicsmagick,Responsive Images,我正在尝试高效地生成响应图像，以便在网站上使用，但在处理gulp中的现有文件和路径时遇到一些问题。图像位于分层结构的文件夹中，其中页面是根文件夹，有几个向下递归的子文件夹，其中大多数都有图像我当前的任务如下所示： gulp.task('responsive', function() { gulp.src('pages/**/*.{jpg,png}') .pipe($.plumber({ errorHandler: function (err) {

我正在尝试高效地生成响应图像，以便在网站上使用，但在处理gulp中的现有文件和路径时遇到一些问题。图像位于分层结构的文件夹中，其中

页面

是根文件夹，有几个向下递归的子文件夹，其中大多数都有图像

我当前的任务如下所示：

gulp.task('responsive', function() {
    gulp.src('pages/**/*.{jpg,png}')
    .pipe($.plumber({
        errorHandler: function (err) {
            console.log(err);
            this.emit('end');
        }
    }))
    .pipe(responsive({
        '**/*.*': [{
            width: 2240,
            suffix: '-2240',
            quality: 70
        }, {
            width: 1920,
            suffix: '-1920',
            quality: 70
        }, {
            width: 1600,
            suffix: '-1600',
            quality: 70
        }, {
            width: 1280,
            suffix: '-1280',
            quality: 70
        }, {
            width: 1280,
            height: 300,
            crop: true,
            gravity: 'Center',
            suffix: '-thumbwide',
            quality: 70
        }, {
            width: 960,
            suffix: '-960',
            quality: 70
        }, {
            width: 640,
            suffix: '-640',
            quality: 70
        }, {
            width: 480,
            suffix: '-480',
            quality: 70
        }, {
            width: 320,
            suffix: '-320',
            quality: 70
        }]
    }))
    .pipe(gulp.dest(function(file) {
        return file.base;
    }));
});

这有两个主要问题：

当图像最好位于源旁边的

Images

-文件夹中时，图像通过管道传输到与源相同的文件夹中

如果任务再次运行，它将根据源和先前生成的响应映像生成新文件

任务使用，它利用GraphicsMagck调整大小。我尝试使用（设置为

.pipe（$.cached（'pages'））

）来解决问题2，但似乎没有效果

如何根据当前设置解决问题1和问题2？

这两个问题的解决方案如下：

忽略对

图像

-文件夹的需要。相反，保留一个单独的

源文件

-文件夹，其中包含整齐排列的原始图像和文本文件

使用临时文件夹确保正确重建整个

输出

-文件夹，并在文本文件旁边放置响应图像

我为此写了：

在packages.json中使用以下命令：

  "devDependencies": {
    "del": "^2.2.0",
    "gulp": "^3.9.1",
    "gulp-cached": "^1.1.0",
    "gulp-debug": "^2.1.2",
    "gulp-gitignore": "^0.1.0",
    "gulp-imagemin": "^2.4.0",
    "gulp-load-plugins": "^1.2.2",
    "gulp-responsive": "^2.2.0"
  }

它从

源

获取文件，将其移动到

输出

，从

输出

的内容构建响应图像并将其存储在

响应

中，然后应用imagemin并将其移回

输出

。最后，

responsive

被清除。