【三】gulp之用gulp-connect开启一个本地webServer

前端开发为啥需要个webserver?

嗯？是啊，前端页面要是只有html css js，直接浏览器打开就好啊！事实确实如此，可是当我去用 Ajax取本地的json文件（或txt或远程接口等等）的时候就尴尬了，谷歌浏览器会提示你：哥们儿你跨域了！！！如下图：

Paste_Image.png

出于安全考虑，谷歌浏览器告诉你这么做真的是不允许的，因为你的请求开始域是： file:///D:/gulpServer/develop/index.html

如何建立一个本地的webServer？

• 1）如果你会点后端，比如我，我会后端语言php，OK，自己安装个wampserver，代码拷贝到，www目录，然后运行（ps：java什么的后端语言都可以）。
• 2）对一个没有后端经验的，表示压力很大啊！！没事儿，不是还有nodeJS吗？这个也是可以自己写代码新建server的。
• 3）nodeJS也不会？好吧，跟我来学一下用gulp的插件gulp-connect新建一个 webserver吧。

如何用````gulp```开启？

来来来，Follow me !!!
目录结构如下：

Paste_Image.png

• 1）在命令行进入gulpServer目录安装所需插件 gulp-connect

npm install gulp-connect

• 2）新建gulpfile.js 写入以下代码（具体解释见代码注释）

//引用gulp
var gulp = require('gulp'),
//引用我们要用的gulp-connect
  connect = require('gulp-connect');
//建立一个配置对象变量，后面我们要传递给插件用来启动server
var serverConfig={
  root:'develop',//从哪个目录开启server
  port:8080,//将服务开启在哪个端口
}
//建立一个server任务 直接可以用 gulp server就可以执行这个任务
gulp.task('server', function() {
  connect.server(serverConfig);
});

• 3）运行任务

Paste_Image.png

说明：上图中最后一句看的懂吧，服务已经启动在 http://localhost:8080/

• 4）打开浏览器输入http://localhost:8080/

Paste_Image.png

最后附上 gulp-connect的文档地址

gulp-connect插件文档
更多插件的文件更改自动刷新、开启多server、关闭server等等配置功能，请自行查看文档研究。

注：本系列文章只做简单入门，深入了解请自行修行。