【總結】gulp，本地web伺服器

一.gulp(前端自動化工具)(mac系統)

參考網頁：https://blog.csdn.net/c_kite/article/details/73165427

1.安裝全域性gulp命令

 

npm install -g gulp

建立一個專案資料夾,mkdir資料夾或者之間右鍵新建資料夾， 進入當前專案資料夾下，cd 資料夾，輸入命令npm init

配置package.json檔案, 這一部分看情況自己決定是否填, 不想填也可以, 直接按回車 

當前專案資料夾下輸入命令npm install gulp --save-dev

全域性安裝gulp後，還需要在每個要使用gulp的專案中都單獨安裝一次

再在這個檔案下建立一個gulpfile.js檔案，作為該專案配置檔案。

var gulp = require("gulp");//引入本地安裝的 gulp模組
gulp.task("default",["task1","task2"],function(){//default 為預設任務名，這種情況只需要在命令列中輸入 gulp即可。 如果有特定的taskName,需要在命令列中實行 gulp taskName
　　console.log("hi, gulp")
});
gulp.task("task1",function(){
console.log("task1 is here");
});
gulp.task("task2",["task3"],function(){
console.log("task2 is here");
});
gulp.task("task3",function(){
console.log("tesk3 is here");

})

gulp.task（）中的三個引數：第一個是命令的名稱，第二個是可選引數，型別是陣列，表示當前關聯哪些命令，第三個是執行的操作函式。

上面的結果：先1，再3，再2，最後default。

用命令列輸入：gulp，就可以執行上面的程式碼。

其實在專案資料夾下輸入命令gulp時, 就是觸發這個default任務, 因此, 我們定義多個自定義事件, 這樣在輸入gulp時, 就可以直接將我們寫的命令也一起觸發。

 

gulp API

gulp.src(globs[, options])

globs引數是檔案匹配模式(類似正規表示式)，用來匹配檔案路徑(包括檔名)，當然這裡也可以直接指定某個具體的檔案路徑。當有多個匹配模式時，該引數可以為一個陣列。 
options為可選引數。通常情況下我們不需要用到。

gulp.watch(glob[, opts], tasks)

gulp.watch()用來監視檔案的變化，當檔案發生變化後，我們可以利用它來執行相應的任務，例如檔案壓縮等。

2.要執行一個已經寫好的gulpfile.js檔案。

命令進入gulpfile.js檔案的目錄，在這個目錄中gulp。如典當行的例子，cd DianDangHang (輸入個cd D+tab鍵可以自動補全剩下的)

然後直接執行gulp就會在設定的目錄下把web程式碼建立過去。這個通過gulp建立的main-webapp-web資料夾裡的程式碼就是上傳到伺服器的程式碼，我們需要改原本帶有@@include下的html檔案目錄下的include目錄下的檔案，因為gulp.watch在實時監控，所以只要改了程式碼，就會在main-webapp-web檔案相應改變。

二、mac下使用本地web伺服器。

mac自帶apache,之前配置過。

配置連結：https://www.cnblogs.com/wanxudong/p/5846907.html

現在配置好的，直接輸入http://localhost，就可以顯示配置的目錄下的檔案，配置在mac-使用者-sites資料夾下。然後把web程式碼複製到檔案下面就可以訪問本地伺服器。

學長說idea可以不用複製，下一步研究idea，改程式碼。