CODEWITHSUNDEEP
javascripthtmlsocket.iogulpwiredep
javascriptttt
javascriptttt

Reputation: 730

Using gulp and wiredep, socket.io is not added to index.html (even though it is in bower.json)

I have angular, angular-ui-router and socket-io in my bower.json file.

When I run my gulp file (using wiredep), the two angular scripts are successfully added to my index.html file but the socket.io script is not - and I cannot figure out why. Thanks for any help

//command line

[21:56:06] Using gulpfile ~/dev/projects/ecommerceVidChat/gulpfile.js
[21:56:06] Starting 'default'...
[21:56:06] Starting 'bower-dependencies'...
[21:56:06] Finished 'bower-dependencies' after 6.24 ms
[21:56:06] Finished 'default' after 7.24 ms

//bower.json

  "dependencies": {
    "angular": "~1.3.13",
    "socket.io": "~1.3.4",
    "angular-ui-router": "~0.2.13"
  }

// gulpfile.js

var gulp = require('gulp'),
    wiredep = require('wiredep').stream;

gulp.task('default', function() {
  gulp.start('bower-dependencies')
});

gulp.task('bower-dependencies', function () {  
  gulp.src('./build/index.html') 
    .pipe(wiredep({
      directory: './build/bower_components',
      bowerJson: require('./bower.json'),
    }))
    .pipe(gulp.dest('./build/'));
});

//index.html

<!-- bower:js -->
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-ui-router/release/angular-ui-router.js"></script>
<!-- endbower -->

//package.json

"devDependencies": {
    "gulp": "^3.8.11"
  }

Upvotes: 4

Views: 2344

Answers (2)

Preview
Preview

Reputation: 35816

Socket.io itself does not have bower support, remember that it's the server, and not the client.

You can serve the client script with the socket server by setting its serveClient option to true, and insert it in your index directly with:

 <script src="socket.io/socket.io.js"></script>

Or install the client script that is referenced in bower but with another name:

bower install -save socket.io-client

If this package does not have a main property, you will have to override it in your main bower.json:

"overrides": {
  "socket.io-client": {
    "main": "socket.io.js"
  }
}

This way, wiredep will automatically inject it in your index.html.

Upvotes: 10

tgk
tgk

Reputation: 4116

Sometimes vendors exclude the optional main property in their bower.json file which, I believe, wiredep uses to compile the array of sourcefiles. Check the bower.json file within the bower_components/socket.io/ folder to see if they've included that. If not, maybe you can do a pull request to socket.io or at least raise an issue?

Upvotes: 1

Related Questions