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

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

相关推荐