看起来BrowserSync脚本被注入所有文件(因此,根据需要重新加载所有页面)除了根index.html文件。
每当我编辑并保存/index.html时,CLI都会输出我期望的内容:
[12:46:40] Starting 'bs-reload'...
[BS] Reloading Browsers...
[12:46:40] Finished 'bs-reload' after 694 μs
...但是加载了root index.html文件的浏览器什么也没做。
但是,如果我在浏览器中导航到另一个html文件,我会看到BS脚本被注入其中,并且对该文件中的代码的任何后续调整都会< / em>导致自动刷新。
关于为什么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');
});