我正在创建我的第一个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没有效率,所以如果有人能指出我需要修改哪些配置文件以及如何...我真的很感激...谢谢!
1> JFar..:
我希望在我的项目中有类似的东西,除了我还想利用Sail的酷内置功能来自动最小化/ uglify Javascript文件"sails lift --prod"在各种布局中使用不同的Javascript文件集.此答案仅处理JS文件,但您可以进行类似的更改以支持与CSS文件相同的概念.
在我的项目中,我有两种不同的布局 - layout.ejs和layoutadmin.ejs.我创建了一个新的/ assets/jsadmin文件夹,其中包含我的管理员Javascript文件.我保留了sails现有的/ assets/js文件夹,用于保存公共网页的Javascript文件.
我的目标是在这些标签之间插入/ assets/js文件夹内容(默认情况下这样做,并且这些标签在layout.ejs文件中使用):
虽然要在这些标记之间插入/ assets/jsadmin文件夹内容(我编写了这些"自定义"标记名称,并且它们在layoutadmin.ejs文件中使用.我将在此其余部分添加对此新标记的添加支持回答):
我在这里创建了一个完整的代码示例演示.
对于开发......
(风帆升降机),我进行了修改,所以风帆会在提升时使用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: '',
endTag: '',
fileTmpl: '',
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文件夹中提取的文件):
浏览到http:// localhost:1337/admin - 您将看到它正在使用layoutadmin.ejs模板,查看源将在源代码底部显示以下内容(从jsAdmin文件夹中提取的文件):
对于生产...
(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: '',
endTag: '',
fileTmpl: '',
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):
浏览到http:// localhost:1337/admin - 您将看到它正在使用layoutadmin.ejs模板,查看源代码将在源代码底部显示以下内容(使用productionAdmin.min.js):