gulp 和gulp-connect 搭建本地静态服务器

使用Gulp4.0 搭建本地静态服务器

首先安装Node

nodejs.org/zh-cn/downl…

其次安装yarn

yarn.bootcss.com/docs/instal…

创建文件夹

mkdirs localStaticServer

在项目中初始化yarn

yarn init

安装gulp, gulp-connect

yarn add gulp
yarn add gulp-connect

创建gulp脚本

touch gulpfile.js

打开gulpfile.js，加入如下代码

var { watch,src,dest } = require('gulp'),
    connect = require('gulp-connect')
    
function html() {
    return src('src/**/*.html')
    .pipe(connect.reload())
}
function js() {
    return src('src/**/*.js')
    .pipe(connect.reload())
}
function css() {
    return src('src/**/*.css')
    .pipe(connect.reload())
}
function server() {
    connect.server({
        livereload: true,
		port:2323, //指定端口号
		host: '192.168.2.23' //本地ip
    })
}

watch('src/**/*.html',html)
watch('src/**/*.js',js)
watch('src/**/*.css',css)

exports.default = server

创建工程文件

创建src目录，并在其中创建index.html文件

启动服务

gulp

访问方式

http://192.168.2.23:2323/src/index.html

当修改html文件后，浏览器也会同步更新