Bir Gulp görevinde, ilk boruya bir değişken değeri nasıl ayarlayabilirim ve ikinci borudan okuyabilir miyim?

Question

İki borulu deyim ile bir görev var. İkinci boru, değeri birinci boruda beyan edilen global bir değişkene dayanır. Ancak, global değişkene ikinci borudan erişemiyorum. Boru 2, boru 1 bitmeden önce başlıyor gibi görünüyor.

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/')); 
 
});

Answer 1

Sorun:

Sen Var anlam tap() boru hattı aşamasında imageA1Width for değişken değeri dere boyunca hareket eden her dosya için sıfırlanır hesaplamak.

Ancak imageA1Width sadece kez (responsive() için iletilir nesnesi değişmez bir parçası olarak) ve akış da oluşturuldu önce değerlendirilir. O zaman imageA1Width hala tanımsızdır.

Çözüm: Biz akışında her file için farklı bir genişlik değeri hesaplamak yapmanız gereken şey

. Daha sonra her bir file için, file'un her biri farklı bir genişliğe sahip olacağından, responsive()'u ayrı ayrı aramamız gerekir. Biz gulp-foreach kullanarak bunu yapabilirsiniz:

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/')); 
});