How to copy and inject the main-bower-files in one step using gulp?

Question

When deploying my app I want to copy the bower dependency to the deploy directory and inject the links to these files into the index.html that is also in the deploy directory.

Each step alone works perfectly by I'm not able to combine them.

Copy the files:

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

Injecting the files:

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

I think that I should do this in one step to keep the correct order of the dependent files.

I tried this combination but it did not work out.

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/'));

score 13 · Answer 1 · answered Nov 27 '14 at 01:02

I recommend wiredep:

You add a block to your html:

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

and your wiredep task looks like:

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

Which will add the deps to your html as such:

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

You can then combine this with useref to order all your project's javascript dependencies

html block

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

gulp task

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'));
});

Take a look at how generator-gulp-webapp does things: https://github.com/yeoman/generator-gulp-webapp

Note: the $.plugin syntax assumes var $ = require('gulp-load-plugins')();

Where does this `'app'` variable come from? – Startec Nov 11 '16 at 01:38 — Startec, Nov 11 '16 at 01:38

How to copy and inject the main-bower-files in one step using gulp?

1 Answers1