使用gulp设置本地Web服务器

时间:2015-07-10 04:10:16

标签: webserver gulp

我来自笨拙的背景。设置Web服务器就像grunt connect一样简单。

我会将以下代码放入我的grunt文件中并运行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');

我的情况发生了变化,因为我不得不迁移到gulp。但我不能让它干涸。可能是因为我的背景。我正在使用gulp-webserver。并添加了我的gulp文件如下:

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

当我导航到localhost:9090时,我收到了回复:cannot GET /

我做错了什么?不是gulp文件的路径相对路径?我应该传递给gulp.src的是什么?如果有人可以给我一个开头的地方,那将是一个很大的帮助。

编辑1 我的gulpfile,src文件夹和构建后的文件夹,即dist文件夹都在同一级别。

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

3 个答案:

答案 0 :(得分:13)

主要意味着它没有找到index.html

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

主要是路径设置的问题..在下面的情况下尝试

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

答案 1 :(得分:2)

当我在干净的任务之后无意中启动网络服务器时遇到了这个问题,所以目录实际上并不存在,因为它刚被删除。问题出在这里:

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

首先启动构建任务,该任务在运行之前启动了一个干净的任务。

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

为了解决这个问题,我改用了在监视任务中启动webserver而不是监视任务的依赖

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

答案 2 :(得分:0)

就我的情况而言,经过半小时的挑战,我将 directoryListing 切换为 false

gulp.task('webserver', () => {
    return gulp.src('dist')
        .pipe(webserver({
            port: 8000,
            livereload: true,
            directoryListing: false,
            open: true,
            fallback: './dist/index.html'
        }));
});

因此摆脱该选项 directoryListing