Question

是否有人成功获得mdcss样式指南以使用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吗？

1 个答案: