Question

我正在尝试使用gulp-file-include将/src/includes文件夹中的某些常见部分（如页眉或页脚）与BrowserSync一起包含到项目树中的任何.html页面中，以刷新更改。 / p>

当我从命令行使用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无法观看新文件的后续问题，我对原始答案进行了一些更改。但是您现在应该真正使用IMO的gulp4.0。 Gulp3.9.x所依赖的库在监视新文件，删除文件或重命名文件时存在问题。

您将需要另外两个插件：

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

gulp-watch插件更擅长监视新文件等，但不将“任务”作为参数，而是将函数作为参数，因此这就是我使用运行顺序的原因。 [您可以将您的任务重写为常规函数-但您也可以改用gulp4.0]。

然后使用此'watch'任务：

gulp.task（'watch'，function（）{

  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不能反映对浏览器的更改

1 个答案: