Ошибка cannot get при запуске browser sync

I am learning the front-end build system currently gulp, i want to use brower-sync and the problem is it is not throwing an error in the commad line but instead when it brings up the browser it will not display my html file and it will say «Cannot GET /» error in the browser window. This is my gulpfile.js code

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

i am using windows and git bash and version is "browser-sync": "^2.12.5" so what is the problem and try to explain for me in order to get something out of it.

После выполнения всех последовательных шагов в уроке 3.4. Планировщик задач Gulp после запуска команды gulp в терминале появляется 
gulp
[10:40:51] Using gulpfile ~DesktopУчебный 1Projekt Ubergulpfile.js
[10:40:51] Starting ‘default’…
[10:40:51] Starting ‘watch’…
[10:40:51] Starting ‘server’…
[10:40:51] Starting ‘styles’…
[10:40:51] Finished ‘styles’ after 127 ms
[Browsersync] Access URLs:
—————————————
Local: http://localhost:3000
External: http://192.168.31.219:3000
—————————————
UI: http://localhost:3001
UI External: http://localhost:3001
—————————————
[Browsersync] Serving files from: src  Далее запускается браузер в нем следующая ошибка Cannot GET в адресной строке http://localhost:3000. переустановка пакетов результата не дала та же ошибка. 

Package json 

{
  «name»: «scr»,
  «version»: «1.0.0»,
  «main»: «index.js»,
  «scripts»: {
    «test»: «echo «Error: no test specified» && exit 1″
  },
  «author»: «»,
  «license»: «ISC»,
  «devDependencies»: {
    «browser-sync»: «^2.26.7»,
    «gulp»: «^4.0.2»,
    «gulp-autoprefixer»: «^7.0.1»,
    «gulp-clean-css»: «^4.3.0»,
    «gulp-cli»: «^2.3.0»,
    «gulp-rename»: «^2.0.0»,
    «gulp-sass»: «^4.1.0»
  },
  «description»: «»
}

Файл  gulpfile.json скачан с репозитория 

const gulp        = require(‘gulp’);
const browserSync = require(‘browser-sync’);
const sass        = require(‘gulp-sass’);
const cleanCSS = require(‘gulp-clean-css’);
const autoprefixer = require(‘gulp-autoprefixer’);
const rename = require(«gulp-rename»);

gulp.task(‘server’, function() {

    browserSync({
        server: {
            baseDir: «src»
        }
    });

    gulp.watch(«src/*.html»).on(‘change’, browserSync.reload);
});

gulp.task(‘styles’, function() {
    return gulp.src(«src/sass/**/*.+(scss|sass)»)
        .pipe(sass({outputStyle: ‘compressed’}).on(‘error’, sass.logError))
        .pipe(rename({suffix: ‘.min’, prefix: »}))
        .pipe(autoprefixer())
        .pipe(cleanCSS({compatibility: ‘ie8’}))
        .pipe(gulp.dest(«src/css»))
        .pipe(browserSync.stream());
});

gulp.task(‘watch’, function() {
    gulp.watch(«src/sass/**/*.+(scss|sass)», gulp.parallel(‘styles’));
})

gulp.task(‘default’, gulp.parallel(‘watch’, ‘server’, ‘styles’));

В чем ошибка не могу понять поэтапно повторял несколько раз те же шаги результат один

при запуске команды gulp запускается браузер а там ошибка Cannot GET.

Помогите Пожайлуста кто может!

index.html лежит в папке src 

<!DOCTYPE html>
<html lang="en" ng-app="helloWorldApp">
    <head>
        <title>Angular hello world app</title>
        <link href="css/main.css" rel="stylesheet">
    </head>
    <body>
        <ng-view class="view"></ng-view>
    </body>
    <script src="js/scripts.js"></script>
</html>

const gulp = require('gulp');
const concat = require('gulp-concat');
const browserSync = require('browser-sync').create();

const scripts = require('./scripts');
const styles = require('./styles');

var devMode = false;



gulp.task('css',function(){
    gulp.src(styles)
        .pipe(concat('main.css'))
        .pipe(gulp.dest('./dist/css'))
        .pipe(browserSync.reload({
            stream : true
    }))
});

gulp.task('js',function(){
    gulp.src(scripts)
        .pipe(concat('scripts.js'))
        .pipe(gulp.dest('./dist/js'))
        .pipe(browserSync.reload({
            stream : true
    }))
});

gulp.task('html',function(){
    gulp.src('./templates/**/*.html')
        .pipe(gulp.dest('./dist/html'))
        .pipe(browserSync.reload({
            stream : true
    }))
});

gulp.task('build',function(){

    gulp.start(['css','js','html']);
     console.log("finshed build");
});

gulp.task('browser-sync',function(){
    browserSync.init(null,{
        open : false,
        server : {
            baseDir : 'dist'
        }
    });
     console.log("finshed browser ");
});

gulp.task('start',function(){
    devMode = true;
    gulp.start(['build','browser-sync']);
    gulp.watch(['./css/**/*.css'],['css']);
    gulp.watch(['./js/**/*.js'],['js']);
    gulp.watch(['./templates/**/*.html'],['html']); 
});

2 ответа

Лучший ответ

gulp.task('browser-sync',function(){
    browserSync.init(null,{
        open : false,
        server : {
            baseDir : 'dist',
            index : "html/index.html"
        }
     });
     console.log("finshed browser ");
});

14.08.18 — 12:08

1 — 14.08.18 — 12:10

а почему именно браузер синк выбрал?

2 — 14.08.18 — 12:11

(1) В книжке написано )))

Я пока в этом ни в зуб

3 — 14.08.18 — 12:14

(2) а ты хочешь прям сразу веб сервер свой писать? бэкенд?

5 — 14.08.18 — 12:14

для начала лучше express наверно, более популярный веб-сервер на ноде

6 — 14.08.18 — 12:15

(4) вебпак — это же бандлер, а не вебсервер

9 — 14.08.18 — 12:17

11 — 14.08.18 — 12:21

12 — 14.08.18 — 12:21

вебпак нужен для сборки фронтенда и гибридных приложений

для серверной части мне понравился express

13 — 14.08.18 — 12:22

(10) Если у тебя полторы странички с простым css, нахрена тащить монстра webpack?

14 — 14.08.18 — 12:23

(13) если у тебя не фронтенд, а бэкенд 🙂

15 — 14.08.18 — 12:23

а с фронтендом вебпак лучше

17 — 14.08.18 — 12:24

(14) Какое отношение browser-sync имеет к бэку?

Ребят, вы хоть определитесь, где молоток, а где стамеска.

19 — 14.08.18 — 12:25

(9) Там про скриптование. У меня же пока вообще нет скриптов..

22 — 14.08.18 — 12:27

23 — 14.08.18 — 12:35

Спецы закончились ? ((

24 — 14.08.18 — 12:37

(23) а что тут много спецов по браузер синку???

25 — 14.08.18 — 12:38

а зачем вообще браузер? для начального изучения выводи в консоль пока

26 — 14.08.18 — 12:39

index.html файл то есть?

27 — 14.08.18 — 12:40

28 — 14.08.18 — 12:41

29 — 14.08.18 — 13:16

(26) Разумеется, есть

30 — 14.08.18 — 13:21

(29) Покажи плиз свой index.html

31 — 14.08.18 — 13:21

(30)+ там случаем вызова php нету?

32 — 14.08.18 — 13:22

(31) другая ошибка была бы.
явно же не может найти файл индекс.хтмл

33 — 14.08.18 — 13:23

34 — 14.08.18 — 13:28

35 — 14.08.18 — 13:29

(34) если бы было все на месте, то работало бы

36 — 14.08.18 — 13:30

(35) Я тебе картинку показал. ЧТо не так в ней?

37 — 14.08.18 — 13:31

картинка не работает

38 — 14.08.18 — 13:34

39 — 14.08.18 — 13:34

Даже картинку расшарить не в силах. Чего уж там до высоких материй

40 — 14.08.18 — 13:35

сейчас попробовал браусер-сеинк.
все работает
правда я запускал
browser-sync start —server

41 — 14.08.18 — 13:36

и так
browser-sync start —server —files «stylesheets/*.css, *.html»
тоже работает?
Может нода не той версии?

42 — 14.08.18 — 13:37

у меня 8.11.1

43 — 14.08.18 — 13:38

(41) нода 8.11.3 LTS

44 — 14.08.18 — 13:39

(44) тоже работает

В настоящее время я использую новейшую версию Browser Sync (2.24.6), установленную через npm install -g browser-sync, и я сделал это в моем C:UsersUSERNAMEGoogle Drive. Я использую Gulp.

Я запускаю синхронизацию браузера, запустив browser-sync start —server —files ‘*.html, css/*.css, js/*.js’ в bash, и мой проект открывается. Проект обновляется, как и ожидалось, когда я меняю файлы HTML, CSS и / или JS.

Однако, когда я редактирую свой файл package.json (который находится не в том же каталоге) в «сценариях» с «start»: browser-sync start —server —files ‘*.html, css/*.css, js/*.js’, а затем запускаю npm start в моей консоли bash, я получаю страницу, но все, что я вижу, это Cannot GET /, а не мой проект.

Кроме того, если я попытаюсь использовать browser-sync start —server —files ‘*.html, css/*.css, js/*.js’ или любой другой проект, я получаю ту же ошибку.

Если я сделаю gulp browser-sync, то получу:

[06:03:14] Working directory changed to ~Google Drive
[06:03:15] Using gulpfile ~Google Drivegulpfile.js
[06:03:15] Starting 'browser-sync'...
[Browsersync] Access URLs:
 --------------------------------------
       Local: http://localhost:3000
    External: http://192.168.1.116:3000
 --------------------------------------
          UI: http://localhost:3001
 UI External: http://192.168.1.116:3001
 --------------------------------------
[Browsersync] Serving files from: ./

Вот мой gulpfile.js:

const gulp = require("gulp");
const browserSync = require('browser-sync').create();

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

А вот и мой файл package.json:

{
  "name": "eslint-test",
  "version": "1.0.0",
  "description": "",
  "main": "main.js",
  "dependencies": {
    "browser-sync": "^2.24.6",
    "gulp-sass": "^4.0.1"
  },
  "devDependencies": {
    "eslint": "^4.18.1",
    "eslint-config-airbnb-base": "^12.1.0",
    "eslint-plugin-import": "^2.9.0",
    "gulp": "^4.0.0"
  },
  "scripts": {
    "test": "echo "Error: no test specified" && exit 1",
    "start": "browser-sync start --server --files '*.html, css/*.css, js/*.js'"
  },
  "author": "",
  "license": "ISC"
}

Прошу прощения, если это не подходящее место, но я искал и смотрел видео около 2 часов, но не нашел ответов. Я ценю любую помощь / ссылки.