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

gulp, gulp-inject

Solution

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

Problem

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 source