gulppipelinegulp-replacegulp-if

gulp-replace if content of files match regex


I have a folder of HTML files that contain a comment at the top with metadata. I would like to run one gulp-replace operation if the metadata matches one regex, and another gulp-replace operation if it doesn't match, then continue on with the rest of the tasks pipeline. If tried various iterations using gulp-if but it always results in "TypeError: undefined is not a function" errors

import gulp    from 'gulp';
import plugins from 'gulp-load-plugins';

const $ = plugins();

function preprocess() {
  var template_data = new RegExp('<!-- template_language:(\\w+)? -->\n', 'i');
  var handlebars = new RegExp('<!-- template_language:handlebars -->', 'i');
  var primaryColor = new RegExp('#dc002d', 'gi');
  var mailchimpColorTag = '*|PRIMARY_COLOR|*';
  var handlebarsColorTag = '{{PRIMARY_COLOR}}';

  var replaceCondition = function (file) {
    return file.contents.toString().match(handlebars);
  }

  return gulp.src('dist/**/*.html')
    .pipe($.if(
      replaceCondition,
      $.replace(primaryColor, handlebarsColorTag),
      $.replace(primaryColor, mailchimpColorTag)
    ))
    .pipe($.replace, template_data, '')
    .pipe(gulp.dest('dist'));
}

What's the most efficient way to go about this?


Solution

  • gulp-filter was the answer. Whereas gulp-if can be used to decide whether a particular operation should be applied to the whole stream, gulp-filter can be used to decide which files in a stream an operation should be applied to.

    import gulp    from 'gulp';
    import plugins from 'gulp-load-plugins';
    
    const $ = plugins();
    
    function preprocess() {
      var template_language = new RegExp('<!-- template_language:(\\w+)? -->\n', 'i');
      var handlebars = 'handlebars';
      var primaryColor = new RegExp('#dc002d', 'gi');
      var handlebarsColorTag = '{{PRIMARY_COLOR}}';
      var handlebarsCondition = function (file) {
        var match = file.contents.toString().match(template_language);
        return (match && match[1] == handlebars);
      }
      var handlebarsFilter = $.filter(handlebarsCondition, {restore: true});
      var mailchimpColorTag = '*|PRIMARY_COLOR|*';
      var mailchimpCondition = function (file) {
        return !handlebarsCondition(file);
      }
      var mailchimpFilter = $.filter(mailchimpCondition, {restore: true});
    
      return gulp.src('dist/**/*.html')
        .pipe(handlebarsFilter)
        .pipe($.replace(primaryColor, handlebarsColorTag))
        .pipe($.debug({title: 'Applying ' + handlebarsColorTag}))
        .pipe(handlebarsFilter.restore)
        .pipe(mailchimpFilter)
        .pipe($.replace(primaryColor, mailchimpColorTag))
        .pipe($.debug({title: 'Applying ' + mailchimpColorTag}))
        .pipe(mailchimpFilter.restore)
        .pipe($.replace(template_language, ''))
        .pipe(gulp.dest('dist'));
    }