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来安装相关的静态资源。