Javascript 如何使sails链接器在子/子页面中加载不同的资产？

请参阅附件

这就是模板结构。login.jade扩展layout.jade

我的问题是我想要：

在所有页面中加载的global.css文件（完成）

仅在查看login.jade时加载login.css文件（问题）

我已经创建了一个工作管道配置。任务如下所示：

devStyles: {
    options: {
        startTag: '<!--STYLES-->',
        endTag: '<!--STYLES END-->',
        fileTmpl: '<link rel="stylesheet" href="%s">',
        appRoot: '.tmp/public'
    },
    files: {
        '.tmp/public/**/*.html': require('../pipeline').frontendGlobalCssFiles,
        'views/**/*.html': require('../pipeline').frontendGlobalCssFiles,
        'views/**/*.jade': require('../pipeline').frontendGlobalCssFiles,
        'views/auth/login.jade': require('../pipeline').frontendLoginCssFiles
    }
}

module.exports = function (grunt) {
   grunt.registerTask('linkAssets', [
       'sails-linker:devJs',
       'sails-linker:devStyles',
       'sails-linker:devTpl',
       'sails-linker:devJsJade',
       'sails-linker:devPageJsJade', //added
       'sails-linker:devStylesJade',
       'sails-linker:devPageStylesJade', //added
       'sails-linker:devTplJade'
   ]);
};

devstyle:{
选项：{
开始标记：“”，
endTag:“”，
fileTmpl:“”，
批准：'.tmp/public'
},
档案：{
“.tmp/public/***.html”：需要（“../pipeline”）.FrontEndGlobalCSS文件，
“views/***.html”：需要（“../pipeline”）.frontendGlobalCssFiles，
“views/***.jade”：需要（“../pipeline”）.frontendGlobalCssFiles，
“views/auth/login.jade”：需要（“../pipeline”）.frontendLoginCssFiles
}
}

---

问题是最后一个文件规则不起作用。我确信frontendLoginCssFiles是可以的，因为如果我用

'views/***/.jade'

路径加载它，它就会工作。那么这里的问题是什么呢？

好的，解决了。基本上，这个问题与玉的传承没有严格的关系。sails linker真正做的是将资产添加到物理文件中，而不管它们是父文件、子文件还是部分文件。它所做的只是获取传递的文件，搜索正确的开始/结束标记，并在编译真正的服务页面之前添加相关的html

我的问题是，我没有将开始/结束标记添加到登录（子）页面

无论如何，即使这样做，我们也会遇到一个问题，即所有编译的页面都将加载所有资产。例如，登录资产也将加载到主页上。不太好

简单地说，为了解决这个问题，我对页面特定的资产使用了特定的开始/结束标记。 下面是一个“长”故事：

注意：因为我们谈论的是jade模板，所以在sails linker中，我们正在研究*jade任务，因此注释是用jade语法编写的（例如

//style

而不是

）

首先，我们将隔离“全球资产”>我们希望在每个页面上加载的资产：

将所有

//样式

实例更改为类似于

//全局样式

的内容。这两个都在帆链接器和最终。玉的看法

/tasks/pipeline.js：将默认文件列表重命名为类似于

globalCssFiles

、jsfiles等，并更改该名称的所有实例

/tasks/config/sails-linker.js：重命名第2点修改的所有实例

其次，我们将添加“页面资产”：

在子jade页面上，使用类似于

//页面样式

注释的内容

/tasks/pipeline.js：创建特定于页面的文件列表，例如：

var frontendLoginCss=['styles/login.css']

及以下:

module.exports.frontendLoginCss = frontendLoginCss.map(function(path) {
  return '.tmp/public/' + path;
});

/tasks/config/sails-linker.js：创建特定于页面的任务，如：

devPageStylesJade: {
   options: {
       startTag: '// PAGE STYLES',
       endTag: '// PAGE STYLES END',
       fileTmpl: 'link(rel="stylesheet", href="%s")',
       appRoot: '.tmp/public'
   },
   files: {
       'views/auth/login.jade': require('../pipeline').frontendLoginCss
   }
}

/tasks/register/*：将相关任务添加到您应该添加到的所有文件中。例如，my linkAssets.js可能是这样的：

devStyles: {
    options: {
        startTag: '<!--STYLES-->',
        endTag: '<!--STYLES END-->',
        fileTmpl: '<link rel="stylesheet" href="%s">',
        appRoot: '.tmp/public'
    },
    files: {
        '.tmp/public/**/*.html': require('../pipeline').frontendGlobalCssFiles,
        'views/**/*.html': require('../pipeline').frontendGlobalCssFiles,
        'views/**/*.jade': require('../pipeline').frontendGlobalCssFiles,
        'views/auth/login.jade': require('../pipeline').frontendLoginCssFiles
    }
}

module.exports = function (grunt) {
   grunt.registerTask('linkAssets', [
       'sails-linker:devJs',
       'sails-linker:devStyles',
       'sails-linker:devTpl',
       'sails-linker:devJsJade',
       'sails-linker:devPageJsJade', //added
       'sails-linker:devStylesJade',
       'sails-linker:devPageStylesJade', //added
       'sails-linker:devTplJade'
   ]);
};

在jade模板中，使用块语法导入样式/js，因此可以使用append将资源附加到块中。例如，一般“父”布局。jade将具有：

 block styles
    // GLOBAL STYLES
    // GLOBAL STYLES END

     append styles
        // PAGE STYLES
        // PAGE STYLES END

而子模板login.jade将具有：

 block styles
    // GLOBAL STYLES
    // GLOBAL STYLES END

     append styles
        // PAGE STYLES
        // PAGE STYLES END

最后一个提示：在子模板中的什么地方编写append指令并不重要，它们总是附加在父模板定义它们的地方。因此，我将在子模板的底部编写所有附件（更干净）

希望对有同样问题的人有用