Question

所以我正在研究这个具有Rails类文件夹结构的项目，虽然它由Node.js工具处理（Grunt作为任务运行器）。我正在使用Bower来管理我的供应商资产。

我的文件夹结构如下所示：

  .
  └── src
      ├── app
      │   └── assets
      │       ├── javascripts
      │       └── stylesheets
      │           └── application.scss
      ├── public
      └── vendor
          └── bower

基本上所有的开发源代码都在app/assets文件夹中，public是生产文件的去处，而vendor是第三方的东西。

正如您所看到的，我有这个application.scss文件。这是我正在使用的样式表清单。它负责将稍后应编译的所有模块导入我的最终样式表文件。

问题在于我没有看到从我的清单文件中引用通过Bower安装的库的有效方法。

使用Rails Asset Pipeline / Sprockets，我会做//= require_tree vendor/bower，这样可行，但我不知道在这个项目的上下文中这相当于什么。

你们有什么建议我能做什么？

Ps：使用Grunt任务“处理”这是不可能的。

Answer 1

Bower下载整个git存储库。

示例：

bower install jquery

这将创建以下结构

tree vendor/bower 
bower
└── jquery
    ├── bower.json
    ├── component.json
    ├── composer.json
    ├── jquery.js
    ├── jquery-migrate.js
    ├── jquery-migrate.min.js
    ├── jquery.min.js
    ├── jquery.min.map
    ├── package.json
    └── README.md

1 directory, 10 files

在我看来加载所有这些文件没有多大意义。

你能做的是：

创建一个vendor/require目录

将所有必需文件符号链接到此目录：

cd vendor/require; ln -s ../bower/jquery/jquery.min.js

然后需要所有带有ruby帮助的文件或手动

Dir['path/to/vendor/require/*.js'].each do |file_name|
  puts "<script type="text/javascript" src="#{file_name}"></script>"
end

你也可以使用Grunt和concat任务：

grunt.initConfig({
  concat: {
    options: {
      separator: ';',
    },
    dist: {
      src: ['path/to/vendor/bower/jquery/jquery.min.js', 'path/to/vendor/bower/other-package/init.min.js'],
      // or if You decide to create those symlinks
      // src: ['path/to/vendor/require/*'],
      dest: 'path/to/public/js/built.js',
    },
  },
});

compass sass您可以使用：

@import 'path/to/directory/*';

Answer 2

通过在根目录中创建名为vendor/assets/components的文件，只需将Bower配置为在.bowerrc上安装软件包。

{"directory": "vendor/assets/components"}

vendor/assets和app/assets内的所有内容都会添加到加载路径中，因此您只需引用这些文件。

您可能需要输入要加载的实际文件。假设你安装了normalize-scss包。您可能需要将其添加到application.scss文件中：

@import "normalize-scss/normalize";

这只是猜测，但我敢打赌。

编辑：这将适用于Rails应用程序，显然不是你的情况。因此，如果您使用Grunt编译SCSS，则可以使用loadPath选项将Bower目录添加到加载路径。

Gruntfile的Sass任务可能看起来像这样：

{
  sass: {
    dist: {
      files: {"src/assets/stylesheets/application.scss": "public/application.css"},
      options: {
        loadPath: ["vendor/bower"]
      }
    }
  }
}

要导入文件，您将执行上述（参考整个文件）之类的操作。没有测试Grunt配置，但它可能会工作。

Bower和Sass在类似Rails的文件夹结构中

2 个答案: