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']);

Phillip Scott Givens · Accepted Answer · 2016-05-09T20:41:01.610

4

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.

edited May 09 '16 at 20:41

answered Feb 28 '16 at 21:07

Phillip Scott Givens

5,256
4
32
54

1

This tip was a lifesaver. Thank you! – Steve Davis Feb 29 '16 at 22:26
1

This problem was fixed in version 3.2.0. – Steve Davis May 09 '16 at 18:28

score 0 · Answer 2 · answered Feb 28 '16 at 18:27

0

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

answered Feb 28 '16 at 18:27

Arthur Stepanyuk

1
1

I checked that. I am working from an example in PluralSight which does it this way. It was working at one point. Also, the example given on [npmjs.com](https://www.npmjs.com/package/gulp-open) does it this way. – Phillip Scott Givens Feb 28 '16 at 18:31
If I break with the documentation and append index.html, it shows up in the browser, but the 'watch' does not work. – Phillip Scott Givens Feb 28 '16 at 18:42

score 0 · Answer 3 · answered Mar 01 '16 at 21:23

0

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

answered Mar 01 '16 at 21:23

Rian Adu

26
3

score 0 · Answer 4 · answered Mar 06 '16 at 00:46

0

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)

answered Mar 06 '16 at 00:46

Genovo

551
6
6

How is what you wrote different that what I wrote? – Phillip Scott Givens Mar 06 '16 at 01:06

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

4 Answers4