我的前端頁面開發js簡易有效環境

世有因果知因求果發表於2016-01-14
前端JS

前端開發主要涉及到html, css(less/sass), javascript這幾個方面的知識。真正的快速有效開發，必須實現所謂所見即所得。在構建生產時，可能需要使用gulp/grunt等task runner來將前端所有的任務串聯起來，但是在一個簡易開發環境中，有以下兩種模式快速構建本地靜態頁面(html+css+js)開發環境。

browsersync 命令列方式啟動server去serve靜態頁

1. nodejs安裝；

2. npm 安裝

npm install -g browser-sync

3. 在你需要開發的目錄下，啟動一個cmd，執行以下命令，開啟web server，監視檔案變更。

browser-sync start --server --directory --files ./*.*

這時，會自動啟動一個預設瀏覽器，開啟你的目錄，你隨便選擇檔案執行；

4. 對於javascript你可以在程式碼中隨時加一個debugger命令讓js引擎執行到這個位置時自動中斷執行，以便供你檢查執行的stack

var btn = document.getElementById("btn");
var ret = document.getElementById("ret");
btn.addEventListener('click', function(){
  ret.innerText = 10 + num.value; 
  debugger
  console.log(ret.innerText);
})

這種方案的優點是可以livereload，但是缺點是每次測試前要執行browsersync的命令列命令以便啟動browsersync來執行web服務

直接通過sublime來整合一個web server

這種方式的思路是一切操作都在sublime中進行，通過過安裝一個外掛sublimeServer來實現sublime啟動時自動啟動內建的web server(預設8080埠）,而該server將serve所有在sublime中開啟的資料夾，

你只需要在sublime編輯介面右鍵選擇open in sublimeserver就可以直接在web browser中以http://localhost:8080/xxx/yourfile.html的方式來編輯了！

這個方案的優點是非常簡便，一切操作直接在sublime中搞定，但是無法實現livereload

還有一種方案是sublime直接整合browsersync但是這個比較傻瓜，因為browsersync是依賴於nodejs的，他把整個package都再安裝一遍，太大了！！

 

 

 

綜合上面幾種方案，我覺得最好的方案是browsersync命令列+sublime修改檔案觸發livereload，但是如何解決命令列路徑的煩人問題呢？

安裝一個Terminal的sublime外掛，新增如下配置資訊：

"terminal": "C:\\WINDOWS\\system32\\cmd.exe",
"open_terminal_project_folder"
    // commands
    "parameters": ["/START", "%CWD%"]

以後需要在web server中除錯一個檔案時，直接在sublime text編輯介面， ctrl+shit+t開啟terminal,執行以下命令：

browser-sync start --server --directory --files .

即可。但是上面ctrl+shift+t的方式在檔案目錄為中文目錄時可能存在問題不能使用，那麼另外一種繞過煩人的一系列cd命令到相應目錄的方法是：1.在sublime中右鍵open containing folder;2.shift+右鍵；3.選擇在此處開啟cmd

 

相關文章