gulp如何保存后自动刷新？看这里就够了

Zhuxy 发布于2019-08-01 16:25 / 2704人阅读

摘要：用我的话说这玩意就是可以在你本地启动一个服务，然后当我们在源文件中保存的代码，那么浏览器就会自动刷新，不用每次我们还得切换到浏览器手动刷新，如果你是双显办公的，那么这滋味叫一个爽字了得。

gulp

使用gulp有段时间，之前因为工作比较忙，一直沉浸在webpack构建的项目中不能自拔，哎。。。说多了都是泪，终于有点时间了，可以添加这个功能并和大家分享了，觉得好的话请点个赞，如果。。。。毕竟入行时间不长，大神请见谅

如果没有gulp的使用经验的朋友可以看看我的这篇文章gulp工具使用，大白话讲解

想要gulp保存自动刷新需要什么？

答：需要插件，需要gulp-connect这个插件，插件的详细介绍大家可以上npm上搜索一下（只要你不嫌弃）。用我的话说这玩意就是可以在你本地启动一个服务，然后当我们在源文件中保存的代码，那么浏览器就会自动刷新，不用每次我们还得切换到浏览器手动刷新，如果你是双显办公的，那么这滋味叫一个爽字了得。

上代码

var connect = require("gulp-connect");  //首先需要在gukpfile.js中require这个插件，不要忘记了在项目中npm install

//这是gulp-connect插件的使用方法
/*
*port端口号
*livereload的值如果是false的话就是关闭实时更新
*/
gulp.task("connect", function () {
    connect.server({
        port:"3333",
        livereload: true
    });
});
gulp.task("default", ["connect", "watch"]);  //看到watch大家应该能猜到了，就是开启监听的意思

就这样？那你可就错了

其实单单这样写还没有结束，因为你还没有告诉gulp你要将这个刷新在什么地方执行，例如

gulp.task("scripts",function(){
    gulp.src([paths.src_js])
    .pipe(babel({
        presets:["es2015"]
    }))
    .pipe(gulp.dest(paths.dist_js)) //输出到指定文件夹
    .pipe(connect.reload())  //自动刷新
    .pipe(notify({ message: "Scripts is OK" })) //提醒任务完成
)}
/*
*例如
*这是我的一个script任务，大家一定要记住在任务处理完后加上.pipe(connect.reload())
*/

当你配置好了文件之后就使用命令 gulp 就Ok了，这是就会启动一个localhost:3333的服务，这是你在进入你的编译后的文件目录例如localhost:3333/dist/index.html,这时候你修改了样式文件或者JS文件等浏览器就会实时刷新。

这是还有一个坑，就是这个实时刷新对启动服务后新创建的文件是无效的。怎么理解呢？其实就是这样，比如我现在有一个JS的文件夹，里面只有一个index.js的文件，然后我输入命令gulp启动了服务，启动服务之后我现在又创建了一个sub.js文件，那么现在这个sub.js文件经行了修改是不编译的,除非你停掉当前的服务，然后重新启动一下。我也想解决这个问题，但是到目前为之还没有好的解决方案，如果有知道的大神，也可以告诉我一下，小弟在此谢谢了！

鄙人口才不太好，也不知道大家到底有没有看明白。没关系
github的项目地址，我已经配置好了，而且在gulpfile.js中写了很多的注释，有兴趣可以看看，觉得不错的话请点一个START（这个项目dist是编译过后的文件,src是源文件），如果有问题的话也可以issues

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/50510.html

gulp如何保存后自动刷新？看这里就够了

摘要：用我的话说这玩意就是可以在你本地启动一个服务，然后当我们在源文件中保存的代码，那么浏览器就会自动刷新，不用每次我们还得切换到浏览器手动刷新，如果你是双显办公的，那么这滋味叫一个爽字了得。 gulp 使用gulp有段时间，之前因为工作比较忙，一直沉浸在webpack构建的项目中不能自拔，哎。。。说多了都是泪，终于有点时间了，可以添加这个功能并和大家分享了，觉得好的话请点个赞，如果。。。。...

DobbyKim 2019-08-20 14:50 评论0 收藏0
浏览器缓存看这一篇就够了

摘要：浏览器缓存作为性能优化的重要一环，对于前端而言，重要性不言而喻。根据浏览器发送的修改时间和服务端的修改时间进行比对，一致的话代表资源没有改变，服务端返回正文为空的响应，让浏览器中缓存中读取资源，这就大大减小了请求的消耗。浏览器缓存作为性能优化的重要一环，对于前端而言，重要性不言而喻。以前总是一知半解的，所以这次好好整理总结了一下。 1、缓存机制首先我们来总体感知一下它的匹配流程，如...

tinysun1234 2019-08-06 13:42 评论0 收藏0
前端模块化和构建工具

摘要：以前一直对前端构建工具的理解不深，经过几天的研究特意来总结一下，第一次写博客，有写错的请多多见谅，该文章我也从其他博客拷了一些内容，如果有冒犯之处，请指出。强大的设计使得它更像是一个构建平台，而不只是一个打包工具。以前一直对前端构建工具的理解不深，经过几天的研究特意来总结一下，第一次写博客，有写错的请多多见谅，该文章我也从其他博客拷了一些内容，如果有冒犯之处，请指出。如今，网页不再...

ad6623 2019-08-20 18:37 评论0 收藏0
webpack 3 零基础入门教程 #1 - 介绍

摘要：所以它在某些程度上，跟的功能有些相同。严格上讲，模块化不是他强调的东西，他旨在规范前端开发流程。更是明显强调模块化开发，而那些文件压缩合并预处理等功能，不过是他附带的功能。 1. webpack 是什么? showImg(https://segmentfault.com/img/remote/1460000012293461); 先来说一下 webpack 是什么。 webpack 的...

张红新 2019-08-21 17:55 评论0 收藏0