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

【问题标题】：Can mdcss style guide work with browsersync?mdcss 样式指南可以与 browsersync 一起使用吗？
【发布时间】：2016-09-06 01:15:32
【问题描述】：

有没有人成功地将mdcss 风格指南与browsersync 一起使用？

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

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

【问题讨论】：

标签： html css markdown reload browser-sync

【解决方案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

【讨论】：