CODEWITHSUNDEEP
javascriptcsshtml
ProjectPokket
ProjectPokket

Reputation: 155

Consolidate header link css and script list

I am building a website and I'm trying to determine if there is a way to combine/consolidate specific files together without combining them into 1 giant file. I'm trying to clean up my pages I hate having to scroll thru my list for example

     <!-- 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>

I want to create a pointer or something similar to just to go something like 

<link href="js_scripts.lst">

and that file is something like

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

that way I can create 1 file for all the css, 1 file for js files, 1 file for google fonts and so on.

Upvotes: 2

Views: 139

Answers (1)

Jack Bashford
Jack Bashford

Reputation: 44145

Make one file, 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)
    }
}

Then call the function for all your files, again in the links.js file:

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");

And then load the links.js file from your index.html page:

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

And then your files will load!

Note: You won't see these links while you're coding, but they'll be on the website if you hit Inspect. It's just tidier when you're coding.

Upvotes: 3

Related Questions