Search code examples
bowergulpgulp-inject

main-bower-files gulp returns empty array


I'm trying to use the plugin main-bower-files and it doesn't seem to be able to pull the directory from bower_components.

Its debug message shows it has the right files, but it doesn't return an array

#here you can see the debug finding the places
PackageCollection add        angular bower_components/angular
PackageCollection add        json3 bower_components/json3
PackageCollection add        es5-shim bower_components/es5-shim
PackageCollection add        jquery bower_components/jquery
PackageCollection add        angular-resource bower_components/angular-resource
PackageCollection add        angular-cookies bower_components/angular-cookies
PackageCollection add        angular-sanitize bower_components/angular-sanitize
PackageCollection add        angular-animate bower_components/angular-animate
PackageCollection add        angular-touch bower_components/angular-touch
PackageCollection add        angular-ui-router bower_components/angular-ui-router

[22:25:31] [] #< this is the result of calling require('main-bower-files')()

heres my gulp task for inject

var bowerFiles = require('main-bower-files')


gulp.task('inject', function() {
  util.log(bowerFiles({debugging:true}))
  gulp.src('app/index.jade')
    .pipe(jade({pretty: true}))
    .pipe(inject(gulp.src(bowerFiles()), {starttag: '<!-- inject:{{ext}}-->', endtag: '<!-- endinject-->'}))
    .pipe(inject(gulp.src('.tmp/**/*.js', {read: false}), {starttag: '<!-- inject:files:{{ext}}-->', endtag: '<!-- endinject-->'}))
    .pipe(connect.reload())
    .pipe(gulp.dest('.tmp'))
})

Solution

  • You need to install Bower and run Bower install

    So :

    • Install Node and npm, I guess it's done
    • run npm install to make your project npm ready and install what is in package.json
    • install bower : sudo npm install -g bower
    • run bower install to copy your bower.json dependencies in ./bower_components directory
    • install gulp : npm install -g gulp
    • build your project : gulp build
    • check it out : gulp serve and you're ready for it

    Well, almost automatic build...