我认为每个人都有自己的方式来处理他们的资产依赖,但我在Bower 爱上了这样做。以下是我设置 Bower 为我的 SailsJS 应用程序处理资产的方法:
首先安装凉亭:
npm install --save bower
然后创建一个名为 .bowerrc 的文件,它会告诉 bower 将您的资产放在哪里:
{
"directory": "assets/components"
}
然后运行 bower init 来初始化您的 Bower 配置:
bower init
[?] name: myapp
[?] version: 0.1.0
[?] description: my app description
[?] main file:
[?] keywords:
[?] authors: me
[?] license: MIT
[?] homepage:
[?] set currently installed components as dependencies? No
[?] add commonly ignored files to ignore list? Yes
[?] would you like to mark this package as private which prevents it from being accidentally published to the registry? Yes
// ... cut out the resulting JSON ...
[?] Looks good? Yes
结果是一个名为 bower.json 的新文件,其中包含 JSON 配置。接下来您要安装 history.js,这非常简单:
bower install -S history.js
当您执行此操作时,它会下载 history.js 并将其放入您的组件文件夹中。由于 History.JS 不需要特定的帮助程序库,而且听起来您想使用 jQuery,因此您可以安装 jQuery:
bower install -S jquery
接下来,您将希望链接器使用这些。所以打开 Gruntfile.js。找到 jsFilesToInject 部分。向其中添加新组件:
var jsFilesToInject = [
'js/socket.io.js',
'js/sails.io.js',
'js/app.js',
// Now the Bower components.
'components/jquery/jquery.js',
// I determined this by looking at assets/components/history.js/README.md
'components/history.js/scripts/bundled/html4+html5/jquery.history.js'
];
然后打开 views/layout.ejs 并添加必要的脚本和 CSS 块以使链接器工作:
<head>
<!--STYLES-->
<!--STYLES END-->
<!--SCRIPTS-->
<!--SCRIPTS END-->
</head>
这些注释标签是链接器知道在哪里注入脚本的指针。请注意,Sails Assets Documentation 包含有关配置链接器的更多信息,例如为自动链接您自己的 JS/CSS/JST 而创建的其他文件夹。
启动或重新启动您的 Sails 应用程序,链接器应将文件复制到适当的文件夹并自动将它们注入您的布局中。
我还要添加一件事。在您的 Node/Sails 应用程序的 package.json 中,我还要添加:
{
"scripts": {
"postinstall": "./node_modules/bower/bin/bower install"
}
}
每当运行“npm install”时,这将触发 npm 运行 bower install。因此,如果您将应用部署到 Heroku 等服务,它也会自动为您检索资产。
我没有提到 Ajaxify,因为无论出于何种原因,它都不是通过 Bower 打包的。你必须得到它并将它放在你的 assets/js/whatever 文件夹中,然后将它添加到链接器中。
您还需要查看它的README.md,因为它说明了它还有哪些其他依赖项以及包含它们的顺序。Gruntfile.js 中 JS 和 CSS 文件的顺序就是它们的顺序注入应用程序。我会查看 ajaxify 文档并通过 Bower 添加其依赖项。
希望这会有所帮助。