鍍金池/ 問答/網(wǎng)絡(luò)安全  HTML/ 使用gulp插件gulp-aotuprefixer-html給html中的樣式自

使用gulp插件gulp-aotuprefixer-html給html中的樣式自動加前綴出現(xiàn)副作用

使用gulp插件gulp-aotuprefixer-html,之后發(fā)現(xiàn)生成的自動加了前綴的html文件中的漢字都被（除了注釋中的）轉(zhuǎn)化成了特殊字符，我只想給style標簽中的樣式自動加前綴，不想動其他部分，看了下gulp-aotuprefixer-html的源碼也沒看太明白，只知道轉(zhuǎn)化過程中html文件被轉(zhuǎn)換成了字符串，這個問題怎么辦呢？怎么樣只操作style標簽不影響其他部分的文字呢？

圖片描述

還有其他影響：
單標簽閉合用的/被去掉了：
圖片描述
沒屬性值得屬性被加了空值比如v-clock變成了v-clock=""
link和script標簽中的單引號被轉(zhuǎn)換成了雙引號，
整體像被格式化了一遍

回答
編輯回答
咕嚕嚕

這個插件用到了cheerio這個模塊，效果就是這樣的。
中文的問題可以解決，cheerio帶入?yún)?shù)decodeEntities: false就可以避免中文被轉(zhuǎn)碼。
其他問題應(yīng)該都不是大問題。
其實在HTML5的規(guī)范里，自閉合標簽結(jié)尾不寫斜杠才是規(guī)范。

要解決樓主的問題只能用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);
2017年8月11日 01:10