码迷,mamicode.com
首页 > Web开发 > 详细

gulp-webserver组件

时间:2016-05-07 11:24:53      阅读:184      评论:0      收藏: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简单的实时刷新的服务器就组建好了

技术分享

4.浏览器自动打开当前目录中的index页面,更改其中的内容,页面实时刷新

技术分享

gulp-webserver组件

标签:

原文地址:http://blog.csdn.net/lhp0906/article/details/51332194

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!