如何使用 gulp-serve 在构建目录之外提供组件

Question

Using the gulp-serve plugin, I'm serving my application at root bin/dev/ , my folder structure is as follows:

bower_components/
    angular/
bin/
  dev/
    scripts/
    content/
        css/
    index.html

The injected references to bower_components/ in index.html look like the following:

"../../bower_components/angular/angular.js"

When running gulp serve , the components aren't included when navigating to the application, eg "../../bower_components/angular/angular.js" could not be found.

Here is my gulp task:

gulp.task('serve', plugins.serve('bin/dev/'));

How can I serve my application and include assets outside of the build directory?

Answer 1

I opted to use the gulp-webserver plugin instead.

I was able to serve files outside of the directory using the middleware option like so:

var webserver = require('gulp-webserver');
var serveStatic = require('serve-static');

gulp.task('serve', function () {
    gulp.src('./bin/dev/')
        .pipe(plugins.webserver({
            middleware: [
                serveStatic(__dirname)
            ]
        }));
});

Where __dirname is the root at path ./ .

I could then simply inject my scripts into index.html using something like:

"bower_components/angular/angular.js"