gulp-webserver组件

最新推荐文章于 2024-09-04 07:09:42 发布

lhp0906

最新推荐文章于 2024-09-04 07:09:42 发布

阅读量4k

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/lhp0906/article/details/51332194

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

一、gulp-webserver运行环境（winddows系统-win8 X64）

1.安装Node.js基础环境，下载链接地址。

2.使用npm集成gulp工具，命令提示符创口贴输入npm install -g --save-dev gulp，全局安装gulp工具。

3.gulp工具安装成功以后，集成julp-webserver组件，具体下载集成方式可参照此说明，在命令提示符窗口输入： npm install --save-dev gulp-webserver，下载集成组件。

4.在命令提示符窗口进入项目所在路径，执行指令：npm link gulp 和 npm link gulp-webserver；将gulp工具包和gulp-webserver组件包集成到当前项目的根目录，目的是防止直接执行gulp指令时出错。

5.至此，基本环境已经组建完成。

二、配置

1.首先在项目根目录下建立gulpfile.js文件

<span style="white-space:pre">	</span>var gulp = require('gulp');

<span style="white-space:pre">	</span>var webserver = require('gulp-webserver');

<span style="white-space:pre">	</span>gulp.task('webserver', function() {
	<span style="white-space:pre">	</span>gulp.src('g:').pipe(webserver({//g:为项目所在根目录
		<span style="white-space:pre">	</span>path: '2',//2是项目所在的路径
		<span style="white-space:pre">	</span>livereload: true,
		<span style="white-space:pre">	</span>directoryListing: true,
		<span style="white-space:pre">	</span>open: true,
		<span style="white-space:pre">	</span>fallback: 'index.html'
	<span style="white-space:pre">	</span>}));
<span style="white-space:pre">	</span>});
gulp.task('default',['webserver']);

2.建立一个index.html文件

3.打开命令提示符窗口，定位到当前项目所在路径，执行gulp指令，如果一切正常，一个gulp简单的实时刷新的服务器就组建好了