複数の CSS や JS ファイルを HTML に読み込ませる時、head 要素内をスッキリさせる方法

複数の CSS ファイルや JS ファイルを読み込む必要がある時に、head 要素内がどうしても肥大化してしまう。

<!-- link 要素や script 要素が連なる… -->
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/global.css">
<link rel="stylesheet" href="css/form.css">
<link rel="stylesheet" href="css/print.css">
<script src="js/const.js"></script>
<script src="js/global.js"></script>
<script src="js/initialize.js"></script>

これを避けるため、head 要素内で指定する CSS・JS ファイルは1つずつにしながら、それぞれのファイルを読み込ませたい。

<!-- こうしたい -->
<link rel="stylesheet" href="css/styles.css">
<script src="js/scripts.js"></script>

CSS … @import で解決

CSS は @import 文で他の CSS ファイルを読み込ませることができる。

/* styles.css */
@import url("./reset.css")
@import url("./global.css")
@import url("./form.css")
@import url("./print.css")

JavaScript … 即時関数で script 要素を生成する

JavaScript 自体には Include や Import といった処理がない。だからこその Browserify での結合だったりもするワケだが、以下のようなスクリプトでそれっぽいことができる。

/* scripts.js */
(function() {
  document.open();
  for(var i = 0, l = arguments.length; i < l; i++) {
    document.write("<script src=\"" + arguments[i] + "\"></script>");
  }
  document.close();
})(
  "/path/to/const.js",
  "/path/to/global.js",
  "/path/to/initialize.js"
);

• 参考 : ヘッダのJavaScript読み込みをincludeっぽくスッキリさせる方法☆ - HDRiな生活

モロに上のサイトのコピペ。注意点は、スクリプトファイルのパスをフルパスで記述することと、この方法では読み込みの順序が保証されないので、jQuery みたいなライブラリを先に読み込ませる、といったことがうまくできない点。

読み込み順が関係しないファイルたちであればひとまずこれで回避可能か。