gulp4.0浏览器自动刷新

环境版本:

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浏览器自动刷新相关推荐

Webpack 2 视频教程 007 - 配置 WDS 进行浏览器自动刷新
原文发表于我的技术博客这是我免费发布的高质量超清「Webpack 2 视频教程」. Webpack 作为目前前端开发必备的框架,Webpack 发布了 2.0 版本,此视频就是基于 2.0 的版本讲 ...
修改文件后浏览器自动刷新解决方案
为什么要找这样的一个方法? 工作场景中发现的需求,都要找办法去解决. 我们在双屏开发的时候,经常是在Mac屏幕上写代码,然后在扩展屏幕上放着浏览器. 一般写几行代码,就会去刷新一下浏览器,看看代码运行 ...
webpack配置---设置快捷打包和浏览器自动刷新
1.设置快捷打包找到package.json中scripts 之后再输入命令npm run build 2.设置浏览器自动刷新要先安装html-webpack-plugin这个插件再配置 3.将c ...
HTML运行到浏览器自动刷新,web前端开发之热加载—liveReload（浏览器自动刷新）...
今天主要写一下,如何配置,保存前端代码后,浏览器自动刷新的功能,双屏操作,真的会方便很多,对于前端开发来说,一边写样式,一边看效果,爽翻~ 图片发自简书App 一.开发环境 1.电脑系统:mac 2. ...
Safari浏览器自动刷新页面插件Auto Refresh
Safari浏览器自动刷新页面插件Auto Refresh https://extensions.apple.com/details/?id=com.agriffindesign.autorefre ...
gulp-connect浏览器自动刷新
LiveReload可以理解成即时刷新,在前端开发中,在编写或调试html/js/css代码后需要从编辑器切换到浏览器,再刷新浏览器才能看到页面变化,这种频繁的操作在一定程度上影响了工作效率,而Liv ...
十行代码实现浏览器自动刷新
需求:实现一个程序,让浏览器每秒钟自动刷新一次,并显示当前的时间戳核心思路: 通过HTTP响应报头中的Refresh字段,可以控制浏览器自动刷新的时机通过 Date类的getTime方法可以获取到 ...
360浏览器自动刷新选项设置方法
360浏览器自动刷新选项设置方法 360浏览器不安装插件自动刷新怎么设置?我们使用浏览器在游览器贴吧的时候,经常会不同的按"Ctrl+R"或者是"F5"来刷新页 ...
vscode保存代码，浏览器自动刷新页面
一.Live Server 之前挺好用的,但是今天发现Live Server可以运行到浏览器,但是保存代码之后不能自动刷新浏览器了.经过查资料,试了以下方法: 前提:在文件夹中运行 1.将vscode ...

gulp4.0浏览器自动刷新

环境版本:

gulp4.0简单使用：

gulp4.0浏览器自动刷新相关推荐

最新文章

热门文章