Question

我正在创建我的第一个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 library）。
在mobile_layout.ejs中，我想加载ionic.css和ionic.bundle.js

我在sailsProject / views /中创建了3个文件夹，分别是admin_pages，mobile_pages和frontend_pages，3个layout.ejs文件分别驻留在每个文件夹中，但无论我加载哪个布局，它总是包含所有的css /资产/ js和资产/样式中的js文件。我知道我需要对pipeline.js做些什么，但究竟是怎么回事？我对grunt没有效率，所以如果有人能指出我需要修改哪些配置文件以及如何...我真的很感激！谢谢！

Answer 1

我想在我的项目中有一些非常相似的东西，除了我还想利用Sail的酷内置功能来自动最小化/ uglify javascript文件以便＆＃34; sails lift --prod＆＃34;在各种布局中使用不同的javascript文件集。这个答案仅涉及JS文件，但您可以进行类似的更改以支持与CSS文件相同的概念。

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

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

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

虽然要在这些标记之间插入/ assets / jsadmin文件夹内容（我编写了这些＆＃34;自定义＆＃34;标记名称，并且它们在layoutadmin.ejs文件中使用。我将添加添加支持这个答案的其余部分中的这个新标签：

<!--SCRIPTS_ADMIN-->
<!--SCRIPTS_ADMIN END-->

我创建了此here的完整代码示例演示。

开发...... （风帆升降机），我修改了这样的风帆会在提升时使用assets / jsadmin js文件填充我的自定义标签。

我通过添加一个名为jsAdminFilesToInject的新变量修改了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文件的底部导出这个新变量。

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
        }
    },

我在tasks / register / linkAssets.js文件中添加了一个新任务步骤，该文件调用上面添加的devJsAdmin。

    'sails-linker:devJsAdmin',

要测试，请在演示模式下运行风帆：

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-->

生产...... （sails lift --prod），我想做同样的开发，除了我首先想要连接和uglify我的新SCRIPTS_ADMIN标签中的生产javascript。

我在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部分，这使得concat / productionAdmin.js＆＃34;丑陋＆＃34;通过生成一个新的min / productionAdmin.min.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-->

Answer 2

默认情况下，Sails会自动将所有css文件（资产/样式）插入到STYLES和STYLES END之间的标签中，并将js文件（assets / js）插入到SCRIPTS和SCRIPTS END之间的标签中。

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

.
.
.

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

这是在pipeline.js文件中设置的。默认情况下，它已设置为从资产/样式获取所有css文件。您可以在cssFilesToInject部分找到它。

'styles/**/*.css'

您可以根据需要进行更改。你可以简单地评论或删除它。（请记住，如果你想在每个布局中放置一些常见的css文件，你可以将它们放在这里。）

js文件相同。默认情况下，它已设置为从assets / js获取所有js文件。您可以在jsFilesToInject部分找到它。根据您的要求删除或添加js文件。您可以找到有关grunt globbing patterns in here的更多信息，这有助于了解过滤模式。

你现在可以做的最简单的事情是将你的布局特定文件放在这些标签旁边（STYLES和SCRIPTS）

例如，请查看以下代码示例，

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

sails.js使用不同的布局和不同的js库

2 个答案: