Gulp模块，可以提取<script>(或<style>)标记放到一个新的单独文件中

Gulp module that can extract <script> (or <style>) tags into a new separate file

本文关键字：文件 单独 一个 style 模块 提取 script Gulp      更新时间：2023-09-26

是否有一个gulp模块，可以提取<script>(或<style>)标签到一个单独的文件?

例如:

原始HTML文件

<html>
    <body>
        <style>
            .my-style{
                background:red;
            }
        </style>
        <div class="my-style">
            hello
        </div>
        <script>
            var MyScript = function(){
                console.log("hello");
            }
        </script>
    </body>
</html>

新建HTML文件

<html>
    <body>
        <div class="my-style">
            hello
        </div>
    </body>
</html>

新建CSS文件

.my-style{
    background:red;
}

新建JS文件

var MyScript = function(){
    console.log("hello");
};

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

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

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

尝试gulp-html-extract https://www.npmjs.com/package/gulp-html-extract，尽管它看起来没有维护，可能您可以使用concat或重命名来创建最终文件

相关文章：