42

我希望能够通过bower安装 Javascript 依赖项并在sails.js应用程序中使用它们，但我无法找到一种方法来执行此操作，而只需将文件夹中的粘贴文件复制bower_components到Sails资产文件夹.

理想情况下，我想我想使用requirejs并指向文件中的凉亭组件main.js。我可能想在圆孔中敲击方钉，如果是，请告诉我。components/libraries欢迎任何关于使用 Sails 进行管理的想法。

4

5 回答 5

42

在 Sails 0.10 中，“assets/linker”目录不再存在，但是我发现了一个简单的解决方案，它为 bower -> 资产链接器工作流程提供了一些自动化，同时还允许对最终链接的内容进行一些细粒度的控制。

解决方案是将grunt-bower添加到 Sails.js compileAssets任务中

grunt.registerTask('compileAssets', [
    'clean:dev',
    'bower:dev',
    'jst:dev',
    'less:dev',
    'copy:dev',
    'coffee:dev'
]);

然后像这样配置你的 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');

};

这将自动将您的 bower js 和 css 文件复制到适当的位置，以便 Sail 的资产链接器找到并自动添加到项目的布局模板中。任何其他 js 或 css 文件仍将自动添加到您的 bower 文件之后。

然而，这仍然不是灵丹妙药，因为这个设置有两个重要的警告：

1 - 通过 bower-grunt 添加的文件必须列在 bower.json 的主数组中。如果你看到一个文件没有被加载，你必须编辑那个包 bower.json 文件，或者通过 grunt-bower 的packageSpecific选项手动添加依赖项。

2 - 资产链接器中的 bower 文件的顺序目前是按字母顺序排列的。到目前为止，我调整这个顺序的唯一办法是修补一个额外的 grunt 任务，在 Sail 的compileAssets任务的其余部分之前手动重新排序文件。但是，我相信 grunt-bower 可以通过支持 package copy ordering来做一些事情。

于 2014-03-17T14:10:44.547 回答
33

注意：以下答案不再与当前版本的 SailsJS 完全相关，因为从 SailsJS 0.10 开始不支持链接器文件夹。

请参阅：Sails 未生成链接器

原答案：

我能够为此找到一个解决方案，这实际上非常简单。我没有意识到您可以配置 bower 放置文件的位置。

创建一个 .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 文件夹。如果您不希望sails 不断删除然后重新复制这些文件，您可以将它们排除在grunt 文件中。

/* 
 * 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; });
 }

另一种方法是将assets/js中名为“socket.io.js”、“sails.io.js”和app.js的sails文件重新编码为amd模块。

于 2013-08-09T22:08:51.900 回答
11

我发现实现此目的的最简单方法是将各个 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'
];

一个指向 then 的链接bower_components/modernizr/modernizr.js会被插入到<!--SCRIPTS-->布局模板的占位符中，并且当您运行sails lift --prod.

于 2015-05-22T15:35:25.787 回答
3

对不起我迟到了。

我认为在链接器中包含 bower_components 是个坏主意，因为当您扬起帆时，其中的所有内容都将被复制到 .tmp 中并包含在标签中。例如，如果您在 bower 中包含 Angular，您的脚本中将包含两个内容：一个用于 angular.js，一个用于 angular.min.js。两者兼有是错误的。

这是我的项目解决方案：

  • 我在根目录中创建了一个文件夹 bower_component。

  • 我已经在我的 Gruntfile.js 中的 copy:dev 的数组文件中添加了这一行

    { '.tmp/public/linker/js/angular.js': './bower_components/angular/angular.js' }

对于我想要包含的每个文件，我需要在这个数组中手动​​添加一个新行。我还没有找到另一个自动解决方案。如果有人找到更好的解决方案... ;)

于 2014-02-21T14:38:34.300 回答
1

连接 SailsJS 和 Bower 的方法不止一种。

通过自定义生成器集成 Bower 的 SailsJS 包位于此处： https ://www.npmjs.com/package/sails-generate-bower

Gulp 也有一个。

于 2015-05-20T07:12:37.990 回答