Node.js、Sublime text3、HTML5模板搭建基本簡單靜態web網站

1.Node.js基本環境搭建 略/參考前文
2.express/Node.js經典官方推薦web服務器框架
3.安裝 express
*cmd默認提示符爲C:\Users\sarsers，Node.js、Sublime text3及相關項目文件夾均在D:盤，相關命令操作，最好切換到相應目錄下，以免操作路徑不是預期且產生垃圾文件

檢查express是否安裝成功，需安裝express-generator

安裝 express-generator

express -V/-V需大寫

新建web項目：myweb（指定項目路徑D:\web projects）
cmd切換到D:\web projects

安裝依賴包 cd myweb && npm install
啓動本項目express服務器 npm start

cmd切換到新建web路徑下，安裝依賴包

jade已被更名爲pug，安裝pug

項目啓動

項目測試

4.public/express靜態web網站默認路徑

用hello world網頁index.html 測試

5.HTML5模板
下載
前端模板 http://www.bootcss.com/p/html5boilerplate/

HTML5模板

安裝
清空public文件夾

解壓

將源碼全部拷貝到public文件夾

測試

6.將public文件夾引入Sublime text3，建立 ST3 項目，以便編輯 html5-boilerplate相關文件

7.配置SideBarEnhancements的Open in Browser預覽功能

{

    "D:\web projects\myweb\public":{

        "url_testing": "http://localhost:3000/",

        "url_production": ""

    }

}

“D:\web projects\myweb\public” 靜態網頁文件存放位置
“url_testing” express服務器定義的url及監聽端口

側邊欄任意位置右鍵->Open in Browser->Chrome，目前沒有快捷鍵

Open With可自定義快捷鍵，打開的不是url，而是本地文件

8.Sublime text3與Chrome瀏覽器配合插件
Emmet LiveStyle-CSS實時刷新預覽

Sublime text3與Chrome各裝一枚
Chrome瀏覽器，訪問https://chrome.google.com/webstore/detail/emmet-livestyle/diebikgmpmeppiilkaijjbdgciafajmg?utm_source=chrome-ntp-icon安裝，重啓瀏覽器即可
Sublime text3，package control安裝

LiveReload-實時刷新預覽
Sublime text3與Chrome各裝一枚
Chrome瀏覽器，三條橫槓圖標->更多工具->擴展程序->獲取更多擴展程序->進入Chrome插件中心->搜索”LiveReload”->添加至CHROME，重啓瀏覽器即可
Sublime text3，從GitHub下載LiveReload源碼包（package control的不好使），解壓到packages下即可
https://github.com/Grafikart/ST3-LiveReload

據說有實現Sublime text3與Chrome左右分屏的插件，目前沒找到呢