Gulp模块，可以将<script>（或<style>）标记提取到新的单独文件中

Question

是否有一个gulp模块可以将＆lt; script＆gt; （或＆lt; style＆gt; ）标记提取到一个单独的文件中？

＆＃xA; ＆＃xA;

例如：

＆＃xA;＆＃xA;

原始HTML文件

＆＃xA;＆＃xA;

 ＆lt; html＆gt; ＆＃XA; ＆LT;身体GT;＆＃XA; ＆LT;风格＆GT;＆＃XA; 。我的风格{＆＃XA;背景：红色;＆＃XA; }＆＃XA; ＆LT; /风格＆GT;＆＃XA;＆＃XA; ＆lt; div class =“my-style”＆gt;＆＃xA;你好＆＃XA; ＆LT; / DIV＆GT;＆＃XA;＆＃XA; ＆LT;脚本＆GT;＆＃XA; var MyScript = function（）{＆＃xA;的console.log（ “你好”）;＆＃XA; }＆＃XA; ＆LT; /脚本＆GT;＆＃XA; ＆lt; / body＆gt;＆＃xA;＆lt; / html＆gt;＆＃xA;  

＆＃xA;＆＃xA;

新的HTML文件

＆＃xA;＆＃ XA;

 <代码>＆LT; HTML＆GT;＆＃XA; ＆LT;身体GT;＆＃XA; ＆lt; div class =“my-style”＆gt;＆＃xA;你好＆＃XA; ＆LT; / DIV＆GT;＆＃XA; ＆lt; / body＆gt;＆＃xA;＆lt; / html＆gt;＆＃xA;  

＆＃xA;＆＃xA;

新的CSS文件

＆＃xA;＆＃ XA;

 <代码>。我的式{＆＃XA; background：＆;＆＃xA;}＆＃xA;  

＆＃xA;＆＃xA;

新的JS文件

＆＃xA;＆＃xA;

  var MyScript = function（）{＆＃xA;的console.log（ “你好”）;＆＃XA;};＆＃XA;  

＆＃XA;

Answer 1

要将内联脚本提取到外部.js文件，您可以使用Cripser - https://www.npmjs.com/package/gulp-crisper

.pipe(crisper({
      scriptInHead: true,
      onlySplit: false
    }))

虽然我找不到任何可以将内联CSS提取到外部文件的内容，但您至少可以使用'gulp-minify-inline'缩小内联CSS，这是另一种选择 - https://www.npmjs.com/package/gulp-minify-inline

Answer 2

尝试使用gulp-html-extract https://www.npmjs.com/package/gulp-html-extract，即使它看起来没有维护，也许您可​​以使用concat或rename来创建最终文件。