2

So my directory structure at its root contains

app/
bower_components/
node_modules
..bowercc
gulpfile.js
....etc.....

under app are other folders like"

/css/
/js/
/assets/
index.html
/view/

So my issue is this with a very simple gulp file. My bower components do not load and therefore Angular never attaches. My .bowercc looks like:

{
  "directory": "bower_components"
}

My gulpfile.js looks like:

//gulp var gulp = require ('gulp');

//plugins var connect = require ('gulp-connect');

gulp.task('connect', function () {
    connect.server({
        root: [__dirname],
        port: 8888
    });
});

I am using the gulp connect plugin and according to what I understand, since my bower_components sits at the root rather than under the '/app' folder, I could simply use [dirname], but that breaks things. If I leave the root option blank, no dependencies load and I get 404's for bootstrap, font-awesome, etc... that I rely on from bower.

Surely some of you understand how to fix this? I do not want to resort to using Require as I just want to make it work the way my structure currently is. What all can I do here?

Thanks much.

Mark
  • 1,812
  • 3
  • 29
  • 51

1 Answers1

9

Try following

connect.server({
    root: ['app'],
    port: 3000,
    livereload: true,
    middleware: function(connect) {
        return [connect().use('/bower_components', connect.static('bower_components'))];
    }
});
Rashad Ibrahimov
  • 3,279
  • 2
  • 18
  • 39