:)
好的!
我如何设法偶然发现了一个体面的解决方案,它可以满足我的需求 - 自动注入我使用前端依赖管理器安装的所有前端依赖,以便在我运行时:
sails lift
我的 layout.ejs 或 index.html(无论你想用什么)自动包含:
<script src="../bower_components/jquery/dist/jquery.js"></script>
<script src="../bower_components/underscore/underscore.js"></script>
<script src="../bower_components/backbone/backbone.js"></script>
在正确的位置。
希望这可以帮助与我在同一条船上的其他人。
所以我使用以下指南让它工作:
重要提示
首先,请确保您的 .sailsrc 文件如下所示:
{
"generators": {
"modules": {}
},
"hooks": {
}
}
不是这样的:
{
"generators": {
"modules": {}
},
"hooks": {
"grunt": false // this line needs to be deleted
}
}
那条线阻止 Grunt 做它的事情。
首先安装的东西
所以我们需要先安装一些重要的工具:
- 鲍尔 (http://bower.io/)
- Grunt-Wiredep (https://github.com/stephenplusplus/grunt-wiredep)
凉亭
Bower 是前端依赖管理器,它将获取和安装我们的前端库,例如 jQuery 和 Backbone。
首先安装这个:
[sudo] npm install -g bower
您可能需要也可能不需要在npm install 前面使用sudo 命令,具体取决于您的计算机设置。
现在要做的重要的事情是:
bower init
这将引导您完成 bower.json 文件的命令行设置并生成它。对于某些问题,我只需按几次 Enter,然后为某些答案选择“y”,例如自动添加通常忽略的文件。
我们需要做的最后一个重要的凉亭步骤。创建一个名为.bowerrc 的新文件并添加以下代码:
{
"directory": "assets/bower_components"
}
这告诉 bower 在您运行命令 bower install 时将“bower_components”文件夹安装在哪里。
SailsJS 的作用是实际的 javascript、css 和图像从 .tmp/public 文件夹提供,所以如果我们在 assets 文件夹之外有 bower_components 文件夹,我们的 bower_components 将不会被复制到 @987654341 @ 文件夹。如果我们省略这一步,我们稍后会收到 404 Not Found 错误。
Grunt-Wiredep
Grunt-Wiredep 是帮助我们将已安装的 Bower 组件(jQuery 和 Backbone 等前端库)注入到 HTML 模板布局文件中的工具
我们在设置 Bower 管理器后安装它。使用以下命令安装 Grunt-Wiredep:
[sudo] npm install --save-dev grunt-wiredep
安装我们的前端 Javascript 库
好的,现在有了 Bower,我们可以使用以下命令安装我们的 javascript 前端库:
bower install jquery --save
和
bower install backbone --save
这会将 jQuery 和 Backbone 库安装到 bower_components 文件夹中。
我们的bower.json 文件应该显示:
{
...
"license": "MIT",
"ignore": [
"**/.*",
"node_modules",
"bower_components",
"test",
"tests"
],
"dependencies": {
"jquery": "~2.1.4",
"backbone": "~1.2.1"
}
}
注意依赖部分如何分别为 jquery 和主干添加了两个新条目。
Bower 注入点
Rightio,所以我们所有的重要工具都安装好了。我们现在需要告诉 Wiredep 在哪里注入我们的 jQuery 和 Backbone 标记。
就我而言,我有一个名为 layout.ejs 的文件,我告诉 bower 使用以下方法注入 javascript 库:
...
<!-- bower:js -->
<!-- endbower -->
<!--SCRIPTS-->
<!--SCRIPTS END-->
</body>
</html>
请注意重要的注入占位符的顺序。在这里,我指定在 Sails 默认的“jsToInject”文件之前注入我们的“bower”库,如 jQuery 和 Backbone。
当我编写我的 Javascript 文件时,我将它们放在 assets/js 文件夹中。我喜欢将这些 javascript 文件视为我的“前端逻辑 javascript”,而不是 jQuery 和 Backbone 等 javascript 库。
因此,如果我将 Bower 脚本占位符放在 Sails 的默认 SCRIPTS 占位符之后,如果在包含 jQuery 库之前尝试使用 jQuery,我会收到错误:
添加 WireDep Grunt 任务
我不知道如何解释 Grunt 是什么,据我了解,它是 SailsJS 用来自动执行任务的工具,例如将 javascript 文件、图像、css 复制到适当的文件夹。
我们希望 SailsJS 完成的 Grunt 任务之一是自动将 bower_components 文件夹中已安装的 Bower 组件注入到我们的 HTML 文件中,而不是我们手动输入。
所以,首先要在tasks/config 文件夹中创建一个名为wiredep.js 的新文件。我的wiredep.js 看起来像这样:
module.exports = function(grunt) {
grunt.config.set('wiredep', {
task: {
// Point to the files that should be updated when
// you run 'grunt wiredep'
src: [
'views/**/*.ejs', // .html support...
],
// we need this line so injection is correct path
ignorePath: '../assets',
options: {
// See wiredep's configuration documentation for the options
// you may pass:
// https://github.com/taptapship/wiredep#configuration
}
}
});
grunt.loadNpmTasks('grunt-wiredep');
};
上述 grunt 任务文件中重要的一行是:
ignorePath: '../assets',
Wiredep 搜索“bower_components”文件夹的位置并将其用作注入我们的 javascript 库的前缀。
回想一下,之前我们告诉 bower 将 bower_components 文件夹安装在 assets 文件夹中,以便 Sails pipeline.js 将 assets 文件夹中的内容复制到 .tmp/public 文件夹,但这与 Wiredep 的默认注入路径前缀冲突。
即默认的Wiredep注入将变为:
// Sails does not serve files from the assets folder!
<script src="../assets/bower_components/backbone/backbone.js"></script>
我们需要它变成:
// bower_components is in the .tmp/public folder where Sails serves content
<script src="/bower_components/backbone/backbone.js"></script>
Grunt-Wiredep 注入
此时,我们可以测试一下wiredep是否在注入。
在我的 Mac 终端中,当我运行时(在我的sailsjs 项目的根目录下):
grunt wiredep
我可以在我的layout.ejs(我的 Sailsjs 模板文件)中看到,我有
<!-- bower:js -->
<script src="/bower_components/jquery/dist/jquery.js"></script>
<script src="/bower_components/underscore/underscore.js"></script>
<script src="/bower_components/backbone/backbone.js"></script>
<!-- endbower -->
这是我们想要的。
如果你删除上面代码中注入的三行<script></script>标签,然后运行:
sails lift
您可能会注意到wiredep 没有注入javascript 库。我们绝对不想在每次运行sails lift 之前都输入grunt wiredep。
自动化 Grunt Wiredep 命令
最后一步是自动执行 grunt wiredep 命令,以便在我们运行 sails lift 时,wiredep 会自动注入 javascript 库。
我们通过在文件中注册任务来做到这一点:
tasks/register/default.js
我的default.js 看起来像这样:
module.exports = function (grunt) {
grunt.registerTask('default', ['wiredep', 'compileAssets', 'linkAssets', 'watch']);
};
现在在将wiredep 添加到默认任务后,当我们运行时:
sails lift
我们可以检查我们的 layout.ejs 文件并再次看到我们的 javascript 库自动注入到我们的 HTML 中。