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

Question

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

11.4k views Asked by Heiner At 26 November 2014 at 21:53

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

Original Q&A

There are 1 answers

**Austin Pray** · Answer 1 · 2014-11-27 01:02:15

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

TechQA.

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

There are 1 answers

Related Questions in GULP

Related Questions in GULP-INJECT

Popular Questions

Popular Tags

Trending Questions