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

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 库)。
• 在 mobile_layout.ejs 中，我想加载 ionic.css 和 ionic.bundle.js

我在 sailsProject/views/中创建了 3 个文件夹，分别是 admin_pages、mobile_pages 和 frontend_pages，这 3 个 layout.ejs 文件分别驻留在这些文件夹中，但无论我加载哪个布局，它总是包含所有 css/assets/js 和 assets/styles 中的 js 文件。我知道我需要对 pipeline.js 做些什么，但具体怎么做呢？我在 grunt 方面效率不高，所以如果有人能指出我需要修改哪些配置文件以及如何修改，我将不胜感激……谢谢!

Answer 1

我希望在我的项目中有一些非常相似的东西，除了我还想利用 Sail 很酷的内置功能自动最小化/丑化 javascript 文件以在各种布局中使用不同的 javascript 文件集.此答案仅涉及 JS 文件，但您可以进行类似的更改以支持 CSS 文件的相同概念。

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

我的目标是将/assets/js 文件夹内容插入到这些标签之间(sails 默认执行此操作，这些标签用于 layout.ejs 文件):

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

虽然/assets/jsadmin 文件夹内容被插入到这些标签之间(我编造了这些“自定义”标签名称，它们用于 layoutadmin.ejs 文件中。我将在这个答案的其余部分):

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

我创建了这个 here 的完整代码示例演示.

为了发展...(风 sails 升降机)，我进行了修改，以便风 sails 在升降时使用 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;
});

我修改了 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
        }
    },

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

    'sails-linker:devJsAdmin',

要测试，请在演示模式下运行 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-->

用于生产...(sails lift --prod)，我想做与开发相同的事情，除了我首先想连接和丑化我的新 SCRIPTS_ADMIN 标签中的生产 javascript。

我在 grunt tasks/config/concat.js 文件中添加了一个新的 jsAdmin 部分，该部分从之前添加的 jsAdminFilesToInject 中拉入 pipeline.js 中的文件以生成 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:

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