基于正则提取Gulp插件中动态条件语句间的内容

嘿，我来帮你搞定这个Gulp插件的条件块处理需求！根据你的描述，我们需要实现两个核心功能：匹配[! @if (xxx) !]和[! @endif !]包裹的内容，以及根据命令行参数决定是否移除这些内容。下面一步步来实现：

1. 编写匹配条件块的正则表达式 #

首先要搞定正则，因为你不需要关心条件部分的具体内容，只需要匹配从[! @if ... !]到[! @endif !]的整块内容。这里分两种场景：

场景1：无嵌套的条件块（大多数情况） #

如果你的代码里不会出现@if嵌套@if的情况，用这个简单的正则就足够：

const conditionalRegex = /\[! @if \(.*?\) !\]([\s\S]*?)\[! @endif !\]/g;

• \[! @if \(.*?\) !\]：精准匹配开头的条件标签，转义了特殊字符[、(、]，.*?非贪婪匹配任意条件内容（避免匹配到后面的!]）
• ([\s\S]*?)：捕获条件块中间的所有内容，[\s\S]能匹配包括换行在内的所有字符，*?保证只匹配到最近的[! @endif !]
• \[! @endif !\]：匹配结束标签

场景2：有嵌套的条件块（进阶需求） #

如果存在嵌套的@if/@endif，JavaScript原生正则不支持平衡组匹配，这时候需要用状态机来遍历内容，手动计数@if和@endif的数量来确定块的边界。不过先从简单场景入手，后面需要的话再扩展。

2. Gulp插件核心逻辑实现 #

我们需要用through2创建自定义转换流，结合yargs解析命令行参数，具体步骤：

第一步：安装依赖 #

先安装需要的包：

npm install gulp through2 yargs --save-dev

第二步：编写gulpfile.js #

const gulp = require('gulp');
const through = require('through2');
const argv = require('yargs').argv;

// 自定义转换流：处理条件块
function processConditionalBlocks() {
  const conditionalRegex = /\[! @if \(.*?\) !\]([\s\S]*?)\[! @endif !\]/g;

  return through.obj(function(file, enc, cb) {
    // 只处理Buffer类型的文件
    if (file.isBuffer()) {
      let content = file.contents.toString();
      
      // 根据命令行参数判断是否移除条件块
      if (argv.statements === false) {
        // 移除整个条件块（包括@if和@endif标签）
        content = content.replace(conditionalRegex, '');
      } else {
        // 可选：如果需要保留中间内容，只移除条件标签
        content = content.replace(conditionalRegex, '$1');
        // 如果想原样保留标签和内容，直接注释掉上面的替换即可
      }
      
      // 更新文件内容
      file.contents = Buffer.from(content);
    }

    this.push(file);
    cb();
  });
}

// 定义Gulp任务
gulp.task('process-files', function() {
  // 替换成你需要处理的文件路径
  return gulp.src('src/**/*.{html,js,css}')
    .pipe(processConditionalBlocks())
    .pipe(gulp.dest('dist')); // 输出到目标目录
});

3. 使用方法 #

• 移除所有条件块：运行gulp process-files --statements false
• 保留条件块内容（移除标签）：运行gulp process-files或者gulp process-files --statements true
• 原样保留所有内容：把else分支的替换逻辑注释掉即可

4. 注意事项 #

• 如果你的条件块里有特殊字符（比如更多的括号），可以微调正则的匹配范围，比如把.*?换成[^!]*来避免意外匹配
• 嵌套场景需要额外处理：可以通过遍历字符串，维护一个计数器，遇到[! @if就+1，遇到[! @endif就-1，当计数器回到0时才标记块结束

内容的提问来源于stack exchange，提问作者user8116198