Проблема с глотком и синхронизацией браузера - PullRequest
Новая
       81

Проблема с глотком и синхронизацией браузера

0 голосов
/ 01 октября 2019

В настоящее время я работаю над стартовым проектом для будущего использования, который использует gulp и синхронизацию браузера для автоматической загрузки новых изменений в браузере. У меня это работает для scss в css и для автоматической перезагрузки изменений HTML. Проблема в том, что при автоматической перезагрузке html-изменений все изменения удаляются. Например, если я установил измененный цвет фона и сохранил, изменения отобразятся. Затем я захожу в index.html и вносю изменения, и это также отображается, но удаляет изменения из файла styles.scss.

Я пытался делать это как с задачами, так и с функциями. Ни один из них не сработал.

РЕДАКТИРОВАТЬ: я получил его на работу, поместив файл index.html в основной (./) каталог. Но я не должен был делать это, чтобы заставить его работать. Не уверен, почему он не работает с индексом в папке src 

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


// Compile sass into CSS & auto-inject into browsers
function style(){
    return gulp.src('./src/scss/**/*.scss')
    .pipe(sass())
    .pipe(gulp.dest('./src/css'))
    .pipe(browserSync.stream());
}

function watch() {
    browserSync.init({
        server: {
            baseDir: './src'
        }
    });
    gulp.watch('./src/scss/**/*.scss', style);
    gulp.watch('./src/*.html').on('change', browserSync.reload);
    gulp.watch('./src/js/**/*.js').on('change', browserSync.reload);
}

exports.style = style;
exports.watch = watch;


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="css/styles.css">
    <title>Document</title>
</head>
<body>
    <h1>Hello World!</h1>
    <p>This is a basic starter file!</p>
</body>
</html>

Нет никаких сообщений об ошибках при запуске этого. Единственная проблема заключается в том, что при сохранении файла .html удаляются изменения styles.scss.

...