Question

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

我认为设置将移动包含gulp的bower模块，其中包含将指定模块复制到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文件夹是为了让所有内容更清晰。

简介：Gulp和WSK使用bower设置，bower_components文件夹位于＆＃34; App＆＃34;文件夹中。

Answer 1

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

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

// 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中，指定您要使用的凉亭套餐，如下所示：

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

比运行gulp（构建）或gulp serve（进行测试）时 - 一切都应该落实到位。

如果你可以简化这一点 - 或者提高效率，那么就放弃一条线！

使用Gulp（和Web入门套件）设置Bower

1 个答案: