using gulp to setup a local webserver

Question

I come from a grunt background. And setting up a web server was as easy as grunt connect.

I would put following code in my grunt file and run grunt connect:

grunt.initConfig({
        // fire up the local server
        connect: {
            server: {
                options: {
                    port: 9778, //port to host on
                    livereload: 35729,
                    hostname: '0.0.0.0', //the hostname
                    base: 'out/' //the relative path from grunt file to base folder of web app
                }
            }
        }
    });

grunt.loadNpmTasks('grunt-contrib-connect');

My situation changed as I had to migrate to gulp. But I cant get it work in gulp. May be it is because of my background. I am using gulp-webserver. And added my gulp file is as follows:

gulp.task('serve', function() {
  gulp.src('app')
    .pipe(webserver({
      path:'dist',
      port:'9090',
      livereload: true,
      directoryListing: true,
      open: true
    }));
});

When I navigate to localhost:9090, I get the response: cannot GET /

What am I doing wrong? Isnt the path relative path from gulp file? What am I supposed to pass to gulp.src? It would be a great help if somebody could give me a headstart where to look at.

EDIT 1 my gulpfile, src folder and the folder after build, ie the dist folder all are in same level.

├── src       // my raw application folder
├── dist      // application folder after building
|   .
|   .
|   └── index.html
└── gulpfile.js

Answer 1

mostly it means its not finding index.html

return gulp.src('./app/')
  .pipe(plugin.webserver({
      host: '0.0.0.0',
      port: 6639,
      livereload: true,
      open: true,
      fallback: './dist/index.html'
  }));

mostly its the problem with the path setting.. try below in ur case

  gulp.src('dist')
    .pipe(webserver({
         ......
    }));

Answer 2

I ran into this problem when I was inadvertently starting the webserver right after my clean task so the directory didn't actually exist because it had just been removed. The problem was here:

gulp.task('watch', ["build", "webserver"]);

Which was starting the build task first, which was starting a clean task before it ran.

gulp.task('build', ["clean"])

To fix this I switched to starting the webserver inside the watch task instead of a dependency of the watch task

gulp.task('watch', ["build"], function() {
    return gulp.start(['webserver']);
});