1

看起来 BrowserSync 脚本被注入到除根 index.html 文件之外的所有文件中（因此，根据需要重新加载所有页面）。

每当我编辑和保存 /index.html 时，CLI 都会输出我期望的内容：

[12:46:40] Starting 'bs-reload'...
[BS] Reloading Browsers...
[12:46:40] Finished 'bs-reload' after 694 μs

…但是加载了根 index.html 文件的浏览器什么也没做。

但是，如果我在浏览器中导航到不同的 html 文件，我会看到 BS 脚本被注入其中，并且对该文件中代码的任何后续调整都会导致自动刷新。

关于为什么 root 的 index.html 文件没有将 BS 脚本注入其中的任何想法？

我的 Gulp 文件：

// *****************************************************************************
// Plugins
// *****************************************************************************

var browserSync = require('browser-sync');
var concat      = require('gulp-concat');
var filter      = require('gulp-filter');
var gulp        = require('gulp');
var htmlReplace = require('gulp-html-replace');
var jsHint      = require('gulp-jshint');
var runSequence = require('run-sequence'); // Unnecessary once Gulp 4 is here.
var sass        = require('gulp-ruby-sass');
var stylish     = require('jshint-stylish');
var uglify      = require('gulp-uglify');




// *****************************************************************************
// Project Configuration
// *****************************************************************************

var config = {
  localUrl   : 'starter.dev:8888/', // This is what you setup in MAMP, etc.
  cssPath    : 'html/lib/css/',
  scssFile   : 'html/lib/scss/all.scss',
  jsPath     : 'html/lib/js/',
  jsProdFile : 'all.min.js',
  jsFiles    : [
    'html/lib/js/**/*.js',
    '!html/lib/js/vendor/**/*',
    '!html/lib/js/all.min.js'
  ],
  imagePath  : 'html/lib/img/**/*', // Currently unused.
  templateFiles : [
    'html/index.+(html|php)',
    'html/_templates/**/*.html',
    'engine/expressionengine/snippets/default_site/**/*.html',
    'engine/expressionengine/templates/default_site/**/*.html'
  ]
};




// *****************************************************************************
// Styles Tasks
// *****************************************************************************

// Compile Scss.
gulp.task('scss', function() {
  return gulp.src(config.scssFile)
    .pipe(sass({style:'compressed', sourcemapPath:'../scss/'}))
    .pipe(gulp.dest(config.cssPath))
    .pipe(filter('**/*.css'))
    .pipe(browserSync.reload({stream:true}));
});




// *****************************************************************************
// JavaScript Tasks
// *****************************************************************************

// Hint non-vendor JS files.
gulp.task('js-hint', function() {
  return gulp.src(config.jsFiles)
    .pipe(jsHint())
    .pipe(jsHint.reporter(stylish));
});

// Concatenate non-vendor JS files into one file, then minify it.
gulp.task('js-concat-uglify', function() {
  return gulp.src(config.jsFiles)
    .pipe(concat(config.jsProdFile))
    .pipe(gulp.dest(config.jsPath))
    .pipe(uglify())
    .pipe(gulp.dest(config.jsPath));
});




// *****************************************************************************
// Template Tasks
// *****************************************************************************

// Remove references to our many, individual JS files and replace them with a
// single reference to the concatenated + minified JS file. Also strip out most
// of the documentation.
gulp.task('prep-templates', function() {
  return gulp.src(config.templateFiles, {base:'./'})
    .pipe(htmlReplace({
      'js': '/lib/js/'+config.jsProdFile,
      'docs': ''
    }))
    .pipe(gulp.dest('./'));
});




// *****************************************************************************
// BrowserSync Tasks
// *****************************************************************************

// Start a server and provide auto refreshing and action synchronization.
gulp.task('browser-sync', function() {
  browserSync({proxy:config.localUrl});
});

// A task that will reload all connected devices, which can be called manually.
gulp.task('bs-reload', function() {
  browserSync.reload();
});




// *****************************************************************************
// Combo Tasks
// *****************************************************************************

gulp.task('default', ['browser-sync'], function() {
  gulp.watch('html/lib/scss/**/*.scss', ['scss']);
  gulp.watch(config.jsFiles, ['js-hint', 'bs-reload']);
  gulp.watch(config.templateFiles, ['bs-reload']);
});

gulp.task('go-prod', function() {
  runSequence('js-concat-uglify', 'prep-templates', 'browser-sync');
});
4

0 回答 0