如何使用gulp一步复制并注入主bower文件？

Question

如何使用gulp一步复制并注入主bower文件？

10

当部署我的应用程序时，我希望将 bower 依赖项复制到“deploy”目录，并将这些文件的链接注入到也在“deploy”目录中的“index.html”中。

每个步骤单独执行都很完美，但我无法将它们结合起来。

复制这些文件:

return gulp.src(mainBowerFiles(), { read: false })
    .pipe(gulp.dest('./deploy/lib/'));

注入文件：

return gulp.src('./deploy/index.html')
    .pipe(plugins.inject(
        gulp.src(mainBowerFiles(), { read: false }), { relative: true }))
    .pipe(gulp.dest('./deploy/'));

我认为我应该一步完成这个操作，以保持依赖文件的正确顺序。

我尝试了这种组合，但它没有成功。

return gulp.src('./deploy/index.html')
    .pipe(plugins.inject(
        gulp.src(mainBowerFiles(), { read: false })
            .pipe(gulp.dest('./deploy/lib/'), { relative: true })))
    .pipe(gulp.dest('./deploy/'));

- Heiner

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Austin Pray · Accepted Answer

我推荐使用wiredep:

您可以向您的HTML添加一个块：

<html>
<head>
</head>
<body>
  <!-- bower:js -->
  <!-- endbower -->
</body>
</html>

你的 wiredep 任务看起来像这样：

// inject bower components
gulp.task('wiredep', function () {
  var wiredep = require('wiredep').stream;
  gulp.src('app/*.html')
    .pipe(wiredep())
    .pipe(gulp.dest('app'));
});

这将添加依赖项到你的HTML中，如下所示：

<html>
<head>
</head>
<body>
  <!-- bower:js -->
  <script src="bower_components/foo/bar.js"></script>
  <!-- endbower -->
</body>
</html>

你可以将此与useref结合，以便对项目的所有JavaScript依赖项进行排序。块

<!-- build:js scripts/app.js -->
<!-- bower:js -->
<script src="bower_components/foo/bar.js"></script>
<!-- endbower -->
<script src="js/yourcustomscript.js"></script>
<!-- endbuild -->

gulp 任务

gulp.task('html', ['styles'], function () {
  var assets = $.useref.assets({searchPath: '{.tmp,app}'});

  return gulp.src('app/*.html')
    .pipe(assets)
    .pipe(assets.restore())
    .pipe($.useref())
    .pipe(gulp.dest('dist'));
});

看一下generator-gulp-webapp的做法：https://github.com/yeoman/generator-gulp-webapp

注意： $.plugin 语法假定 var $ = require('gulp-load-plugins')();