Gulp-Connect lists directory instead of showing index.html. Why?

Question

What is wrong with this gulp file? When it opens the browser, it does not show index.html. Instead, it lists the contents of 'dist', the directory containing index.html.

"use strict";

var gulp = require('gulp');
var connect = require('gulp-connect'); // Runs a local dev server
var open = require('gulp-open');

var config = {
    port: 9005,
    devBaseUrl: 'http://localhost',
    paths: {
        html: './src/*.html',
        dist: './dist'
    }
};

//Start a local development server
gulp.task('connect', function() {
    connect.server({
        root: ['dist'],
        port: config.port,
        base: config.devBaseUrl,
        livereload: true
    });
});

gulp.task('open', ['connect'], function () {
    gulp.src('dist/index.html')
        .pipe(open({
            uri: config.devBaseUrl + ':' + config.port + '/', 
            app: 'chrome' }));

});

gulp.task('html', function() {
    gulp.src(config.paths.html)
        .pipe(gulp.dest(config.paths.dist))
        .pipe(connect.reload());
});

gulp.task('watch', function() {
    gulp.watch(config.paths.html, ['html']);
});

gulp.task('default', ['html', 'open', 'watch']);

Answer 1

The solution was to restrict the version of gulp-connect to "gulp-connect": "^2.2.0", The latest version works differently, but I do not know the correct syntax of the latest. When I tried the answer from the other poster, the page was displayed as expected, but the watch features did not work with it.

At the time of this writing, the current version is ^3.0.0.

I am on Windows 7 if that makes a difference.

[Update] As per @SteveDavis, this was fixed in version 3.2.0.

Answer 2

To install the correct version of the gulp-connect plugin make sure you type in npm install --save-dev [email protected] I had the same problem and changing back to that version solved it.

Answer 3

Hello problem is with your open task you basically telling gulp to open dist directory instead of just index.html

Answer 4

Make sure index.html is under src not psadmin project folder, so it can find it there when it executes

gulp.src(config.paths.html)
.pipe(gulp.dest(config.paths.dist)