使用gulp插件gulp-aotuprefixer-html给html中的样式自动加前缀出现副作用

Question

使用gulp插件gulp-aotuprefixer-html,之后发现生成的自动加了前缀的html文件中的汉字都被（除了注释中的）转化成了特殊字符，我只想给style标签中的样式自动加前缀，不想动其他部分，看了下gulp-aotuprefixer-html的源码也没看太明白，只知道转化过程中html文件被转换成了字符串，这个问题怎么办呢？怎么样只操作style标签不影响其他部分的文字呢？

还有其他影响：
单标签闭合用的/被去掉了：

没属性值得属性被加了空值比如v-clock变成了v-clock=""
link和script标签中的单引号被转换成了双引号，
整体像被格式化了一遍

Answer 1

这个插件用到了cheerio这个模块，效果就是这样的。
中文的问题可以解决，cheerio带入参数decodeEntities: false就可以避免中文被转码。
其他问题应该都不是大问题。
其实在HTML5的规范里，自闭合标签结尾不写斜杠才是规范。

要解决楼主的问题只能用node把html里的style提取出来，处理后再replace掉。示例代码如下：

const fs = require('fs');
const path = require('path');
const htmlAutoprefixer = require('html-autoprefixer');

const htmlPath = path.join(__dirname, 'index.html');
let htmlContent = fs.readFileSync(htmlPath).toString();

htmlContent = htmlContent.replace(/<style[^>]*>([^<>]+)<\/style>/, style => {
  return htmlAutoprefixer.process(style);
});

fs.writeFileSync(htmlPath.replace('index.html', 'index2.html'), htmlContent);