1. 程式人生 > >基於gulp搭建的前端自動化構建框架

基於gulp搭建的前端自動化構建框架

Gulp-cli

基於gulp搭建的前端自動化構建。適用於中小型專案,快速構建前端專案框架。

專案啟動

  1. // 常用命令
  2. 專案編譯: npm run build
  3. 專案編譯並啟動: npm run start

專案地址

  • 如對你有幫助,希望給個Star !哈哈哈!!
  1. git clone [email protected].com:perfectSymphony/Gulp-cli.git

專案目錄

  1. ├── README.md # 專案說明
  2. |—— bin # (在gulpfile檔案中使用到)解析layout中的模板html,將完整的html產出到src/views/html中
  3. ├── dist # 打包路徑
  4. |—— logs # 監聽編譯less檔案時,列印報錯資訊,
  5. ├── gulpfile.js # gulp配置檔案
  6. ├── package.json # 依賴包
  7. |
  8. ├── src # 專案資料夾
  9. ├── conf # 配置檔案目錄
  10. ├── data # mock資料資料夾
  11. | |—— public # 第三方庫
  12. ├── static # 資原始檔夾
  13. | | |—— css # 由less檔案生成的的css檔案
  14. ├── images # 相簿
  15.       ├── js # 指令碼
  16.       └── less # less資料夾(**樣式相關的在該資料夾中開發**)
  17.    └── views # 頁面

如何使用

1、下載專案:

  1. git clone [email protected].com:perfectSymphony/Gulp-cli.git

2、安裝依賴:

  1. $ cd Gulp-cli && npm install

3、啟動頁面,訪問http://localhost:3333/dist/front/views/index.html

  1. $ npm run start

4、產出最終工程

  1. npm run build

到微信公眾號去提問:

指尖下的精靈

小生後話

  • 此前端自動化構建及自動化部署框架

  • 可以隨便根據自己的需求,修改配置,增加框架更多的功能

  • 如有設計不合理地方,可以提出,也可以到我的微信公眾號裡面提出改進問題

  • 專案地址 如對你有幫助,希望給個Star !哈哈哈!!