将 Bower 与 Express 一起使用答案

【问题标题】：Using Bower with Express将 Bower 与 Express 一起使用
【发布时间】：2015-06-04 19:58:42
【问题描述】：

我来晚了。我想我会在我目前的 Express 项目中尝试一下。我安装了它，并按照说明创建了.bowercc 和bower.json 文件。我安装了一个我计划使用的 Bootstrap 皮肤，它带有 jQuery。问题是，你会得到大量文件，而我只想使用 JS、CSS 和字体的缩小版本。

上网后，我发现很多关于使用 gulp 或 grunt 筛选文件，并将它们通过管道传输到 Express 提供的 /public 文件夹。我的问题是：你如何正确地做到这一点？我怎样才能在那里得到我需要的文件？还是我最好先离开凉亭，然后下载 zip 文件，获取最终结果并放入 /public 文件夹？

【问题讨论】：

别担心其他文件，只需包含项目所需的文件：<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css">。在 grunt/gulp 中构建任务期间，您将缩小和连接脚本和 css。
我不希望我使用的 JS 库的整个源代码、示例和文档最终都出现在我的 git 存储库中。
当然，这就是为什么你不应该在存储库中commint bower_components。你会在 .gitignore 中有bower_components。
如果组件不在 repo 中，它们如何找到通往我的 prod/heroku 服务器的方式？
您将它们的连接/编译版本提交到存储库。

标签： express gulp bower

【解决方案1】：

看看 cmets，答案似乎是肯定的 - 需要手动工作才能将您的组件分发到您的 public 文件夹。使用 gulp 将使其自动化，但基本上一开始它会是偶然的，需要一些微调。如果有人遇到这个问题，这是我采用的解决方案：

1) 在 bower.json 文件中提供包覆盖，以确保仅公开缩小的文件：

{
  "name": "charlie",
  "dependencies": {
    "bootstrap-material-design": "~0.3.0"
  },
  "overrides": {
    "bootstrap-material-design": {
      "main": ["**/dist/js/*.min.js", "**/dist/css/*.min.css", "**/dist/fonts/*"]
    },
    "jquery": {
      "main": "**/dist/jquery.min.js"
    }
  }
}

2) 使用main-bower-files gulp 包来获取这些“主电源”并将它们分发到最终位置。这是我的 gulpfile.json（只是凉亭部分：

var bower = require('main-bower-files');
var gulpFilter = require('gulp-filter');
var uglify = require('gulp-uglify');
var minifyCSS = require('gulp-minify-css');
var clean = require('gulp-clean');
var debug = require('gulp-debug');


var getDist = function(vendor) {
  var publicDir = 'public';
  var dist = vendor ? publicDir + '/vendor' : publicDir;
  return {
    dir: dist,
    css: dist + '/css/',
    js: dist + '/js/',
    fonts: dist + '/fonts/'
  };
};

gulp.task('cleanVendor', function() {
  return gulp.src(getDist(true).dir, {read: false})
    .pipe(clean());
});

gulp.task('bower', ['cleanVendor'], function() {
  var dist = getDist(true);
  var jsFilter = gulpFilter('**/*.js');
  var cssFilter = gulpFilter('**/*.css');
  var fontsFilter = gulpFilter(['**/*.woff*', '**/*.eot', '**/*.svg', '**/*.ttf']);
  return gulp.src(bower())
    .pipe(fontsFilter)
    .pipe(gulp.dest(dist.fonts))
    .pipe(fontsFilter.restore())
    .pipe(jsFilter)
    .pipe(gulp.dest(dist.js))
    .pipe(jsFilter.restore())
    .pipe(cssFilter)
    .pipe(gulp.dest(dist.css))
    .pipe(cssFilter.restore());
});

3) 在您的 HTML 文件中，包含 /vendor/js/blah.min.js 或 /vendor/css/blah.min.css

注意：烦人的部分是我必须在fontsFilter 中指定每个字体扩展名。我尝试使用'**/fonts/*' 但main-bower-files 返回一个平面文件列表，如果您提供{base: 'mybase'} 参数，它会返回一个树，这意味着您可以获得每个文件的整个树结构 - 任何可以提出修复的人, 受邀提交答案。

【讨论】：