javascript - 如何使用gulp和jade设置wiredep

Question

我正在尝试使用wiredep将bower文件注入(inject)到我的jade/html中。这个问题是双重的。

1. 如果我将 Bower_Component 保留在根文件夹中。由于我的服务器是从 ./dist 设置的，而不是从 root 设置的，所以我无法访问 Bower_compoents
2. 如果我要在我的 ./dist 文件夹中安装 Bower-Components(到目前为止这是有意义的)，并为 Bower_components 创建一个唯一的文件路径，我的 Bower.json (它也需要它来获取正确的文件路径) ，然后它将额外的文件路径 ./dist 添加到我的 Bower_components 中。但是，由于我的服务器位于 ./dist 中，因此我需要从文件路径中删除 ./dist 。

我将针对选项 #2 回答这个问题。我只是想把它发布给其他想做同样或类似事情的人。

将来我确实希望将 Bower_components 保留在我的根目录中，以便将它们全部编译成一个 js 文件。目前这是可行的，因为它主要是出于原型(prototype)设计的原因。然而，我绝对有兴趣找到一种方法让#1 发挥作用。

Answer 1

我在github建立了一个分支here对于那些有兴趣查看文件结构和完整 gulpfile.js 的人

我最终所做的是将所有的 Bower_components 安装在我的 dist 文件夹中。我也把我的 Bower.json 放在那里。

对于wiredep和jade魔法，我将以下内容添加到我的gulpfile.js中:

gulp.task('templates', function() {

  var YOUR_LOCALS = {};

  gulp.src('./app/jade/*.jade')
      .pipe(jade({
          locals: YOUR_LOCALS,
          pretty: true
      }))
      .pipe(wiredep({
      directory: './dist/bower_components',
      bowerJson: require('./dist/bower.json'),
      ignorePath: '/dist'
      }))
      .pipe(gulp.dest('./dist'))
});

神奇的事情发生在一个真实的地方，那就是wiredep的ignorePath选项。我可以从 dist 文件夹中获取该目录。但是，由于文件路径包含 ./dist，并且我不能让我的服务器从 ./dist 工作，所以我能够忽略 ./dist 并输出正确的文件路径。

另一个注意事项，为了包含，比如说 Bower for james 中的 javascript 文件，请使用以下语法

// bower:js
// endbower

就是这样，如果这只能帮助一个人，那就值得了。如果您有任何疑问，请随时发表评论。