Node.js 类似Rails的文件夹结构中的Bower和Sass

因此，我正在开发一个类似Rails的文件夹结构的项目，尽管它是由Node.js工具Grunt作为任务运行程序处理的。我正在使用Bower管理我的供应商资产

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

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

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

基本上所有的开发源代码都保存在app/assets文件夹中，public是生产文件的存放位置，vendor是第三方的存放位置

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

问题是，我看不到从清单文件中引用通过Bower安装的库的合理方法

对于Rails资产管道/链轮，我会做//=需要_tree vendor/bower，这会起作用，但我不知道在这个项目的上下文中做这件事的等效性是什么

你们对我能做什么有什么建议吗

---

注：使用Grunt任务来处理这个问题是不可能的。

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

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

你能做的是：

创建供应商/需求目录 将所有必需的文件符号链接到此目录：

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

对于sass上的指南针，您可以使用：

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

---

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

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

供应商/资产和应用程序/资产中的所有内容都添加到加载路径，因此您可以仅引用这些文件

您可能需要放置要加载的实际文件。假设您安装了该软件包。您可能需要将以下内容添加到application.scss文件：

这只是猜测，但我敢打赌

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

GrunFile的Sass任务可能如下所示：

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

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

要导入该文件，您将执行上面提到的操作，引用整个文件。没有测试Grunt配置，但它可能会工作