sails.js使用不同的布局与不同的js库
我正在创build我的第一个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-bootstrap-tpls.js（angular-ui js库）。
- 在mobile_layout.ejs中，我想加载ionic.css和ionic.bundle.js
我已经在sailsProject / views /中创build了3个文件夹，分别是admin_pages，mobile_pages和frontend_pages，这3个layout.ejs文件分别位于这些文件夹的每个文件夹中，不pipe我加载哪个布局，它总是包含所有的css / js文件资产/ js和资产/样式。 我知道我需要做一些pipeline.js，但究竟是如何？ 我不是很高效，所以我真的很感激，如果有人可以指出我需要修改哪些configuration文件，以及如何…谢谢！
我想要的东西在我的项目非常相似，除了我也想利用赛欧的内置的很酷的function，以自动最小化/ uglify JavaScript文件的“sails lift –prod”在不同的布局与不同的JavaScript文件集。 这个答案只处理JS文件，但你可以做出类似的改变，以支持与你的CSS文件相同的概念。
在我的项目中，我有两个不同的布局 – layout.ejs和layoutadmin.ejs。 我创build了一个新的/ assets / jsadmin文件夹，其中包含我的pipe理JavaScript文件。 我现在离开帆/存在/资产/ js文件夹保存的公共网页的JavaScript文件。
我的目标是在这些标签之间插入/ assets / js文件夹内容（sails默认执行此操作，并在layout.ejs文件中使用这些标签）：
<!--SCRIPTS--> <!--SCRIPTS END-->
虽然/ assets / jsadmin文件夹的内容被插入到这些标签之间（我制作了这些“自定义”的标签名称，并在layoutadmin.ejs文件中使用，我将在这个标签的其余部分添加对这个新标签的支持回答）：
<!--SCRIPTS_ADMIN--> <!--SCRIPTS_ADMIN END-->
我在这里创build了一个完整的代码示例演示。
对于开发… （帆升降机），我修改，所以帆将填充我的自定义标签与资产/ jsadmin js文件在提升。
我通过添加一个名为jsAdminFilesToInject的新variables来修改tasks / pipeline.js，它与现有的jsFilesToInject非常相似，只是它从jsAdmin文件夹中收集js文件。
var jsAdminFilesToInject = [ // Load sails.io before everything else //'jsAdmin/dependencies/sails.io.js', // Dependencies like jQuery, or Angular are brought in here 'jsAdmin/dependencies/**/*.js', // All of the rest of your client-side js files // will be injected here in no particular order. 'jsAdmin/**/*.js' ];
注意：我还必须在pipeline.js文件的底部导出这个新的variables。
module.exports.jsAdminFilesToInject = jsAdminFilesToInject.map(function(path) { return '.tmp/public/' + path; });
我通过添加一个新的devJsAdmin任务来修改tasks / config / sails-linker.js，在这个任务中查找标签并调用上面的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 } },
我向任务/ register / linkAssets.js文件添加了一个新的任务步骤，该文件调用上面添加的devJsAdmin。
'sails-linker:devJsAdmin',
要进行testing，请在演示模式下运行sails：
sails lift
浏览到http：// localhost：1337 / home – 您会看到它使用的是layout.ejs模板，查看源代码将在底部显示以下内容（从js文件夹中提取文件）：
<!--SCRIPTS--> <script src="/js/dependencies/sails.io.js"></script> <script src="/js/jquery-1.10.2.js"></script> <!--SCRIPTS END-->
浏览到http：// localhost：1337 / admin – 你会看到它使用了layoutadmin.ejs模板，查看源代码将在源代码的底部显示以下内容（从jsAdmin文件夹中提取文件）：
<!--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-->
对于生产… （帆升降机 – 产品），我想要做的发展，除了我想连接和uglify生产的JavaScript，在我的新的SCRIPTS_ADMIN标签中相同。
我在grunt tasks / config / concat.js文件中添加了一个新的jsAdmin部分，该文件从pipeline.js中的先前添加的jsAdminFilesToInject中提取文件以生成concat / productionAdmin.js输出文件。
jsAdmin: { src: require('../pipeline').jsAdminFilesToInject, dest: '.tmp/public/concat/productionAdmin.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_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'] } },
最后，我通过在prod.js文件中添加一行来从prod grunt任务中调用这个新的prodJSAdmin。
'sails-linker:prodJsAdmin',
在生产模式下运行风帆：
sails lift --prod
浏览到http：// localhost：1337 / home – 你会看到它正在使用布局模板，查看源代码将在底部显示以下内容（使用production.min.js）：
<!--SCRIPTS--> <script src="/min/production.min.js"></script> <!--SCRIPTS END-->
浏览到http：// localhost：1337 / admin – 您将看到它使用了layoutadmin.ejs模板，查看源代码将在源代码底部显示以下内容（使用productionAdmin.min.js）：
<!--SCRIPTS_ADMIN--> <script src="/min/productionAdmin.min.js"></script> <!--SCRIPTS_ADMIN END-->
默认情况下，Sails会自动将所有的CSS文件（资产/样式）插入到STYLES和STYLES END和js文件（assets / js）之间的标签中，插入到SCRIPTS和SCRIPTS END之间的标签中。
<!--STYLES--> <!--STYLES END--> . . . <!--SCRIPTS--> <!--SCRIPTS END-->
这是在pipeline.js文件中设置的。 默认情况下，它已经设置为从资产/样式获取所有的CSS文件。 你可以在cssFilesToInject部分find它。
'styles/**/*.css'
你可以随意更改。 你可以简单地评论或删除它。 （请记住，如果你想把一些通用的CSS文件，你可以把它们放在这里。）
相同的js文件。 默认情况下，它已经设置为从assets / js获取所有js文件。 你可以在jsFilesToInject部分find它。 根据您的要求删除或添加js文件。 你可以在这里find更多关于grunt globbing patterns的信息，这有助于理解过滤模式。
所以你现在可以做的最简单的事情就是把你的布局特定的文件放在那些标签（STYLES和SCRIPTS）
例如看下面的代码示例，
<!--STYLES--> <!--STYLES END--> <!--STYLES SPECIFIC TO THIS LAYOUT--> <link rel="stylesheet" href="/styles/some_layout_specific.css">