如何使用gulp 4通过预定义的任务将css注入browserSync？

Gulp是一个基于流的自动化构建工具，可以帮助开发者优化前端开发流程。通过定义任务，Gulp可以自动执行各种操作，如文件压缩、编译、合并等。在使用Gulp 4版本时，可以通过预定义的任务将CSS注入BrowserSync，实现实时刷新页面的效果。

首先，确保已经安装了Node.js和npm（Node包管理器）。然后，按照以下步骤进行操作：

在项目根目录下创建一个gulpfile.js文件，该文件将包含Gulp的任务定义代码。
在命令行中进入项目根目录，并执行以下命令安装所需的Gulp插件：
在命令行中进入项目根目录，并执行以下命令安装所需的Gulp插件：
这里安装了gulp、gulp-sass和browser-sync插件。
在gulpfile.js文件中引入所需的插件：
在gulpfile.js文件中引入所需的插件：
定义一个任务来编译Sass文件并将CSS注入BrowserSync：
定义一个任务来编译Sass文件并将CSS注入BrowserSync：
这里定义了一个名为sass的任务，使用gulp.src指定了Sass文件的路径，通过sass()插件将Sass文件编译为CSS，然后使用gulp.dest将编译后的CSS文件输出到指定目录，最后使用browserSync.stream()将CSS注入到浏览器中实现实时刷新。
定义一个任务来启动BrowserSync并监视文件变化：
定义一个任务来启动BrowserSync并监视文件变化：
这里定义了一个名为serve的任务，使用browserSync.init启动BrowserSync，并指定了服务器的根目录。然后使用gulp.watch监视Sass文件的变化，并在变化时执行sass任务，使用gulp.watch监视HTML文件的变化，并在变化时刷新页面。
最后，在命令行中执行以下命令启动开发服务器：
最后，在命令行中执行以下命令启动开发服务器：
这将启动BrowserSync，并在浏览器中打开项目页面。每当Sass文件发生变化时，Gulp将自动编译并将CSS注入到浏览器中实现实时刷新。