2016-10-29 2 views
0

웹 사이트 작성 도구 (https://github.com/bmargogne/website-builder.git)에서 작업하고 있습니다. 루트 index.html을에있는 동안 BrowserSync 완벽하게 작동하지만, 여기에browsersync 만 '루트'를 다시로드합니다. index.html

내가 ...의 내가 있다고 가정 해 봅시다 않았다 방법의 (간체) 방법입니다 ... 다른 곳에서는 다시로드하지 않습니다

src/index.html 
src/_header.html 
src/page/index2.Html 

한 작업 은 (자신의 이름이 '_'로 시작)의 HTML 부분 지문을 포함하여 HTML 페이지를 구축

gulp.task('pagesHtml',() => { 
    const SRC = 'src/**/*.html'; 
    const EXCLUDE = '!src/**/_*.html'; 
    return gulp.src([SRC, EXCLUDE], { ignoreInitial: false }) 
     pipe( fileinclude({ prefix: '@@', basepath: co.src })) 
     .pipe( gulp.dest('www/')); 
}); 

한 작업 시작 브라우저 동기화 서버

gulp.task('serveLocal',() => { 
    return browserSync.init({ 
     server:{ baseDir : 'www' }, 
     port: 3000,   
     open: true 
    }); 
}); 

한 작업은 browserSync다시로드라고합니다 (분리, 그것은 내 프로젝트에서 다른 '전문가 작업'으로 불리는)

gulp.task('liveReload',()) => { 
    browserSync.reload(); 
}); 

그리고 하나의 작업 시계 모든 HTML (부분 포함) 전체 페이지를 다시 작성한 다음 다시로드해야합니다.

gulp.task('watch-pagesHtml',() => { 
    const SRC = 'src/**/*.html';   
    return watch(SRC,() => { 
     runSequence('pagesHtml', 'liveReload'); 
    }); 
    return; 
}); 

나는이 같은 runSequence를 시작하여 이러한 작업을 시작 :

gulp.task('default',() => { 
    runSequence('pagesHtml', 'watch-pagesHtml'); 
}); 

언제 index 또는 _header 작업 : 전혀 문제! 변경 사항이 적용되고 빌드되며 찾아보기가 다시로드됩니다.

그러나 내가 pages/index2을 작업하면 변경 내용이 적용되고 작성되지만 브라우저는 다시로드되지 않습니다. (F5가 작동하고 적용된 변경 사항을 보여 주었지만)

내가 뭘 잘못 했니?

답변

0

Browsersync는 비동기 스크립트 태그를 본문에 삽입하여 프로젝트를 시작하고 본문 태그를 검사하여 작동합니다. (브라우저 개발자 도구 사용).

<script async>...</script> (및 browsersyncs stuffs)과 같은 것이 좋지 않은 경우 문제가 있습니다.

코드를 읽었을 때 헤더 파일에 <body> (열린 태그)을 쓰고 다른 바닥 글 파일에 </body> (닫기 태그)을 쓰고 혼동 스럽지만 본문에서 body 태그를 찾지 못했습니다. 다른 html 파일들도 필요하다고 생각했을 때.

브라우저는 예를 들어 원본 HTML 파일에서 HTML 자동 완성 태그의 오류를 수정하려고 "시도"합니다.

문제점에 대한 두 가지 가능한 대답이 있습니다.

1) 브라우저가 헤더 파일의 태그를 자동 완성하고 바닥 글 파일의 태그를 자동 완성하므로 browsersync에 두 개의 본문이 있으므로 페이지를 다시로드하는 데 필요한 비동기 스크립트 태그를 삽입하는 데 문제가 있습니다.(가능한 경우)

2) 브라우저는 HTML에서 body 태그를 찾지 못하므로 브라우저에서 나중에 body 태그를 만들지 만 browsersync는 브라우저가 아닌 html 파일에 스크립트를 삽입합니다.

body 태그가 브라우저가 아닌 자신의 코드에 의해 생성되었는지 확인하십시오.

도움이 되었기를 바랍니다.

+0

이 분석을 위해 당신에게 너무 많은 감사를! 나는 당신이 제안하는 곳을 조사하고 내 문제를 해결할 수 있는지 말해 줄 것이다. :) –

0

약간 늦었지만 누군가가 여전히 해답을 찾고 있다면, 당신은 그런 일 할 수 있습니다

var browserSync = require("browser-sync"); 

browserSync({ 
    proxy: "wordpress.dev", 
    snippetOptions: { 
     ignorePaths: "wp-admin/**" 
    } 
}); 
관련 문제