gulp 动态加载 gulp watch方法 gulp优化CSS和JS Gulp - Live Reload 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文件所做的任何更改都将反映在命令提示符中，并且浏览器会使用更改后的样式自动重新加载。 gulp watch方法 gulp优化CSS和JS
