mdcss 样式指南可以与 browsersync 一起使用吗？

Question

有人成功获得 mdcss style guide to work with browsersync 吗？

问题似乎是 mdcss 生成的 index.html 中的 body 标签。如果我手动写一个，页面会在应该的时候重新加载，否则我不会重新加载任何页面。

mdcss 每次运行时都会重新创建 index.html，因此手动添加 body 标签不是长期解决方案。

Answer 1

我积极地将两者结合使用，并且效果完美。我运行它在 browsersync 的服务器端口上，它只是注入加载所需的脚本，并使用正确的重新加载命令，它只是根据需要刷新。

这是我 gulpfile.js 的相关内容：

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

然后转到http://localhost:8080

mdcss 样式指南可以与 browsersync 一起使用吗？

Can mdcss style guide work with browsersync?

html

css

markdown

reload

browser-sync