如何将凉亭组件与sails.js连接?
我想能够通过凉亭安装Javascript依赖关系,并在sails.js应用程序中使用它们,但我不能找出一种方法来做到这一点,只是从bower_components
文件夹复制粘贴文件到Sails资产夹。
理想情况下,我想我想使用requirejs
并指向main.js
文件中的bower组件 。 我可能会试图在一个圆洞里打一个方形钉,如果是的话请告诉我。 欢迎任何有关使用Sailspipe理components/libraries
想法。
在Sails 0.10中,“assets / linker”目录不再存在,但是我find了一个简单的解决scheme,为bower – >资产链接器工作stream程提供了一些自动化,同时也允许一些精确的控制什么最终得到链接。
解决scheme是添加grunt-bower到你的Sails.js compileAssets任务
grunt.registerTask('compileAssets', [ 'clean:dev', 'bower:dev', 'jst:dev', 'less:dev', 'copy:dev', 'coffee:dev' ]);
然后像这样configuration你的grunt-bower任务(如tasks / config / bower.js ):
module.exports = function(grunt) { grunt.config.set('bower', { dev: { dest: '.tmp/public', js_dest: '.tmp/public/js', css_dest: '.tmp/public/styles' } }); grunt.loadNpmTasks('grunt-bower'); };
这将自动将您的凉亭js和css文件复制到Sail资产链接器的适当位置,以查找并自动添加到您项目的布局模板。 任何其他js或css文件仍然会自动添加到您的bower文件之后。
然而,这仍然没有银弹,因为这个设置有两个重要的注意事项:
1 – 通过bower-grunt添加的文件必须在bower.json的主数组中列出。 如果你看到一个文件没有被加载,你可能会希望是,你必须编辑这个软件包bower.json文件,或者通过grunt-bower的packageSpecific选项手动添加这个依赖文件。
2 – 资产链接器中的浏览器文件的顺序目前是按字母顺序排列的。 我唯一的办法是调整这个顺序到目前为止,是一个额外的咕task任务,以手动重新sorting文件之前,其余的Sail的compileAssets任务。 然而,这个我相信有一些grunt-bower可以通过支持软件包拷贝顺序来做。
注意 :以下答案不再与当前版本的SailsJS完全相关,因为从SailsJS 0.10开始不支持链接器文件夹。
请参阅: 不生成链接器的风帆
原始答案:
我能够找出解决scheme,这实际上很简单。 我没有意识到你可以configuration文件的位置。
创build一个.bowerrc文件并更改安装了bower组件的目录,对于Sailjs,它们应该放置在assets文件夹中。
/* * Create a file called .bowerrc and put the following in it. * This file should be in the root directory of the sails app. */ { "directory": "assets/linker/bower_components" }
当文件发生变化时,Sails将使用grunt将它们复制到.tmp / public / assets文件夹中。 如果你不希望有帆继续删除,然后重新复制这些文件,你可以排除他们在咕噜文件。
/* * This is not necessary, but if you have a lot of components and don't want * them constantly being deleted and copied at every file change you can update * your Gruntfile.js with the below. */ clean: { dev: ['.tmp/public/**', '!.tmp/public', '!.tmp/public/bower_components/**'], build: ['www'] },
有关使用requirejs与风帆的一个技巧。 默认情况下,你会从socket.io文件中得到一个错误,因为sails会加载它而不使用requirejs。 这将抛出一个错误,因为socket.io支持amd样式加载,更多细节在这里http://requirejs.org/docs/errors.html#mismatch 。
解决这个问题的最简单的方法就是在socket.io.js末尾附近注释掉。
/* * Comment the below out in the file assets/js/socket.io.js, if using requirejs * and you don't want to modify the default sails setup or socket.io. */ if (typeof define === "function" && define.amd) { define([], function () { return io; }); }
另一种方法是将名为“socket.io.js”,“sails.io.js”和app.js的assets / js中的sails文件重新编码为amd模块。
我发现实现这个最简单的方法就是将各个Bower组件添加到您的tasks/pipeline.js
文件中。 例如,以下是您可以添加Modernizr的方法:
// Client-side javascript files to inject in order // (uses Grunt-style wildcard/glob/splat expressions) var jsFilesToInject = [ // Load sails.io before everything else 'js/dependencies/sails.io.js', // Dependencies like jQuery, or Angular are brought in here 'js/dependencies/**/*.js', // ========================================================= // Modernizr: 'bower_components/modernizr/modernizr.js', // ========================================================= // All of the rest of your client-side js files // will be injected here in no particular order. 'js/**/*.js' ];
然后,连接到bower_components/modernizr/modernizr.js
然后将其插入到布局模板中的<!--SCRIPTS-->
占位符中,并在运行sails lift --prod
时被缩小等。
对不起,我迟到了。
我认为在链接器中包含bower_components这是一个坏主意,因为当你提升帆时,它中的所有内容都将被复制到.tmp文件中并包含在标签中。 例如,如果你已经包含了Angular,那么脚本中会包含两个包含:angular.js和angular.min.js。 而这两者都是一个错误。
这是我的项目解决scheme:
- 我在我的根目录下创build了一个文件夹bower_component。
-
我在copy:dev中的arrays文件的Gruntfile.js中添加了这一行
{'.tmp / public / linker / js / angular.js':'./bower_components/angular/angular.js'}
而对于我想包括的每个文件,我需要在这个数组中手动添加一个新行。 我还没有find另一个自动解决scheme。 如果有人find更好的解决scheme…;)
有不止一种方法来连接SailsJS和鲍尔。
通过定制生成器集成Bower的SailsJS包存在于: https ://www.npmjs.com/package/sails-generate-bower
还有一个Gulp。