首页 文章

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

提问于
浏览 次
1

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

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

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

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

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

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文件夹 .

gulp bower

1 回答

  • 2

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

    我们正在做的是将包从 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 （测试） - 一切都应该到位 .

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

    回复于

相关问题