如何使用 gulp 和 jade 设置 wiredep

Question

我正在尝试使用 wiredep 将 Bower 文件注入我的 jade/html。这个问题是双重的。

如果我要将 bower_component 保留在根文件夹中。由于我的服务器是从 ./dist 而不是从 root 设置的，所以我无法访问 bower_compoents
如果我要在我的 ./dist 文件夹中安装 bower-components（到目前为止，这很有意义），并为 bower_component 创建一个唯一的文件路径，我的 bower.json（它也需要它来选择正确的文件路径），然后它将额外的文件路径 ./dist 添加到我的 bower_components。但是，由于我的服务器在 ./dist 中，我需要从我的文件路径中删除 ./dist。

我将针对选项 #2 回答这个问题。我只是想把它放在那里供其他想做相同或类似事情的人使用。

将来我确实想在我的根目录中保留 bower_components，以便将它们全部编译到一个 js 文件中。现在这是可行的，因为它主要是出于原型制作的原因。但是，绝对有兴趣找到一种方法让#1 工作。

Answer 1

我在 github here 中设置了一个分支，供那些有兴趣查看文件结构和完整内容的人使用 gulpfile.js

我最后做的是在我的 dist 文件夹中安装所有 bower_components。我也把我的 bower.json 放在那里。

对于 wiredep 和 jade magic，我在 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 jade 中包含 javascript 个文件，请使用以下语法

// bower:js
// endbower

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

如何使用 gulp 和 jade 设置 wiredep

How to set up wiredep with gulp and jade

javascript

gulp

wiredep

pug