为什么我的 gulpfile 只导致零星的 css 注入？答案

【问题标题】：Why is my gulpfile causing only a sporadic css inject?为什么我的 gulpfile 只导致零星的 css 注入？
【发布时间】：2017-01-28 15:32:41
【问题描述】：

以下 gulp 任务适用于某些 css 文件，但不适用于其他文件。我的全局样式在保存时根据需要注入，但我的 roadmap.css 文件不是（需要硬刷新）。

我该如何调试/解决这个问题？

var settings = {
...
  sass_files: "applications/**/*.sass",
  css_files: "applications/**/*.css"
...

  }

var public_dir = "dist/"

gulp.task('build-sass', function() {
  return gulp.src(settings.sass_files)
    .pipe(changed(public_dir, { extension: '.css' }))
    .pipe(sass({
      errLogToConsole: true,
      includePaths: [
        "applications/_shared_assets/vendor/bootstrap-sass",
        "applications/_shared_assets/vendor/bootstrap-sass/assets/stylesheets",
        "applications/_shared_assets/vendor/bootstrap-sass/bootstrap-sass-custom",
        "applications/_shared_assets/vendor/bourbon/app/assets/stylesheets",
        "applications/_shared_assets/features",
        "applications/_shared_assets/css"
      ]
    })
  )
    .pipe(prefix(['last 15 versions', '> 1%', 'ie 8', 'ie 7'], { cascade: true }))
    .pipe(gulp.dest(public_dir))
    .pipe(browserSync.reload({ stream: true }));
});

gulp.task('build-css', ['build-sass'], function() {
  return gulp.src(settings.css_files)
    .pipe(gulp.dest(public_dir))
});

gulp.task('css-rebuild', ['build-css'], function() {
});


gulp.task('watch', ['browser-sync'], function() {
...
  gulp.watch(settings.sass_files, ['css-rebuild']);
...
});

已正确注入全局样式但未正确注入路线图文件的页面。

link(rel="stylesheet", href="portfolioroadmap.css")
link(rel="stylesheet", href="../_shared_assets/css/global_styles.css")

这些都是由 build-sass 生成的。我很想得到任何帮助，已经坚持了好几个小时了。

【问题讨论】：

标签： sass gulp browser-sync gulp-browser-sync

【解决方案1】：

供以后参考，虽然浏览器对大小写不敏感：gulp 是。

确保 .html 中的引用与文件系统中的文件名大小写相同（在我的例子中是portfolioroadmap.css，而不是PortfolioRoadmap.css）。

【讨论】：