使用gulp-connect实现web服务器

安装插件
安装gulp-connect插件，安装命令如下

npm install --save-dev gulp-connect

定义web服务，gulpfile.js代码

var gulp = require('gulp'),

    connect = require('gulp-connect'), //实现web服务器插件

gulp.task('default', function() {

});

//使用connect实现web静态服务器和页面自动刷新

//指向地址:gulpfile.js所在的文件目录

gulp.task('webserver',function(){

    connect.server();

})

gulp.task('default',['webserver'],function(){

})

在终端执行”gulp”命令，即可启动服务器，在浏览器中输入：localhost:8080或者ip+端口例如：192.168.30.161:8080；
此时指向的地址是gulpfile.js所在的目录,根据文件目录修改地址,例如:

加入livereload 实现页面自动刷新

第一步 : 告诉web服务启动的时候运行livereload
第二步 : 在页面有更新的时候通知livereload刷新页面

实现第一步 : 将livereload设置为true , 将 webserver 任务改写成如下的样子

gulp.task('webserver',function(){

    connect.server({

        livereload:true

    });

})

实现第二步 : 第二步取决于具体实例，例如将less文件自动编译成css样式表，并让其被浏览器识别。

利用watch来监控less文件的变化，监控到变化时watch触发less编译器，输出新的css文件。之后这个css文件有更新了之后就会去通知livereload，让其刷新页面。

需使用less插件插件安装命令如下

npm install --save-dev gulp-less

watch任务执行的时候，gulp.js监听css文件夹里less文件的所有改动，当有改动的时候就会触发less任务。每一次编译之后，结果会自动返回给浏览器。

此时gulpfile.js的文件内容如下

var gulp = require('gulp'),

    less = require('gulp-less'),//编译less

    connect = require('gulp-connect'), //实现web服务器

option = {//编译后存放文件的目录

    buildpath :'dist'

}

coding={//开发目录

    buildpath : 'src'

}

gulp.task( 'default', function() {

});

//使用connect实现web静态服务器和页面自动刷新

//指向地址:gulpfile.js所在的文件目录

gulp.task( 'webserver',function(){

    connect.server({

        livereload:true

    });

})

/*

 *编译less

 */

gulp.task('less',function(){

    return gulp.src(coding.buildpath +'/css/*.less') //less文件路径

        .pipe(less())

        .pipe(gulp.dest(option.buildpath + '/css/'))//输出文件夹

        .pipe(connect.reload());//重新载入 刷新时使用

})

/*

* watch

* */

gulp.task('watch',function(){

    gulp.watch([coding.buildpath+'/css/**'],['less']);

})

gulp.task('default',['less','webserver','watch'],function(){

})

现在我们重新在终端执行gulp，然后再在浏览器打开localhost:8080。做完这些，我们就可以试着在css文件夹的less文件里做一些改动。它会立即编译并刷新浏览器。这样我们并不需要依赖什么浏览器插件，就可以实现页面的自动刷新啦！

本文代码：https://yunpan.cn/OcqX7aUSVCHjkR
提取密码:7886

巴特西

使用gulp-connect实现web服务器

最新文章

热门文章