javascript - 无法进行 grunt 预处理以替换值

Question

我想使用 grunt preprocess .

在app/index.html中:

<script type="text/javascript">
        var configValue = '/* @echo FOO */' || 'default value';
        console.log('A');
        console.log(configValue);
        console.log('B');
</script>

我的 grunt 文件:

'use strict';
module.exports = function (grunt) {
  ...
  grunt.initConfig({
    ...
    preprocess: {
      options: {
        context : {
          DEBUG: true,
          FOO: 'bar'
        }
      },
      multifile : {
        files : {
          'app/index.processed.html' : 'app/index.html'
          //,'test/test.processed.js'   : 'test/test.js'
        }
      }
    }
  });

  grunt.loadNpmTasks('grunt-preprocess');

  ...
};

然后我使用命令:

% grunt preprocess
Running "preprocess:multifile" (preprocess) task

Done, without errors.

Elapsed time
preprocess:multifile  22ms
Total                 22ms

它生成了文件 app/index.processed.html，但是这个文件仍然有一行:

var configValue = '/* @echo FOO */' || 'default value';

该值尚未被替换。我错过了什么？

---

编辑:

我试着看看这样的 block 会发生什么:

<!-- @ifdef DEBUG -->
  <h1>Test Page</h1>
<!-- @endif -->

<!-- @exclude -->
<header>You're on dev!</header>
<!-- @endexclude -->

它被替换为:<h1>Test Page</h1> (保持与以前相同的上下文选项)。

所以看起来预处理正在进行。预处理任务只是无法识别 '/* @echo FOO */'作为要替换的东西。这很奇怪，因为我是从 sample on github 中获取的.

编辑2:

<p><!-- @echo FOO --></p>替换为 <p>bar</p> ，这是预期的。

Answer 1

区别在于您的示例位于 html 标记内，而另一个可能位于 .js 文件内。

预处理对 html 和 js(和咖啡)使用不同的语法

• https://github.com/jsoverson/preprocess/blob/master/lib/regexrules.js

在 html 标签内使用此语法:

 var configValue = '<!-- @echo FOO -->' || 'default value';

这是一个例子:

• https://github.com/jsoverson/preprocess#extended-html-syntax