使用 Gulp（和 Web Starter Kit）设置 Bower

Question

由于能够将 bower_component 文件夹放在 app 文件夹之外，如何加载 bower 包以使用 gulp？计划是使用已经设置好浏览器同步的 Web Starter Kit。

我认为设置将是移动凉亭模块，gulp - 其任务是将指定模块复制到app/scripts/vendors 或app/styles/vendors。因此它将运行两项任务（一项用于脚本，一项用于样式）。

它将复制它，如果下载了更新的更新 - 替换现有文件。无论是服务还是构建，Concat 和 Minify。

由于 WSK 已经构建了 main.js，bower 包将构建到 library.js 文件中。有人可以指导我正确的方向来构建这个设置吗？

我附上了一些我认为设置需要的东西。

app/index.html

<!-- build:js scripts/vendor.js -->
  <script src="bower_components/angular/angular.js"></script>
<!-- endbuild -->

构建到/dist/scripts/venfors.js

gulpfile.js

// Bower - bower_components directory - located to root folder
var directory = {
  bower = './bower_components/'
};

// Bower - Scripts
gulp.task('bower-scripts', function() {
  return gulp.src([
    // AngularJS
    directory.bower+'bower_components/angular/angular.js'
  ])
    .pipe( --- Copy src to /app/scripts/vendor --- )
});

不确定我是否还有什么需要做的？或者如果我的设置不正确？

我为什么要将 bower_components 文件夹保留在根文件夹中而不是 app 文件夹中的原因是为了保持一切更清洁。

简介：使用 bower 设置 Gulp 和 WSK，在“App”文件夹之外使用 bower_components 文件夹。

Answer 1

所以，我相信这应该对其他人有所帮助：

我们正在做的是将包从root 文件夹中的bower_components 文件夹复制到我们的应用脚本文件夹。

// Bower - Scripts
gulp.task('bower-scripts', function() {
  var directory = { bower : './bower_components/' };

  return gulp.src([
    directory.bower+'**/*.min.js'
  ])
    // Output Files
    .pipe(gulp.dest('app/scripts/vendor'))
});

当我们运行gulp serve 时，我们需要将bower-scripts 任务作为依赖添加到我们的serve 任务中

在index.html 中，指定要使用的 bower 包，如下所示：

<!-- build:js scripts/library.min.js -->
    <script src="scripts/vendor/angular/angular.min.js"></script>
<!-- endbuild -->

与运行 gulp（构建）或 gulp serve（测试）相比，一切都应该到位。

如果您可以简化此流程 - 或使其更有效率，那就不要放弃！