Question

我正在Grunt任务中复制一些HTML文件，并希望使用jQuery进行操作 - 就像这样。。。

 copy: {
    expand: true,
    src: 'source/*.html',
    dest: 'build/',
    ext: '.html',
    filter: 'isFile',
    options: {
      process: function (content, srcpath) {
        // find all occurrences of <span class='foo'> in file and wrap in a <div class='bah'>
        $('span.foo').wrap('<div class="bah"></div>');
      }
    }

我看到有一个咕噜的插件grunt-jsdom-jquery似乎可以解决这个问题，但它最后一次致力于2年前，我无法让它发挥作用 - 无论如何它似乎过于复杂。

我认为我需要使用node jsdom一些方法（当然文档中还有一个将jQuery作为脚本加载的示例），但是如何在Grunt中应用它，特别是在一个复制或连接等主要任务？

任何想法都赞赏。

Answer 1

尝试grunt-processhtml

有一个method to change blocks of content，您可以在其中添加自定义块类型数组：

'use strict';

module.exports = function (processor) {
  // This will allow to use this <!-- build:customBlock[:target] <value> --> syntax 
  processor.registerBlockType('customBlock', function (content, block, blockLine, blockContent) {
    var title = '<h1>' + block.asset + '</h1>';
    var result = content.replace(blockLine, title);

    return result;
  });
};

这会改变你的html中的以下内容：

<!-- build:customBlock myValue -->
<p>This will be replaced with the result of the custom block above</p>
<!-- /build -->

结果将是

<h1>myValue</h1>

如何在Grunt任务中使用jQuery

1 个答案: