Node.js sails.js对不同的js库使用不同的布局

我正在创建我的第一个nodejs/sails.js项目，我想在3种不同的场合使用3种不同的布局：

frontend_layout.ejs
admin_layout.ejs
mobile_layout.ejs

• 在frontend_layout.ejs中，我想加载bootstrap.css、jquery.js和 bootstrap.js
• 在admin_layout.ejs中，我想加载bootstrap.css、angular.js和 ui引导tpls.js（AngularUIJSLibrary）
• 在mobile_layout.ejs中，我想加载ionic.css和ionic.bundle.js

---

我在saisproject/views/中创建了3个文件夹，分别是admin_页面、mobile_页面和frontend_页面，3个layout.ejs文件分别位于每个文件夹中，但无论我加载哪个布局，它总是包含assets/js和assets/style中的所有css/js文件。我知道我需要对pipeline.js做些什么，但具体怎么做？我不擅长grunt，所以如果有人能告诉我哪些配置文件需要修改，以及如何修改，我将不胜感激。。。谢谢

默认情况下，Sails会自动将所有css文件（资源/样式）插入到样式和样式结束之间的标记中，并将js文件（资源/js）插入到脚本和脚本结束之间的标记中

<!--STYLES-->
<!--STYLES END-->

.
.
.

<!--SCRIPTS-->
<!--SCRIPTS END-->

你可以随意改变它。您可以简单地对其进行评论或删除。（如果您想将一些css文件放在每个布局中，请记住，您可以将它们放在这里。）

js文件也是如此。默认情况下，它设置为从assets/js获取所有js文件。您可以在jsFilesToInject部分找到它。根据需要删除或添加js文件。您可以找到有关哪些有助于理解过滤模式的更多信息

所以，现在可以做的最简单的事情就是将特定于布局的文件放在这些标记（样式和脚本）之外

例如，看看下面的代码示例

<!--STYLES-->
<!--STYLES END-->
<!--STYLES SPECIFIC TO THIS LAYOUT-->
<link rel="stylesheet" href="/styles/some_layout_specific.css">

---

我希望在我的项目中有一些非常相似的东西，除了我还想利用Sail的内置功能，自动最小化/丑化“sails lift--prod”的javascript文件，并使用不同的javascript文件集进行不同的布局。这个答案只处理JS文件，但是您可以进行类似的更改，以支持CSS文件的相同概念

在我的项目中，我有两种不同的布局——layout.ejs和layoutadmin.ejs。我创建了一个新的/assets/jsadmin文件夹，其中保存了我的管理javascript文件。我保留了sails现有的/assets/js文件夹，以便保存公共网页的javascript文件

我的目标是在这些标记之间插入/assets/js文件夹内容（默认情况下，sails会这样做，这些标记在layout.ejs文件中使用）：

注意：我还必须在pipeline.js文件的底部导出这个新变量

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

我修改了tasks/config/sails-linker.js，添加了一个新的devJsAdmin任务，在其中查找标记并调用上面pipeline.js文件中添加的新.jsAdminFilesToInject

    devJsAdmin: {
        options: {
            startTag: '<!--SCRIPTS_ADMIN-->',
            endTag: '<!--SCRIPTS_ADMIN END-->',
            fileTmpl: '<script src="%s"></script>',
            appRoot: '.tmp/public'
        },
        files: {
            '.tmp/public/**/*.html': require('../pipeline').jsAdminFilesToInject,
            'views/**/*.html': require('../pipeline').jsAdminFilesToInject,
            'views/**/*.ejs': require('../pipeline').jsAdminFilesToInject
        }
    },

要进行测试，请在演示模式下运行sails：

sails lift

浏览至-您将看到它正在使用layout.ejs模板，查看源代码将在底部显示以下内容（从js文件夹中提取的文件）：

我在grunt tasks/config/uglify.js文件中添加了一个新的distAdmin部分，它通过生成一个新的min/productionAdmin.min.js文件使concat/productionAdmin.js变得“丑陋”

    distAdmin: {
        src: ['.tmp/public/concat/productionAdmin.js'],
        dest: '.tmp/public/min/productionAdmin.min.js'
    }

我在tasks/config/sails-linker.js文件中添加了一个新的prodJSAdmin部分，它在SCRIPTS\u ADMIN标记之间添加了min/productionAdmin.min.js文件

    prodJsAdmin: {
        options: {
            startTag: '<!--SCRIPTS_ADMIN-->',
            endTag: '<!--SCRIPTS_ADMIN END-->',
            fileTmpl: '<script src="%s"></script>',
            appRoot: '.tmp/public'
        },
        files: {
            '.tmp/public/**/*.html': ['.tmp/public/min/productionAdmin.min.js'],
            'views/**/*.html': ['.tmp/public/min/productionAdmin.min.js'],
            'views/**/*.ejs': ['.tmp/public/min/productionAdmin.min.js']
        }
    },

在生产模式下航行：

sails lift --prod

浏览至-您将看到它正在使用布局模板，查看源代码将在底部显示以下内容（使用production.min.js）：

浏览至-您将看到它正在使用layoutadmin.ejs模板，查看源代码时，将在源代码底部显示以下内容（使用productionAdmin.min.js）：

---

回答得很好。帮助很大。

    'sails-linker:devJsAdmin',

sails lift

<!--SCRIPTS-->
<script src="/js/dependencies/sails.io.js"></script>
<script src="/js/jquery-1.10.2.js"></script>
<!--SCRIPTS END-->

<!--SCRIPTS_ADMIN-->
<script src="/jsAdmin/dependencies/jquery-1.10.2.js"></script>
<script src="/jsAdmin/knockout-3.3.0.debug.js"></script>
<!--SCRIPTS_ADMIN END-->

    jsAdmin: {
        src: require('../pipeline').jsAdminFilesToInject,
        dest: '.tmp/public/concat/productionAdmin.js'
    },

    distAdmin: {
        src: ['.tmp/public/concat/productionAdmin.js'],
        dest: '.tmp/public/min/productionAdmin.min.js'
    }

    prodJsAdmin: {
        options: {
            startTag: '<!--SCRIPTS_ADMIN-->',
            endTag: '<!--SCRIPTS_ADMIN END-->',
            fileTmpl: '<script src="%s"></script>',
            appRoot: '.tmp/public'
        },
        files: {
            '.tmp/public/**/*.html': ['.tmp/public/min/productionAdmin.min.js'],
            'views/**/*.html': ['.tmp/public/min/productionAdmin.min.js'],
            'views/**/*.ejs': ['.tmp/public/min/productionAdmin.min.js']
        }
    },

    'sails-linker:prodJsAdmin',

sails lift --prod

<!--SCRIPTS-->
<script src="/min/production.min.js"></script>
<!--SCRIPTS END-->

<!--SCRIPTS_ADMIN-->
<script src="/min/productionAdmin.min.js"></script>
<!--SCRIPTS_ADMIN END-->