Gulp和Wire Dep不注入文件类型*。*。js文件

Question

I am facing below issue -

I have Yeomen generator and wiredep to inject bower dependencies in index.html file.

I have installed angular tree view by bower then noticed that lib files and css file of angular tree view are not getting injected in index file.

After debugging for while found that the lib file of angular tree view has one extras dot (angular.treeview.js) same with the css file as well

So how to inject that file in index.html

i have below task in inject.js file in gulp folder to inject file in index.html which is generated by yoemen

gulp.task('inject', ['scripts'], function () {
var injectStyles = gulp.src([
path.join(conf.paths.src, '/app/**/*.css')
], { read: false });

var injectScripts = gulp.src([
path.join(conf.paths.src, '/app/**/*.module.js'),
path.join(conf.paths.src, '/app/**/*.js'),
path.join('!' + conf.paths.src, '/app/**/*.spec.js'),
path.join('!' + conf.paths.src, '/app/**/*.mock.js')
])
.pipe($.angularFilesort()).on('error',conf.errorHandler('AngularFilesort'));

var injectOptions = {
ignorePath: [conf.paths.src, path.join(conf.paths.tmp, '/serve')],
addRootSlash: false
};

return gulp.src(path.join(conf.paths.src, '/*.html'))
.pipe($.inject(injectStyles, injectOptions))
.pipe($.inject(injectScripts, injectOptions))
.pipe(wiredep(_.extend({}, conf.wiredep)))
.pipe(gulp.dest(path.join(conf.paths.tmp, '/serve')));
}

I am using Yeomen and gulp. Any help would be appreciated.

Answer 1

It doesn't have to do anything with your gulp task. Wiredep uses bower.json file to inject dependency in your index file.

I case of any issue, like in your current scenario you just need to override your package, like you do for bootstrap. add below code in bower.json

     "overrides": {
        "bootstrap": {
          "main": [
            "dist/css/bootstrap.css",
            "dist/fonts/glyphicons-halflings-regular.eot",
            "dist/fonts/glyphicons-halflings-regular.svg",
            "dist/fonts/glyphicons-halflings-regular.ttf",
            "dist/fonts/glyphicons-halflings-regular.woff",
            "dist/fonts/glyphicons-halflings-regular.woff2"
          ]
        },
     "angular-treeview":{
     "main":[
     "angular.treeview.js",
     "css/angular.treeview.css"
     ]
     }
      }

I hope it will help you. Happy coding :)