前端开发为啥需要个webserver?
嗯？是啊，前端页面要是只有html css js，直接浏览器打开就好啊！事实确实如此，可是当我去用 Ajax取本地的json文件（或txt或远程接口等等）的时候就尴尬了，谷歌浏览器会提示你：哥们儿你跨域了！！！如下图：
<script>
$.get('json/movies.json',{},function(data){
console.log(data);
})
</script>
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等等配置功能，请自行查看文档研究。
注：本系列文章只做简单入门，深入了解请自行修行。
