構建 fis3 使用教程（02）

前提回顧

前面一節《【原創】fis3構建工具使用教程（01）》中我們初步介紹了怎麼使用fis3進行構建，例如資源定位、雪碧圖、壓縮資源檔案等功能的使用，希望你還記得如何使用它們。如果你忘記了，可以回到該篇文章中鞏固一下，畢竟希望你能連續的看完這幾篇fis3教程。t_t

ok，在本篇中我們將介紹如何調式和發布前面我們已經構建好的專案。

由於我們將專案進行構建之後，發現構建之後專案中的資源檔案的路徑從「相對路徑」——>變成了「絕對路徑」。這樣一來，不方便我們的調式。所以，fis3為了解決這個問題，就在fis3中內建了web server 以方便調式檢視我們的構建結果。

那問題是我們該如何使用呢？往下看~

fis3 server open開啟web server根目錄

（1）在使用該命令的時候，有乙個前提————即，我們在構建專案時，不指定輸出目錄，即fis3 release -d ./output 變成了 fis3 release命令；

（2）使用fis3 release 構建時，fis3會將構建結果傳送到內建的web server根目錄下。

（3）構建完成之後，使用fis3 server open命令來開啟在web server根目錄下的構建結果。

如圖：

fis3 server start啟用web server

（1）接下來，我們要啟動本地的web server服務，使用fis3 server start命令，服務啟動之後，會自動在預設瀏覽器開啟url：注意：當8080埠被占用時，你可以通過fis3 server -h幫助命令找到更多的關於啟動web server服務的引數，包括對埠號的設定等。

如圖：

（2）需要知道的是：web server在不重啟電腦或是輸入關閉web server命令的情況下，是不會自己關閉的。fis3內建的web server也是如此。所以，我們無需每次啟動一次web server。

fis3 release -w檔案監聽

這是檔案監聽命令。例如，當我們修改了某專案檔案，之後如果我們按照常規的構建發布做法——就是還要再次執行一次fis3 relase，那麼，這樣就會導致有些沒有被修改的檔案再次被編譯——即重複。這樣，無形增加了編譯時間，這對檔案很龐大的專案而言是顯而易見的。

所以，我們使用fis3 release -w來減少這樣不必要的重複操作。對於fis3 release -w它只會編譯改動的檔案。改動時，你只要儲存(ctrl+s)之後，監聽就會執行。

如圖：

fis3 release -wl瀏覽器自動重新整理

這個命令，能讓我們在構建發布之後，讓瀏覽器自動重新整理url-127.0.0.1:8080，而無需手動去重新整理，這也提公升了我們的構建體驗，是個不錯的想法。

這部分作者沒有實際進行測試過。如果你覺得還用不到，可以先略過。這裡只進行乙個簡單的介紹。

傳統地，在專案開發、測試完成之後，我們會將專案發布到伺服器上。有時會先發布到乙個test（測試）伺服器上，再發布到正式伺服器上。我們會用到如ftp這樣的上傳工具。

在fis3中，預設提供的是使用http的方式上傳**。

（1）在上傳之前，我們需要和後端程式設計師，如php，一起協調。在測試伺服器上部署上傳接收指令碼。將該指令碼放到測試伺服器上的某個web根目錄下，並配置乙個能訪問到的url即可！

php指令碼如下：

<?php 
@error_reporting(e_all & ~e_notice & ~e_warning);
function mkdirs($path, $mod = 0777)  else  else 
}return false;
}if($_post['to']) else  else 
}echo move_uploaded_file($_files["file"]["tmp_name"], $to) ? 0 : 1;
}} else

假定我們設定的url是：

那麼在fis-conf.js檔案中我們就該這樣配置：

fis.media('test').match('*',)
})

然後，fis3 release test 來上傳測試伺服器。

注意：deploy外掛程式

deploy外掛程式是乙個專門用於發布資料的外掛程式，如發布到**（資料夾、遠端伺服器），用什麼方式發布（http、ftp、git…）。它能作用某個檔案、某類檔案或是全部檔案。

###替代 fis3 內建web server

預設情況下，我們fis3 release 之後，會將構建結果傳送到fis3 內建的web server的根目錄下。

而，替代內建的web server從根本上來說，就是改變在fis3 release時改變傳送構建結果的目錄。

例如，我們將構建結果傳送到/users/imaginexie/htdocs 目錄下：

**做法：**配置檔案fis-conf.js

fis.match('*',)
})

這樣的話，我們就可以在/users/imaginexie/htdocs目錄下找到我們的構建結果啦~

如圖：

ok，關於fis3的調式與發布就到這裡。

需要注意的一點，就是將專案構建部署到伺服器上，需要你耐心的調式。

構建 fis3 使用教程（02）

構建工具fis3的使用

fis2 入門 fis3使用

fis3 使用心得

構建 fis3 使用教程（02）

構建工具fis3的使用

fis2 入門 fis3使用

fis3 使用心得

相關推薦