SailsのAssetで読み込み順を制御

イシュー

  • 単純にAsset/jsに置くと、アルファベット順で呼ばれてしまい、jquery.js → bootstrap.js としたいのに、bootstrap.js → jquery.js となってしまう。

参考

Sails Linker Task

Automatically inject <script> tags for javascript files and <link> tags for css files. Also automatically links an output file containing precompiled templates using a <script> tag. A much more detailed description of this task can be found here, but the big takeaway is that script and stylesheet injection is only done in files containing <!--SCRIPTS--><!--SCRIPTS END--> and/or <!--STYLES--><!--STYLES END--> tags. These are included in the default views/layout.ejs file in a new Sails project. If you don't want to use the linker for your project, you can simply remove those tags.

JavaScriptファイルのための<script>タグとCSSファイルのための<link>タグは自動的に注入されます。 また、<script>タグを使用してプリコンパイルされたテンプレートを含む出力ファイルは自動的にリンクされます。このtaskのより詳細な説明は、ここでより多くのことを見つけることができますが、大事なことは、スクリプトやスタイルシートの注入は、<！ - script - ><！ - SCRIPTSのEND - >および<！ - STYLES - ><！ - STYLE END - >タグを含むファイルのみで行われているということです。これらは、新しいSailsプロジェクトのデフォルトのviews/ layout.ejsファイルに含まれています。あなたのプロジェクトでリンカを使用したくない場合は、単にこれらのタグを削除することができます。

参考

task/pipeline.js

  • sails linkerの内容は、pipeline.jsに記載する。
  • jQueryのように、依存性の強いファイルは、別フォルダ（'js/dependencies/*/.js'）に保存時ておき順番の影響を受けないようにしておく（フォルダ名は1, 2, 3とかでいいのかな？）
var cssFilesToInject = [
  'styles/**/*.css'
];


// Client-side javascript files to inject in order
// (uses Grunt-style wildcard/glob/splat expressions)
var jsFilesToInject = [
  
  // Load sails.io before everything else
  'js/dependencies/sails.io.js',

  // Dependencies like jQuery, or Angular are brought in here
  'js/dependencies/**/*.js',

  // All of the rest of your client-side js files
  // will be injected here in no particular order.
  'js/**/*.js'
];