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: '',
        endTag: '',
        fileTmpl: '',
        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来安装相关的静态资源。