web-dev-qa-db-ja.com

gulp + browser-sync取得できません/エラー

私は現在フロントエンドビルドシステムを学習しています。brower-syncを使用したいのですが、問題はコンマ行にエラーがスローされないことですが、代わりにブラウザが表示されたときにhtmlファイルが表示されません。ブラウザウィンドウに「Get /」エラーが表示されます。これは私のgulpfile.jsコードです

var gulp = require('gulp'),
   uglify = require('gulp-uglify'),
   compass= require('gulp-compass'),
   plumber = require('gulp-plumber'),
   autoprefixer = require('gulp-autoprefixer'),
   browserSync = require('browser-sync'),
   reload = browserSync.reload,
   rename = require('gulp-rename');


gulp.task('scripts', function() {
   gulp.src(['public/src/js/**/*.js', '!public/src/js/**/*.min.js'])
      .pipe(plumber())
      .pipe(rename({suffix: '.min'}))
      .pipe(uglify())
      .pipe(gulp.dest('public/src/js/'));
});

gulp.task('styles', function() {
   gulp.src('public/src/scss/main.scss')
      .pipe(plumber())
      .pipe(compass({
          config_file: './config.rb',
          css: './public/src/css/',
          sass: './public/src/scss/'
      }))
     .pipe(autoprefixer('last 2 versions'))
     .pipe(gulp.dest('public/src/css/'))
     .pipe(reload({stream:true}));
});


gulp.task('html', function() {
  gulp.src('public/**/*.html');
});  

gulp.task('browser-sync', function() {
    browserSync({
      server: {
         baseDir: "./public/"
      }
   });
});

gulp.task('watch', function() {
   gulp.watch('public/src/js/**/*.js', ['scripts']);
   gulp.watch('public/src/scss/**/*.scss', ['styles']);
   gulp.watch('public/**/*.html', ['html']);
});

gulp.task('default', ['scripts', 'styles', 'html', 'browser-sync', 'watch']);

私はwindowsとgitbashを使用しており、バージョンは"browser-sync": "^2.12.5"それで、問題は何ですか、そしてそれから何かを得るために私のために説明しようとします。

gulpbrowser-syncgulp-browser-sync
7
Yasin

index.htmlフォルダに./public/ファイルはありますか？そうでない場合は、browserSyncにスタートページを伝える必要があります。また、browserSyncにベースディレクトリのリストを表示させることもできます。以下の更新を参照してください。

先行ドットなしでpublicを使用することもできます。

編集： startPathconfigディレクティブが機能していないようです。代わりにindexを使用してください

...
gulp.task('browser-sync', function() {
   browserSync({
     server: {
        baseDir: "public/",
        index: "my-start-page.html"
     }
   });
});
...

更新：実際には、browserSyncを使用してディレクトリリストを取得できます。そうすれば、「取得できません」エラーではなく、public内のファイルのリストが表示されます。

...
gulp.task('browser-sync', function() {
   browserSync({
     server: {
        baseDir: "public/",
        directory: true
     }
   });
});
...
10
lofihelsinki
gulp.task('browser-sync', function() {
    browserSync({

      server: {
            baseDir: "./"
            },

            port: 8080,
            open: true,
            notify: false
    });
});
4
Artem O

Index.htmlファイルが同じフォルダー内にあるときにこれを機能させました：

    browserSync.init({
        server: {
            baseDir: "./"
        }
    });
3
mediaguru
gulp.task('server', function()
{
        browserSync.init(["public/src/css/","public/src/js"],{ 
            server: "./",
            startPath: "./index.html", // After it browser running
            //    browser: 'chrome',
            Host: 'localhost',
            //       port: 4000,
            open: true,
            tunnel: true    }); 
});

gulp.task('default', ['scripts', 'styles', 'html', 'server', 'watch']);
0
Ethanzilla

私の場合、これは私を助けました：

server: {
            baseDir: '.',
            index: "index.html"
        }
0
Dariusz Bączyk

常にコードで.htmlファイルを指すか、index.htmlで終わるフォルダー構造を持つことで、browser-syncの「CannotGET」エラーを解決しました。

<a href="/about">About</a> <!-- Cannot GET error-->
<a href="/about">About</a> <!-- same code as above, but works if your site structure is:  ./about/index.html-->
<a href="/about.html">About</a> <!-- OK -->

参照用の私のGulpファイル（jekyllでbrowser-syncを使用しているため、すべてが./_siteフォルダーにあり、gulpfileは./にあります）

var gulp = require('gulp');
var Shell = require('gulp-Shell');
var browserSync = require('browser-sync').create();

gulp.task('build', Shell.task(['jekyll build --watch']));

// serving blog with Browsersync
gulp.task('serve', function () {
    browserSync.init(
        {
            server: {baseDir: '_site/'}
        }
    );

    // Reloads page when some of the already built files changed:
    gulp.watch('_site/**/*.*').on('change', browserSync.reload);
});

gulp.task('default', ['build', 'serve']);

それが役に立てば幸い。

ミケランジェロ

0
fefanto
gulp.task('serve',['sass'], function() {
    bs.init({
        server: "./app",
        startPath: "/index.html", // After it browser running
        browser: 'chrome',
        Host: 'localhost',
        port: 4000,
        open: true,
        tunnel: true
    });
0
user8776341

index.html in baseDir: '_site/'？迷惑なメッセージの代わりに静的なWebページをWebブラウザーに表示するには、ファイルの名前を変更する必要がありますyour_file.htmlからindex.html。これにより、Cnot GET /の問題が解決されます。

0
Alexander Svetly