2017-07-19 3 views
0

は、コマンドライン(Reloading browsers...)にmessengeを取得し、それdidn'tリロードブラウザ場合は、あなたのindex.php/index.hmtlファイルにHTML & bodyタグを追加する必要がありますBrowsync

を解決しました。

+0

コードを入力することはできますか? #magicshow –

+0

この問題を解決できますか? – trip1e

+0

gulpfile.jsをいっぱい与えることはできますか? –

答えて

0

まず、2つのタスクが必要な理由は、1つのタスクがそれを行うことができる場合です。

gulp.task('style', function() { 
    return gulp.src(styleSRC) 
    /*********** COMPILE ***********/ 
    .pipe(sourcemaps.init()) 
    .pipe(sass({ 
     outputStyle: 'compact' 
     // outputStyle: 'compressed' 
     // outputStyle: 'nested' 
     // outputStyle: 'expanded' 
    }).on('error', sass.logError)) 
    .pipe(sourcemaps.init({ loadMaps: true })) 
    .pipe(autoprefixer(AUTOPREFIXER_BROWSERS)) 
    .pipe(sourcemaps.write('/maps')) 
    .pipe(gulp.dest(styleDEST)) // Sass -> css 
    /*********** MINIFY ***********/ 
    .pipe(cleanCSS({ 
     level: '2', 
     debug: true}, function(details) { 
      console.log(details.name + ': ' + details.stats.originalSize + ' kb'); 
      console.log(details.name + ': ' + details.stats.minifiedSize + ' kb'); 
      console.log(details.name + ': ' + details.stats.timeSpent + ' ms'); 
      console.log(details.name + ': ' + details.stats.efficiency + '%'); 
     })) 
    .pipe(rename({ suffix: '.min' })) // rename to .min 
    .pipe(gulp.dest(styleDEST)) // Publish 
    .pipe(browserSync.stream()) 
    .pipe(notify({ message: 'TASK: "style" Completed! ', onLast: true })); 
}); 

これで問題は解決しました。 Browsersyncは、コンパイルが完了したらCSSについてのみ気にします。gulp.destの後に.stream()に電話してください。

.pipe(browserSync.stream()) 

browserSync.stream()は、ミニマムタスクでのみ使用しますが、スタイルタスクでは使用しません。また、<body>タグが存在する必要があります。

ブラウザ同期は、最初のリクエスト中にタグの直後に非同期スクリプトタグ(<script async>...</script>)を挿入することで機能します。 これが正しく機能するためには、<body>タグがである必要があります。代わりに、スニペットのカスタムルールを使用してsnippetOptions

+0

助けてくれてありがとう!私の問題は次のとおりです。インデックスファイルにhtmlタグとbodyタグがありません。私はh1&h2 :)を持っていますありがとう! – trip1e