使用 GULP 将一些 html 代码更改为另一个答案

【问题标题】：Change some html code into antoher with GULP使用 GULP 将一些 html 代码更改为另一个
【发布时间】：2016-08-06 09:16:21
【问题描述】：

感谢您检查我的问题。这可能听起来微不足道，但我需要帮助。

我想学习如何使用 GULP更改 HTML 代码。或者只是用 GULP 更改一些字符串。例如今天我需要改变这个：

<img class="social" src="../symbols/facebook.svg">

到这里：

<svg class="social">
    <use xlink:href="../symbols/sprite.svg?v201608061556#facebook"></use>
</svg>

如您所见，我正在通过 symbols 构建图标系统，并且我希望保持原始 HTML 尽可能干净。所以我可以在没有任何观察者的情况下工作。后来我只运行一次 GULP，它就完成了这项工作：创建精灵并更改 HTML 以使用此精灵。

我尝试了gulp-replace，它可以使用 regex 将一个字符串更改为另一个字符串，但是使用 regex 对我来说看起来太复杂了。我什至不确定是否可以使用正则表达式。我还想将时间戳添加为 ?v201608061556。所以我想运行一些我可以在 gulp 文件中编写的 JavaScript。

我尝试的下一个是gulp-dom，它看起来像我需要的东西。但由于一些错误，我无法使其工作：

if (node.nodeType === NODE_TYPE.DOCUMENT_NODE) {
        ^
TypeError: Cannot read property 'nodeType' of undefined

终端登录错误：

所以问题是：

是否可以使用 regex 和 gulp-replace 包制作？
有谁知道gulp-dom 包裹。我可以让它以某种方式工作吗？是否可以完成我的任务呢？
在 Gulp 任务中是否有另一种编写 JavaScript 的方法所以我可以获取一个字符串，根据我的需要使用所有 JavaScript 功能处理它并保存？
我能否以同样的方式使用 Gulp 中的 HTML 我在编写网站代码时工作？使用 DOM，使用 querySelector 和 classList 例如？也许是 jQuery？

谢谢。

【问题讨论】：

标签： javascript html regex gulp

【解决方案1】：

好的，我找到了gulp-change。它为您提供文件内容作为字符串。您可以使用 javascript 对该字符串执行任何操作，然后将其返回到管道。

【讨论】：

【解决方案2】：

如果您发布了 gulp 任务流，则更容易诊断问题。根据您提供的信息，我相信您会收到此错误，因为（如果您按照插件页面上的示例）您可能返回的是您修改的元素，而不是完整的文档表示。下面是 gulp 插件页面中的示例：

gulp.task('html', function() {
return gulp.src('./src/index.html')
    .pipe(dom(function(){
        return this.querySelectorAll('body')[0].setAttribute('data-version', '1.0');
    }))
    .pipe(gulp.dest('./public/'));
});

您应该采取两个关键步骤来使用gulp-dom 操作 DOM：

首先使用getElmentById、setAttribute、appendChild等简单的js DOM操作方法对您想要的元素进行更改。
完成后，您的 gulp 流应返回 this（整个文档），而不是您要修改的元素。

在你的情况下，你可以做这样的事情（如果你觉得这太冗长，你可以尝试完全使用不同的插件/方法）：

var gulp = require('gulp');
var dom = require('gulp-dom);

gulp.task('domManipulation', function() {
  return gulp.src('app/index.html')
    .pipe(dom(function(){
      // cache/create all elements you will work with --'this' is your Document
      var parentDiv = this.querySelector('div.imgParent');
      var img = this.querySelector('img.social');
      var svg = this.createElement('svg');
      var use = this.createElement('use');

      // DOM manipulation
      svg.classList.add('social');
      use.setAttribute('xlink:href', "../symbols/sprite.svg?v201608061556#facebook");
      svg.appendChild(use);
      parentDiv.replaceChild(svg, img);

      return this; // return the whole Document
    }))
    .pipe(gulp.dest('dist'));
});

我测试了上面的代码，它工作得很好。希望这会有所帮助。

【讨论】：