Menu
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/'));
413
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')();
170
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
