前端靜態頁面快速迭代工具

無聊小碼農發表於2018-05-25

在當代講究效率的時代,碼農的開發效率也一定程度上決定了碼農的價值。

你還在為開發一個官網而愁眉哭臉嗎?

你還在修改完 css 然後切回瀏覽器,重新重新整理頁面嗎?

你還在被網路請求太慢,資源太大下載不下來而懊惱嗎?

來吧,讓我來解決你的問題。

專案起因

由於目前的大部分官網類頁面都是全部的靜態頁面,作為一個專案來開發,選用一個注重資料等的框架是不靠譜的,那麼這個時候就不許要用到純靜態開發了。

對於靜態頁面,工作量最大的莫過於--調樣式。

以前的開發模式:

修改css->切回瀏覽器,重新整理頁面,不對->切回css檔案,繼續修改->切回瀏覽器。重新整理頁面.....

對於來回切換並且還要點選按鈕重新整理或者快捷鍵重新整理的情況下,讓碼農無故多消耗了時間,浪費了宣告。

專案目的

  • 解決重新整理問題,支援頁面自動重新整理
  • 支援樣式預處理
  • 支援儲存自動編譯,重新整理頁面
  • 支援專案資源壓縮,保證線上效能

為了實現這些,static-html-template就出現了。

目前支援

  • 樣式預處理(less)
  • 樣式檔案打包、壓縮、瀏覽器私有字首新增
  • 儲存less檔案後,自動執行打包,並重新整理頁面
  • 圖片壓縮、js壓縮、css壓縮、html壓縮

未來可能支援

  • 命令列建立頁面,包括完成 html 、 less 檔案,並完成相應的引用配置
  • cli 操作方式,建立專案(已完成)
  • GUI 操作介面,新建專案,管理專案,新增頁面等功能

2018-05-28新增:

專案目前已支援 cli 操作,可以通過全域性安裝 cli 工具進行專案的新建。

安裝 cli :

> npm i -g sht-cli
複製程式碼

初始化專案:

> sht new
複製程式碼

根據提示輸入相應的名稱就可以建立專案了。

相關文章