前端開發為啥需要個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等等配置功能，請自行查看文檔研究。
注：本系列文章只做簡單入門，深入了解請自行修行。
