it-swarm.com.ru

gulp + browser-sync Не удается получить/ошибка

Я изучаю интерфейсную систему сборки в настоящее время, я хочу использовать браузер-синхронизацию, и проблема в том, что она не выдает ошибку в строке с запятой, а вместо этого, когда он вызывает браузер, он не будет отображать мой HTML-файл, и он в окне браузера появится сообщение «Cannot 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 и git bash, а версия "browser-sync": "^2.12.5", так в чем же проблема, и пытаюсь объяснить для меня, чтобы получить что-то из этого.

5
Yasin

Есть ли файл index.html в вашей папке ./public/? Если нет, вам нужно указать browserSync, какова ваша стартовая страница. Вы также можете получить browserSync для отображения списка базовых каталогов, см. Обновление ниже.

Вы также можете попытаться использовать public без начальной точки.

Edit: Директива startPath не работает, вместо нее используйте index

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

Обновление : На самом деле вы можете получить список каталогов с browserSync. Таким образом, будет отображаться список файлов в public, а не ошибка Cannot Get

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

Я получил это, чтобы работать, когда файл index.html был в той же папке:

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

      server: {
            baseDir: "./"
            },

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

Я исправил ошибки «Cannot GET» в синхронизации браузера, указав в коде HTML-файл или указав структуру папок, оканчивающуюся на index.html.

<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, поэтому все находится в папке ./_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 в baseDir: '_site/'? Чтобы видеть вашу статическую веб-страницу в веб-браузере вместо этого надоедливого сообщения, вы должны переименовать файл your_file.html в index.html. Это решит Cannot GET/проблему.

0
Alexander Svetly