Wiredep for bower not inserting files
I have the following directory structure:
bower_components
node_modules
src
index.html
bower.json
package.json
gulpfile.js
.gitignore
I have a gulp task to inject bauers dependencies like this:
gulp.task('bower-inject', function () {
gulp.src('./index.html')
.pipe(wiredep())
.pipe(gulp.dest('./'));
});
index.html
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" href="src/assets/images/favicon.ico">
<title>ABC</title>
<!-- bower:css -->
<!-- endbower -->
<!-- inject:css -->
<!-- this is done with gulp inject which works as expected -->
<!-- endinject -->
</head>
<body ng-controller="AppController as appVm">
<div ui-view></div>
<!-- bower:js -->
<!-- endbower -->
<!-- inject:js -->
<!-- done via gulp-inject and works as expected -->
<!-- endinject -->
</body>
bower.json
"devDependencies": {
"angular": "1.4.0",
"angular-bootstrap": "~0.13.0",
"angular-ui-router": "~0.2.15",
"bootstrap": "~3.3.4",
"modernizr": "~2.8.3",
"font-awesome": "~4.3.0"
}
This is what I see when doing the task:
[00:24:50] Starting 'bower-inject'...
[00:24:50] Finished 'bower-inject' after 14 ms
Any idea what I'm missing here?
source to share
Here's what finally worked for me:
gulp.task('inject', function () {
var target = gulp.src('./index.html');
var sources = gulp.src(['src/**/*.js', 'src/**/*.css'], {read: false});
return target
.pipe(wiredep({
devDependencies: true
}))
.pipe(inject(sources))
.pipe(gulp.dest('./'));
});
source to share
Wiredep will inject script tags when installing packages based on dependencies, not dependencies. So launching bower install --save angular angular-bootstrap angular-ui-router bootstrap modernizr font-awesome
and then launching gulp build
should do it.
Note : some packages require configuration overrides to bower.json
. Check here for information on column overrides if you need.
source to share