TL;博士
我确实相信您的答案是您如何查看文件，然后调用 load。所以基本上，如果你使用的是 sass 或更少，或者 typescript 等。你需要有你的 browsersync 任务：
- 首先观察这些文件，然后执行它们的任务以转换（编译）到您的 .css、.js 等...
- 一旦它检测到 .css、.js、.html 文件中的更改（这将在它们的转译器任务将它们转换为这些文件之后发生），让它重新加载浏览器。
但无论您是否使用这些，您仍然会查看所有文件夹位置和文件扩展名。这是通过将您正在观察的所有位置放入一个数组中并观察文件数组来完成的。
注意： Browsersync.watch()与 gulp 的手表分开。使用 browsersyncs watch 函数而不是 gulp 将看到新文件，而 gulps watch 命令则看不到。请参见下面的示例。
我为提供如此不必要的冗长响应而道歉，但我使用 gulp-cli (gulp 4) w/多个任务文件和外部配置），并且有一段时间没有使用 gulp 3，所以我会尝试将它移植到吞咽 3 的单个任务。
一些例子
我提供了这两个版本，因为 gulp 4 可能很快就会发布。我将复制并粘贴我的，并稍作修改。这意味着我将使用多任务文件版本。
所以这里是我将提供的两个版本的概述：
- 我使用的是：gulp 4 w/多个任务文件和一个外部配置
- 吞咽文件
- 外部任务
- 外部配置
- 我还将包含一个示例 sass 和 typescript 配置，以显示与 browser-sync 的 watch 任务的 globbing
- 我将尝试移植到 gulp 3 的带有浏览器同步任务的 gulpfile
1. Gulp 4 w/多个任务文件和外部配置
我将在每个文件中提供一些注释，就像我在每个文件中一样。如果有兴趣，我会提供安装说明，就像我的每个人一样。这主要是出于复制和粘贴的原因。而且我将提供 sass 和 typescript 的配置，因为它超出了答案的范围，我不会提供任务文件。
以下是 gulp 文件夹结构的简要概述，以帮助澄清：
| -- Project-Folder/
| | -- gulp/
| | | -- tasks/
| | | ' -- browser-sync.js
| | ' -- config.js
| ' -- gulpfile.js
吞咽文件
gulpfile.js
// =========================================================
// Project: PROJECT-TITLE
//
// NOTES: Using Gulp 4, in order to use, please uninstall gulp 3 globally and locally, and install gulp 4 both globally and locally
// Dependencies: ---
// Global: npm install -g gulpjs/gulp.git#4.0 browser-sync
// Local: npm install --save-dev gulpjs/gulp.git#4.0 browser-sync gulp-load-plugins
// =========================================================
// ------------------------------------------------ Requires
var gulp = require('gulp'),
config = require('./gulp/config'),
plugins = require('gulp-load-plugins')();
// --------------------function to get tasks from gulp/tasks
function getTask(task) {
return require('./gulp/tasks/' + task)(gulp, plugins);
}
// ---------------------------------------------- Gulp Tasks
gulp.task('sass' , getTask( 'sass' ));
gulp.task('ts' , getTask( 'typescript' ));
gulp.task('sync' , getTask( 'browsersync' ));
// --------------------------------------- Default Gulp Task
gulp.task('default', gulp.series(
gulp.parallel('sass', 'ts'), 'sync')
);
外部任务文件
浏览器-sync.js
// =========================================================
// Gulp Task: browsersync
// NOTE: Using gulp v4
// Description: Sync sass, typescript, html, and browser
// using an external config, or modify src and config options
// npm install --save-dev browser-sync gulp-typescript gulpjs/gulp.git#4.0
// Options: node-sass gulp-sass || gulp-ruby-sass
// =========================================================
var config = require( '../config.js' );
var browserSync = require( 'browser-sync' ).create();
module.exports = function( gulp, plugins ) {
return function () {
var stream =
// -------------------------------------------- Start Task
browserSync.init( config.browsersync.opts );
browserSync.watch( config.sass.src, gulp.series( 'sass' ) );
browserSync.watch( config.typescript.src, gulp.series( 'ts' ) );
browserSync.watch( config.browsersync.watch ).on( 'change', browserSync.reload );
// ---------------------------------------------- End Task
return stream;
};
};
外部配置
注意：如果这看起来没有必要，这些配置很容易添加到任务文件中。我只是提供，以便我可以轻松地从我自己的项目中复制和粘贴一些任务。
// =========================================================
// Project: PROJECT-TITLE
// =========================================================
// ------------------------------------------ Export Configs
module.exports = {
production: false,
// --------------------------------------------- browsersync
browsersync: {
opts: {
server: './src/',
// proxy: 'localhost:3000',
port: 8000
},
watch: [
'./src/assets/styles/css/**/*.css',
'./src/assets/scripts/js/**/*.js',
'./src/**/*.html'
]
},
// ---------------------------------------------------- sass
sass: {
src: [
"./src/assets/styles/sass/**/*.{scss,sass}"
],
opts: { },
outputName: 'main.css',
dest: './src/assets/styles/css/'
},
// ---------------------------------------------- typescript
typescript: {
src: [
'./src/assets/scripts/ts/**/*.ts'
],
dest: './src/assets/scripts/js',
opts: {
noImplicitAny: true,
}
}
}
吞咽 3 版本
注意：在 config 部分，我只会将 sass 和 typescript src 文件夹与扩展名放在一起，其余部分留空，因为它们与本示例无关。gulpfile.js
// =========================================================
// Project: PROJECT-TITLE
//
// NOTES: Using Gulp 4, in order to use, please uninstall gulp 3 globally and locally, and install gulp 4 both globally and locally
// Dependencies: ---
// Global: npm install -g gulpjs/gulp.git#4.0 browser-sync
// Local: npm install --save-dev gulpjs/gulp.git#4.0 browser-sync gulp-load-plugins
// =========================================================
// ------------------------------------------------ Requires
var gulp = require( 'gulp' ),
sass = require( 'gulp-sass' ),
ts = require( 'gulp-typescript' )
browsersync = require( 'browser-sync' ).create();
// -------------------------------------------------- Config
var config = {
browsersync = {
opts: {
server: './src/',
// proxy: 'localhost:3000',
port: 8000
},
watch: [
'./src/assets/styles/css/**/*.css',
'./src/assets/scripts/js/**/*.js',
'./src/**/*.html'
]
},
sass = { src: './src/assets/styles/sass/**/*.{scss,sass}', ... },
ts = { src: './src/assets/scripts/ts/**/*.ts', ... }
}
// ---------------------------------------------- Gulp Tasks
gulp.task( 'sass', function() {
// task code here
});
gulp.task( 'ts', function() {
// task code here
});
gulp.task('browsersync', [ 'sass', 'ts' ], function() {
browserSync.init( config.browsersync.opts );
// Transpile your preprocessors to their .css, .js, .html versions first
browserSync.watch( config.sass.src, [ 'sass' ] );
browserSync.watch( config.typescript.src, [ 'ts' ] );
// Then under watch, watch all of the locations in an array glob
// such as in the config object at the top of this file.
// Once the preprocessors change to their .css, .js, .html
// counterparts, that will trigger the reload
browserSync.watch( config.browsersync.watch ).on( 'change', browserSync.reload );
});
// --------------------------------------- Default Gulp Task
gulp.task( 'default', [ 'browsersync' ] );
再次，对于非常冗长而详细的回复感到抱歉。只是为了清楚起见。我希望它对您和将来的其他人有所帮助。