The View layer of the basis of Sails - Assets

Dynamic injection of assert resources

Sails uses Grunt to complete the construction of Web applications. By default, sails uses tasks/register/defaults.js to complete the construction

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

We found that there are three sub tasks: compileAssets, linkAssets and watch.
Among them, the task of linkAssets is to automatically inject the static resources in the assert into ejs or html when the application is started. In linkAssets, sails linker is used to complete the actual task:

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

The task defines the injection of js, style and template resources.
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 } },

We can see that sails linker will look for startTag and endTag. If found, the content will be injected into ejs or html according to the actual resource situation. pipeline.js defines the injection methods of various resources. For example, the logic of style resource css is as follows:

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); });

Integrated bower

Install bower

npm install bower -g

Configure bower

Create the. bowerrc file in the root directory of the sales project, and set the bower Library Directory in the file:

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

So, we can start using bower to install the relevant static resources.