我目前正在使用GulpJS关注John Papa关于JavaScript Build Automation的课程。目前，我尝试使用browser-sync设置gulp-nodemon以保持浏览器同步。这是我为我的开发构建服务的一项任务：
$(document).ready(function () {
var frame = $('frame');
frame.load(function () {
var doc = $(frame[3].contentWindow.document);
$('table',doc).tablesorter({
widgets: ["zebra", "filter"]
});
});
});
有趣的部分是函数gulp.task('serve-dev', ['inject'], function () {
var isDev = true;
var nodeOptions = {
script: config.settings.node.server,
delayTime: 1,
env: {
'PORT': port,
'NODE_ENV': isDev ? 'dev' : 'build'
},
watch: [config.server]
};
return $.nodemon(nodeOptions)
.on('restart', ['vet'], function (event) {
util.log('[nodemon] restarted');
})
.on('start', function () {
util.log('[nodemon] started');
startBrowserSync();
})
.on('crash', function () {
util.log('[nodemon] crashed', 'red');
})
.on('exit', function () {
util.log('[nodemon] exited cleanly');
});
});
：
startBrowserSync()正如您在function startBrowserSync() {
if (browserSync.active) {
return;
}
util.log('[browser-sync] Starting on port ' + port);
gulp
.watch([config.sass], ['styles'])
.on('change', function (event) {
util.onChange(event);
});
var options = {
proxy: 'localhost:' + port,
port: 3000,
files: [
config.client + '**/*.*',
'!' + config.sass,
config.tmp + '**/*.css'
],
ghostMode: {
clicks: true,
location: false,
forms: true,
scroll: true
},
injectChanges: true,
logFileChanges: true,
logLevel: 'debug',
logPrefix: 'bsp',
notify: true,
reloadDelay: 1000
};
browserSync(options);
}
选项中看到的，我想要查看除files文件之外的客户端文件夹中的所有文件，并明确地在我的*.scss目录中查看CSS文件。这就是John Papa在他的课程中做到这一点的方式。但是，每次我在.tmp文件中更改某些内容时，都会重新加载整个页面。这不是预期的行为，因为我将*.scss设置为injectChanges这意味着注入CSS而不是重新加载整个页面。问题是true不排除文件被监视。这有什么问题？
!我已经查看了BrowserSync here和here的文档，但即使我使用var client = './src/client/';
var config = {
[...]
sass: client + 'styles/**/*.scss',
[...]
}
属性并忽略文件，它也无效。
Anoher问题是watchOptions无法正常工作。我将变量声明为config.tmp + '**/*.css'。不知何故BrowserSync有var tmp = './.tmp/';的问题。如果我将其更改为.tmp，则只有它有效。但是，tmp适用于所有其他gulp任务，例如.tmp任务：
styles这是什么问题？有什么想法吗？
编辑：由于我使用的是BrowserSync 2.7.1，我还尝试了通过在模块导出上调用gulp.task('styles', ['clean-styles'], function () {
util.log('Compiling SCSS to CSS');
if (production) {
config.settings.sass.outputStyle = 'compressed';
}
return gulp
.src(config.sass)
.pipe($.plumber({
errorHandler: util.onError
}))
.pipe($.sass(config.settings.sass))
.pipe($.autoprefixer({
browsers: [
'last 2 versions',
'> 5%'
]
}))
.pipe(gulp.dest(config.tmp));
});
来创建browserSync实例的推荐方法。此外，我更改了BrowserSync调用，如this博文中所述：
create()我从options对象中删除了 browserSync.init([
config.client + '**/*.*',
'!' + config.sass,
config.tmp + '**/*.css'
], options);
属性，并将它们作为数组传递到files函数中。仍然不会忽略init()文件，因此即使样式只有变化，也会重新加载整个页面。
答案 0 :(得分：4)
我找到了解决问题的方法。由于我的路径声明，它实际上崩溃了。这就是我之前所拥有的：
var client = './src/client/';
var clientApp = client + 'app/';
var server = './src/server/';
var bower = './bower_components/';
var tmp = './.tmp/';
正如您所看到的，每个路径都以./开头，该.\仅适用于非Windows计算机，因为Windows使用var client = 'src/client/';
var clientApp = client + 'app/';
var server = 'src/server/';
var bower = 'bower_components/';
var tmp = '.tmp/';
作为当前工作目录的命令。也许是BrowserSync没有正确转换它，但对我来说，如果我按如下方式改变它，它的工作原理很完美：
./我从路径中删除了所有var files = isDev ? [
config.client + '**/*.*',
'!' + config.sass,
config.tmp + '**/*.css'
] : [];
browserSync.init(files, options);
，并且还改变了我按照推荐的方式启动BrowserSync的方式，正如我在问题编辑中提到的那样，进行了次要的重构：
{{1}}
我偶然发现的一些网站给了我测试结果的线索：
如果有人能更好地解决我的问题，请随时添加我的帖子。
答案 1 :(得分：0)
如果其他人遇到我遇到的同样问题，我可以将文件排除的唯一方法就是删除文件路径中的./。举个例子，我不得不将./config/*.less更改为config/*.less，然后就可以了。
答案 2 :(得分：0)
来自browserSync文档：
// Compile sass into CSS & auto-inject into browsers
gulp.task('sass', function() {
return gulp.src("app/scss/*.scss")
.pipe(sass())
.pipe(gulp.dest("app/css"))
.pipe(browserSync.stream());
});
所以在John Papa课程中，我通过将我的样式任务更改为以下内容来实现它：
gulp.task('styles', ['clean-styles'], function() {
log('Compiling Less --> CSS');
return gulp
.src(config.less)
.pipe($.less())
.on('error', errorLogger)
.pipe($.autoprefixer({browsers: ['last 2 version', '> 5%']}))
.pipe(gulp.dest(config.temp))
.pipe(browserSync.stream());
});