gulp-file-include 和 BrowserSync 不反映对浏览器的更改

Question

我正在尝试使用 gulp-file-include for include some common sections like header or footer from /src/includes folder into any .html pages in a project tree along with BrowserSync 刷新更改。

当我从命令行使用 gulp 命令时，它会毫无问题地将所有文件编译到 /dist 文件夹中（我希望如此）。但是之后，如果我从 /src/index.html 更改任何内容，它不会反映对浏览器的更改或将更改写入 /dist/index.html.

我想不通到底是哪里出了问题。你可以从this Git repo看到这个项目这是我的gulpfile.js内容：

var gulp = require('gulp');
var autoprefixer = require('gulp-autoprefixer');
var plumber = require('gulp-plumber');
var gutil = require('gulp-util');
var concat = require('gulp-concat');
var cleanCSS = require('gulp-clean-css');
var rename = require("gulp-rename");
var sass = require('gulp-sass');
var uglify = require('gulp-uglify');
var browserSync = require('browser-sync').create();
var sourcemaps  = require("gulp-sourcemaps");
var fileinclude = require("gulp-file-include");

// File Paths
var CSS_PATH = { src: "./src/sass/*.scss", dist: "./dist/css/"};
var JS_PATH = { src: "./src/js/*.js", dist: "./dist/js/"};
var HTML_PATH = { src: "./src/*.html", dist: "./dist/html/*.html"};
var INCLUDES_PATH = "./src/includes/**/*.html";
var JQUERY_PATH = "node_modules/jquery/dist/jquery.min.js";

// Error Handling
var gulp_src = gulp.src;
gulp.src = function() {
  return gulp_src.apply(gulp, arguments)
    .pipe(plumber(function(error) {
      // Output an error message
      gutil.log(gutil.colors.red('Error (' + error.plugin + '): ' + error.message));
      // emit the end event, to properly end the task
      this.emit('end');
    })
  );
};

// Styles
gulp.task('styles', function() {
  return gulp.src(CSS_PATH["src"])
    .pipe(sass())
    .pipe(autoprefixer('last 2 versions'))
    .pipe(sourcemaps.init())
    .pipe(gulp.dest(CSS_PATH["dist"]))
    .pipe(cleanCSS())
    .pipe(sourcemaps.write())
    .pipe(concat("main.css", {newLine: ""}))
    .pipe(gulp.dest(CSS_PATH["dist"]))
    .pipe(browserSync.reload({ stream: true }))
});

// Scripts
gulp.task('scripts', function() {
  return gulp.src([JS_PATH["src"], JQUERY_PATH])
    .pipe(uglify())
    .pipe(concat('main.min.js'))
    .pipe(gulp.dest(JS_PATH["dist"]));
});

// File Include
gulp.task('fileinclude', function() {
  return gulp.src(HTML_PATH["src"])
    .pipe(fileinclude({
      prefix: '@@',
      basepath: 'src/includes'
    }))
    .pipe(gulp.dest('dist'));
});

// BrowserSync
gulp.task('browserSync', function() {
  browserSync.init({
    server: {
      baseDir: 'dist/'
    },
    open: false,
    browser: "Google Chrome",
    notify: true,
    notify: {
        styles: {
            top: 'auto',
            bottom: '0',
            borderRadius: '4px 0 0 0',
            opacity: .9
        }
    },
    snippetOptions: {
      rule: {
        match: /<\/body>/i,
        fn: function (snippet, match) {
          return snippet + match;
        }
      }
    }
  })
})

// Watch task
gulp.task('watch', ['fileinclude', 'browserSync'], function() {
  gulp.watch(CSS_PATH["src"], ['styles']);
  gulp.watch(JS_PATH["src"], ['scripts']);
  gulp.watch(INCLUDES_PATH, ['fileinclude']);
  gulp.watch([HTML_PATH["src"], HTML_PATH["src"]], browserSync.reload);
});

gulp.task('default', ['fileinclude', 'styles', 'scripts', 'browserSync', 'watch' ]);

Answer 1

我好像可以用了。我在 'scripts' 和 'fileinclude' 任务的末尾添加了以下内容：

.pipe(browserSync.reload({ stream: true }))


//  File Include
gulp.task('fileinclude', function() {
  return gulp.src(HTML_PATH.src)
    .pipe(fileinclude({
      prefix: '@@',
      basepath: 'src/includes'
    }))
    .pipe(gulp.dest('dist'))
    .pipe(browserSync.reload({ stream: true }))
});

// Scripts
gulp.task('scripts', function() {
  // return gulp.src([JS_PATH["src"], JQUERY_PATH])
  return gulp.src(JS_PATH.src)
    .pipe(uglify())
    .pipe(concat('main.min.js'))
    .pipe(gulp.dest(JS_PATH.dist))
    .pipe(browserSync.reload({ stream: true }))
});

以便在对这两个组进行任何更改后重新加载浏览器。我将 'watch' 任务更改为：

// Watch task

// gulp.task('watch', ['fileinclude', 'browserSync'], function() {
//  'browserSync' is already running from 'default' task so remove it from above
//  'fileinclude' is called below only where it is needed, not for changes to js/scss files

gulp.task('watch',  function() {
  gulp.watch(CSS_PATH.src, ['styles']);
  gulp.watch(JS_PATH.src, ['scripts']);
  gulp.watch(INCLUDES_PATH, ['fileinclude']);

  // gulp.watch([HTML_PATH["src"], HTML_PATH["src"]], browserSync.reload);
  // the above looks for changes to the source and immediately reloads,
  //    before any changes are made to the dist/html

  // Watch for changes in the html src and run 'fileinclude'
  //  browserSync reload moved to end of 'fileinclude'

  gulp.watch([HTML_PATH.src], ['fileinclude']);
});

编辑：为了处理后续关于gulp无法观看新文件的问题，我对原来的答案做了一些修改。但是你现在真的应该使用 gulp4.0 IMO。 Gulp3.9.x 依赖的库在监视新文件、删除文件或重命名文件时存在问题。

您还需要两个插件：

var watch = require("gulp-watch");
var runSequence = require("run-sequence");

gulp-watch 插件更擅长监视新文件等，但不将 'tasks' 作为参数，而是将函数作为参数，这就是我使用 [= 的原因40=]-序列。 [您可以将您的任务重写为常规函数 - 但您也可以转移到 gulp4.0]。

然后使用这个'watch'任务：

gulp.task('watch',函数(){

  watch(CSS_PATH.src, function () {
    runSequence('styles');
  });
  watch(JS_PATH.src, function () {
    runSequence('scripts');
  });
  watch(INCLUDES_PATH,  function () {
    runSequence('fileinclude');
  });
  watch([HTML_PATH.src], function () {
    runSequence('fileinclude');
  });
});

gulp-file-include 和 BrowserSync 不反映对浏览器的更改

gulp-file-include and BrowserSync Doesn't Reflect the Changes to Browser

gulp

gulp-browser-sync