在Gulp任务中，如何在第一个管道中设置变量值并在第二个管道中读取？ [英] In a Gulp task, how can I set a variable value in the first pipe and read it in the second pipe?

问题描述

我有两个管道语句的任务。第二个管道依赖于一个全局变量，其值在第一个管道中声明。但是，我无法从第二个管道访问全局变量。看起来pipe 2在pipe 1完成之前就开始了。

var response = require（'gulp-responsive'）; var tap = require 'gulp-tap'）; //图像生成器taskvar的全局变量imageA1Width = 0; var imageA1Height = 0; //从图像中提取宽度和高度pathfunction getDimensionsFromPath（path）{//示例image：banner-fooBar- $ a1 -1000x901.jpg var path = path || ; var dimensionsString =''; var width = 0; var height = 0; var re = / [^ - ] * $ /; dimensionsString = path.match（re）[0]; dimensionsString = dimensionsString.replace（'。jpg'，''）; dimensionsString = dimensionsString.replace（'。png'，''）; dimensionsString = dimensionsString.replace（'。webp'，''）; dimensionsString = dimensionsString.replace（'.gif'，''）; var dimensionsArr = dimensionsString.split（'x'）; width = parseInt（dimensionsArr [0]，10）; height = parseInt（dimensionsArr [1]，10）; var obj = {width：width，height：height}; return obj;} gulp.task（'image-generator'，function（）{var imageKeyPattern = /-\$a1.*$/; // example image：banner-fooBar- $ a1-1000x901.jpg return gulp。 src（'images / ** / * $ a1 *。*'）.pipe（tap（function（file，t）{var imageA1Path = file.path; //全局变量imageA1Width = getDimensionsFromPath（imageA1Path）.width; imageA1Height = getDimensionsFromPath（imageA1Path）.height;}））.pipe（responsive（{'** / * $ a1 *。*'：[{width：imageA1Width * 2，// NaN skipOnEnlargement：true，rename：function（opt）{ opt.basename = opt.basename.replace（imageKeyPattern，'--extralarge @ 2x'）; opt.dirname =''; return opt;}}，]}））.pipe（gulp.dest（'imagesGenerated /'）） ;}）;

<强>临blem：
$ b

您可以在 imageA1Width var中计算 tap（） pipeline阶段意味着每个文件在流中移动时都会重置var。

然而<$> c imageA1Width 仅被评估为一次（作为传递给 responsive（）的对象字面量的一部分） ）之前，甚至在流创建之前。当时 imageA1Width 仍未定义。

解决方案：

我们需要做的是为流中的每个文件计算不同的宽度值。然后对于每个文件，我们需要分别调用 responsive（），因为每个文件将有不同的宽度。我们可以使用 gulp-foreach ：

  var foreach = require（'gulp-foreach'）; 
 $ b gulp.task（'image-generator'，function（）{
 var imageKeyPattern = /-\$a1.*$/; 
 return gulp.src（' （foreach（function（stream，file））{
 var size = getDimensionsFromPath（file.path）; 
 return stream $（$ / $ / $ $ a1 *。*'）
 .pipe b $ b .pipe（响应（{
'** / * $ a1 *。*'：[{
 width：size.width * 2，
 skipOnEnlargement：true，
重命名：function（opt）{
 opt.basename = opt.basename.replace（imageKeyPattern，
'-extralarge @ 2x'）; 
 opt.dirname =''; 
 return return; 
} 
}] 
}））; 
}））
 .pipe（gulp.dest（'imagesGenerated /'））; 
}）; 
  

I have a task with two piped statements. The second pipe relies on a global variable whose value is declared in the first pipe. But, I am not able to access the global variable from the second pipe. It seems like pipe 2 is starting before pipe 1 finishes.

var responsive = require('gulp-responsive');
var tap = require('gulp-tap');

// global variables for image-generator task
var imageA1Width = 0;
var imageA1Height = 0;

// extracts width and height from image path
function getDimensionsFromPath(path) {
    // example image: banner-fooBar-$a1-1000x901.jpg
    var path = path || '';
    var dimensionsString = '';
    var width = 0;
    var height = 0;
    var re = /[^-]*$/;
    dimensionsString = path.match(re)[0];
    dimensionsString = dimensionsString.replace('.jpg', '');
    dimensionsString = dimensionsString.replace('.png', '');
    dimensionsString = dimensionsString.replace('.webp', '');
    dimensionsString = dimensionsString.replace('.gif', '');
    var dimensionsArr = dimensionsString.split('x');
    width = parseInt(dimensionsArr[0], 10);
    height = parseInt(dimensionsArr[1], 10);
    var obj = {
        width: width,
        height: height
    };
    return obj;
}

gulp.task('image-generator', function () {
    var imageKeyPattern = /-\$a1.*$/; // example image: banner-fooBar-$a1-1000x901.jpg
    return gulp.src('images/**/*$a1*.*')
        .pipe(tap(function (file, t) {
            var imageA1Path = file.path;
            // global variables
            imageA1Width = getDimensionsFromPath(imageA1Path).width;
            imageA1Height = getDimensionsFromPath(imageA1Path).height;
        }))
        .pipe(responsive({
            '**/*$a1*.*': [{
                width: imageA1Width * 2, // NaN
                skipOnEnlargement: true,
                rename: function (opt) {
                    opt.basename = opt.basename.replace(imageKeyPattern, '-extralarge@2x');
                    opt.dirname = '';
                    return opt;
                }
            },
            ]
        }))
        .pipe(gulp.dest('imagesGenerated/'));
});

解决方案

Problem:

You compute the value for the imageA1Width var in the tap() pipeline stage meaning the var is reset for every file moving through the stream.

However imageA1Width is evaluated only once (as part of the object literal that gets passed to responsive()) and before the stream has even been created. At that time imageA1Width is still undefined.

Solution:

What we need to do is compute a different width value for each file in the stream. Then for each file we need to call responsive() individually since each file will have a different width. We can do this using gulp-foreach:

var foreach = require('gulp-foreach');

gulp.task('image-generator', function () {
  var imageKeyPattern = /-\$a1.*$/;
  return gulp.src('images/**/*$a1*.*')
    .pipe(foreach(function(stream, file) {
       var size = getDimensionsFromPath(file.path);
       return stream
        .pipe(responsive({
           '**/*$a1*.*': [{
             width: size.width * 2,
             skipOnEnlargement: true,
             rename: function (opt) {
               opt.basename = opt.basename.replace(imageKeyPattern, 
                                                   '-extralarge@2x');
               opt.dirname = '';
               return opt;
             }
           }]
         }));
    }))
    .pipe(gulp.dest('imagesGenerated/'));
});

这篇关于在Gulp任务中，如何在第一个管道中设置变量值并在第二个管道中读取？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！