Gulp-连接列出目录而不是显示 index.html。为什么？

Question

这个 gulp 文件有什么问题？当它打开浏览器时，它不显示 index.html。相反，它列出 'dist' 的内容，该目录包含 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

你好，问题是你打开的任务，你基本上是告诉 gulp 打开 dist 目录，而不仅仅是 index.html

Answer 2

解决方案是限制 gulp-connect 的版本到 "gulp-connect": "^2.2.0", 最新版本的工作方式不同，但我不知道最新的正确语法。当我尝试其他海报的答案时，页面按预期显示，但手表功能无法使用。

撰写本文时，当前版本为 ^3.0.0。

我在 Windows 7 如果这有影响的话。

[更新] 根据@SteveDavis，这已在 3.2.0 版中修复。

Answer 3

要安装正确版本的 gulp-connect 插件，请确保输入 npm install --save-dev gulp-connect@2.2.0 我遇到了同样的问题，改回那个版本就解决了。

Answer 4

确保 index.html 在 src 而不是 psadmin 项目文件夹下，这样它在执行时可以在那里找到它

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

Gulp-连接列出目录而不是显示 index.html。为什么？

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

gulp

gulp-connect