合并headerlinkcss和脚本列表

Consolidate header link css and script list

我正在建立一个网站,我正在尝试确定是否有一种方法可以 combine/consolidate 将特定文件组合在一起,而无需将它们组合成一个巨大的文件。我正在尝试清理我的页面,例如我讨厌滚动浏览我的列表

     <!-- My plugins -->
    <script src="./assets/js/plugins/moment.min.js"></script>
    <script src="./assets/js/plugins/bootstrap-switch.js"></script>
    <script src="./assets/js/plugins/bootstrap-tagsinput.js"></script>
    <script src="./assets/js/plugins/bootstrap-selectpicker.js"></script>
    <script src="./assets/js/plugins/jasny-bootstrap.min.js"></script>
    <script src="./assets/js/plugins/nouislider.min.js"></script>
    <script src="./assets/js/plugins/bootstrap-datetimepicker.js"></script>
    <script src="./assets/js/photorevealer.js"></script>
    <script src="./assets/js/type.js"></script>

我想创建一个指针或类似的东西,就像

<link href="js_scripts.lst">

那个文件类似于

    <script src="./assets/js/plugins/moment.min.js"></script>
    <script src="./assets/js/plugins/bootstrap-switch.js"></script>
    export js_script

这样我可以为所有 css 创建 1 个文件,为 js 文件创建 1 个文件,为 google 字体创建 1 个文件等等。

制作一个文件,links.js

function loadjscssfile(filename){
    var fileref=document.createElement('script') 
    fileref.setAttribute("type","text/javascript") 
    fileref.setAttribute("src", filename) 
    if (typeof fileref!="undefined"){
      document.getElementsByTagName("head")[0].appendChild(fileref)
    }
}

然后再次在 links.js 文件中为所有文件调用该函数:

loadjscssfile("./assets/js/plugins/moment.min.js");
loadjscssfile("./assets/js/plugins/bootstrap-switch.js");
loadjscssfile("./assets/js/plugins/bootstrap-tagsinput.js");
loadjscssfile("./assets/js/plugins/bootstrap-selectorpicker.js");
loadjscssfile("./assets/js/plugins/jasny-bootstrap.min.js");
loadjscssfile("./assets/js/plugins/nouislider.min.js");
loadjscssfile("./assets/js/plugins/bootstrap-datetimepicker.js");
loadjscssfile("./assets/js/photorevealer.js");
loadjscssfile("./assets/js/type.js");

然后从您的 index.html 页面加载 links.js 文件:

<script src="links.js"></script>

然后您的文件将加载!

注意:您在编码时不会看到这些链接,但如果您点击“检查”,它们就会出现在网站上。编码时更整洁。