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

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

Answer 1

我希望在我的项目中有类似的东西,除了我还想利用Sail的酷内置功能来自动最小化/ uglify javascript文件"sails lift --prod"在各种布局中使用不同的javascript文件集.此答案仅处理JS文件,但您可以进行类似的更改以支持与CSS文件相同的概念.

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

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

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

虽然要在这些标记之间插入/ assets/jsadmin文件夹内容(我编写了这些"自定义"标记名称,并且它们在layoutadmin.ejs文件中使用.我将在此其余部分添加对此新标记的添加支持回答):

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

我在这里创建了一个完整的代码示例演示.

对于开发...... (风帆升降机),我进行了修改,所以风帆会在提升时使用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:

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部分,它通过生成一个新的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-->