Gulp 实时重新加载基础教程文档
收录于 2023-04-20 00:10:05 · بالعربية · English · Español · हिंदीName · 日本語 · Русский язык · 中文繁體
Live Reload 指定文件系统中的更改。
BrowserSync 用于监视 CSS 目录中的所有 HTML 和 CSS 文件,并在文件更改时在所有浏览器中实时重新加载页面。 BrowserSync 通过在多个设备上同步 URL、交互和代码更改来加快工作流程。
安装 BrowserSync 插件
BrowserSync 插件提供跨浏览器 CSS 注入,可以使用以下命令安装。
npm install browser-sync--save-dev
配置 BrowserSync 插件
要使用 BrowserSync 插件,您需要在配置文件中写入依赖项,如以下命令所示。
var browserSync = require('browser-sync').create();
您需要为
BrowserSync 创建任务以使用 Gulp 与服务器一起工作。由于您正在运行服务器,因此您需要向 BrowserSync 发送有关服务器根目录的信息。在这里,我们使用基本目录作为"build"。
gulp.task('browserSync', function() { browserSync.init({ server: { baseDir: 'build' }, }) })
您还可以使用以下 CSS 文件任务将新样式注入浏览器。
gulp.task('styles', function() { gulp.src(['src/styles/*.css']) .pipe(concat('style.css')) .pipe(autoprefix('last 2 versions')) .pipe(minifyCSS()) .pipe(gulp.dest('build/styles/')) .pipe(browserSync.reload({ stream: true })) });
在为 BrowserSync 创建任务之前,您需要使用包管理器安装插件,并按照本章节中的定义在配置文件中写入依赖项。
配置完成后,同时运行 BrowserSync 和 watchTask 以实现实时重载效果。我们将通过添加
browserSynctask 和 watchTask 来一起运行它们,而不是分别运行两个命令行,如下面的代码所示。
gulp.task('default', ['browserSync', 'styles'], function (){ gulp.watch('src/styles/*.css', ['styles']); });
在你的项目目录中运行以下命令来执行上述组合任务。
gulp
使用上述命令运行任务后,您将在命令提示符中得到以下结果。
C:\project>gulp [13:01:39] Using gulpfile C:\project\gulpfile.js [13:01:39] Starting 'browserSync'... [13:01:39] Finished 'browserSync' after 20 ms [13:01:39] Starting 'styles'... [13:01:39] Finished 'styles' after 21 ms [13:01:39] Starting 'default'... [13:01:39] Finished 'default' after 15 ms [BS] 1 file changed (style.css) [BS] Access URLs: ------------------------------------ Local: http://localhost:3000 External: http://192.168.1.4:3000 ------------------------------------ UI: http://localhost:3001 UI External: http://192.168.1.4:3001 ------------------------------------ [BS] Serving files from: build
它将打开带有 URL
http://localhost:3000/ 的浏览器窗口。对 CSS 文件所做的任何更改都将反映在命令提示符中,并且浏览器会使用更改后的样式自动重新加载。