環境版本:

• node版本：v12.2.0
• npm版本：6.9.0
• gulp版本： 4.0.2（node的12.0以上版本需要gulp4.0以上版本，不然會有許多不兼容問題）
• gulp-cli ： 2.2.0
• gulp-connect：5.7.0

gulp4.0簡單使用：

gulp4.0與其它低版本的用法有些不一樣，這里不做比較，只介紹部分新用法

npm init 初始化項目，生成 package.json

新建gulpfile.js文件

// 以下代碼會執行在node環境下 const gulp = require( "gulp" ),connect = require('gulp-connect');// 在命令行使用 gulp watch 啟動此任務 gulp.task('watch', function () {// 監聽文件修改，當文件被修改則執行 html 任務gulp.watch('./app/js/*.js', gulp.series('js') );gulp.watch('./app/css/*.css', gulp.series('css'));gulp.watch('./app/html/index.html', gulp.series('html') ); // gulp4.0任務統一使用回調函數，不再支持 ['html'] 這種形式 })gulp.task('html',function(){return gulp.src('./html/*.html').pipe(gulp.dest('dist/html')) // 生成靜態文件.pipe(connect.reload()); // 刷新瀏覽器 }) gulp.task('js',function(){return gulp.src('./app/js/*.js').pipe(connect.reload()); }); gulp.task('css',function(){return gulp.src('./app/css/*.css').pipe(connect.reload()); });gulp.task('webserver', function() {connect.server({root: './app/',livereload: true,// 自動刷新port: 2333}); });// 開啟default任務，管理其他任務 gulp.task('default',gulp.series(gulp.parallel('webserver','watch','html')))

在瀏覽器中訪問：http://localhost:2333/html/ ，編輯index.html文件保存后會發現瀏覽器自動刷新

總結

以上是生活随笔為你收集整理的gulp4.0浏览器自动刷新的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。