使用gulp插件来自动刷新页面。

http://itakeo.com/blog/2016/05/19/gulpreload/?none=123

使用gulp插件来自动刷新页面。再也不用修改一次,按一下F5了。

首选通过npm install gulp安装gulp。

在安装npm install gulp-connect。自动刷新,主要是通过这个插件来完成的。

最后配置gulpfile.js,内容如下:

var gulp = require('gulp'),
    connect = require('gulp-connect'); 

//使用connect启动一个Web服务器
gulp.task('connect', function () {
    connect.server({
        host : '192.168.1.172', //地址,可不写,不写的话,默认localhost
        port : 3000, //端口号,可不写,默认8000
        root: './', //当前项目主目录
        livereload: true //自动刷新
    });
});
gulp.task('html', function () {
    gulp.src('./*.html')
    .pipe(connect.reload());
});

gulp.task('watch', function () {
    gulp.watch('./css/*.css', ['html']); //监控css文件
    gulp.watch('./js/*.js', ['html']);  //监控js文件
    gulp.watch(['./*.html'], ['html']);  //监控html文件
});
//执行gulp server开启服务器
gulp.task('server', ['connect', 'watch']);

接着使用gulp server开启服务器,浏览器打开地址,就这么简单。

需要注意的是,如果有添加新文件,比如新的js文件,可能需要重新启动服务。

posted @ 2016-05-19 15:45  黑客PK  阅读(426)  评论(0编辑  收藏  举报