mdcssスタイルガイドはbrowsersyncで動作しますか？

Question

mdcssスタイルガイドをbrowsersyncと連携させることに成功した人はいますか？

この問題は、mdcssが生成するindex.htmlのbodyタグのようです。私が手動で書き込むと、そのページは再ロードされますが、それ以外の場合はページの再読み込みが行われません。

mdcssが実行されるたびにindex.htmlを再作成するので、bodyタグを手動で追加することは長期的な解決策ではありません。

Answer 1

私は積極的に両方を使用しており、完璧に動作します。私はbrowsersyncのサーバポートでそれを実行しています。ちょうどロード時に必要なスクリプトと、必要に応じてリフレッシュする正しいリロードコマンドを注入するだけです。

ここに私のgulpfile.jsから該当するビットです：http://localhost:8080

gulp.task('serve', ['css'],() => { 
    'use strict'; 
    browserSync.init({ 
    port:  8080, 
    server:  './styleguide', 
    notify:  false 
    }); 

    gulp.watch('src/**/*.css', ['css']); 
    gulp.watch('src/**/*.md', ['css']).on('change', browserSync.reload); 
}); 

gulp.task('css',() => { 
    'use strict'; 
    const options = { 
    browsers: ['last 2 versions'] 
    }; 
    const processors = [ 
    stylelint, 
    postcssImport({ glob: true }), 
    apply, 
    simpleVars, 
    customMedia, 
    customSelectors, 
    cssVariables, 
    nested, 
    autoprefixer({ browsers: options.browsers }), 
    mdcss({ 
     theme: mdcssGithub({ 
     title: 'Styleguide', 
     examples: { 
      css:  ['style.css'], 
      bodyjs: ['js/jquery-2.2.3.min.js'] 
     } 
     }), 
     assets: ['js'] 
    }) 
    ]; 
    return gulp.src('./src/*.css') 
    .pipe(sourcemaps.init()) 
    .pipe(postcss(processors)) 
    .pipe(sourcemaps.write('.')) 
    .pipe(gulp.dest('styleguide')) 
    .pipe(browserSync.stream()); 
}); 

gulp.task('default', ['serve']); 

そして、後藤は