Sails基礎之View層——Assets

assets目錄是Sails應用下放置前端靜態資源的目錄，比如js、css、image等。

assert資源的動態注入

Sails通過Grunt來完成Web應用程序的構建，Sails在啓動時默認使用了tasks/register/defaults.js任務完成構建：

module.exports = function (grunt) {
  grunt.registerTask('default', [
    'compileAssets',
    'linkAssets',
    'watch'
  ]);
};

我們發現主要包含了3個子任務：compileAssets、linkAssets和watch。
其中linkAssets的任務就是在應用啓動時將assert中的靜態資源自動注入到ejs或html中，linkAssets內部使用了sails-linker完成實際任務：

grunt.registerTask('linkAssets', [
    'sails-linker:devJs',
    'sails-linker:devStyles',
    'sails-linker:clientSideTemplates'
  ]);

任務定義了對js、style、template資源進行注入。
sails-linker.js：

    devStyles: {
      options: {
        startTag: '<!--STYLES-->',
        endTag: '<!--STYLES END-->',
        fileTmpl: '<link rel="stylesheet" href="%s">',
        appRoot: '.tmp/public'
      },

      files: {
        '.tmp/public/**/*.html': require('../pipeline').cssFilesToInject,
        'views/**/*.html': require('../pipeline').cssFilesToInject,
        'views/**/*.ejs': require('../pipeline').cssFilesToInject
      }
    },

我們可以看到sails-linker會尋找startTag和endTag，如果找到會將的內容根據實際的資源情況注入到ejs或html中，其中通過pipeline.js定義了各類資源的注入方法，如對於樣式資源css的邏輯如下：

var cssFilesToInject = [

  // Bring in `.css` files for themes and style guides (e.g. Bootstrap, Foundation)
  'dependencies/**/*.css',

  // All of the rest of your custom `.css` files will be injected here,
  // in no particular order.  To customize the ordering, add additional
  // items here, _above_ this one.
  'styles/**/*.css'
];
var tmpPath = '.tmp/public/';
module.exports.cssFilesToInject = cssFilesToInject.map((cssPath)=>{
  // If we're ignoring the file, make sure the ! is at the beginning of the path
  if (cssPath[0] === '!') {
    return require('path').join('!' + tmpPath, cssPath.substr(1));
  }
  return require('path').join(tmpPath, cssPath);
});

集成bower

安裝bower

npm install bower -g

配置bower

在sails項目根目錄下創建 .bowerrc 文件, 並在文件中設置 bower 庫目錄：

{
  "directory":"assets/bower",
}

於是，我們就可以開始使用bower來安裝相關的靜態資源。