基於gulp+webpack 快速搭建的前端自動化腳手架

稻草叔叔發表於2017-12-12
Web前端

適用於中小型專案，快速構建前端專案框架。比如運營活動頁，官網類，簡單移動端專案，小demo測試等

專案啟動

// 常用命令
開發環境： npm run dev
生產環境： npm run build

// 單任務命令
執行壓縮： gulp zip
編譯頁面： gulp html
編譯指令碼： gulp script
編譯樣式： gulp styles
語法檢測： gulp eslint
壓縮圖片： gulp images
複製程式碼

專案地址

  • 如對你有幫助，希望給個Star ！哈哈哈！！
git clone https://github.com/vincentSea/gulp-cli.git
複製程式碼

專案目錄

├── README.md         # 專案說明
├── config            # gulp路徑配置
├── dist              # 打包路徑
|
├── gulpfile.js       # gulp配置檔案
├── package.json      # 依賴包
|
├── src               # 專案資料夾
│   ├── include       # 公用頁面引入
│   ├── index.html    # 首頁
│   ├── static        # 資原始檔夾
│   │   ├── images    # 相簿
│   │   ├── js        # 指令碼
│   │   └── styles    # 樣式（scss, css）
│   └── views         # 頁面
|
├── static            # 打包到dist中static檔案中
└── webpack.config.js # webpack配置檔案
複製程式碼

專案約定

1、 使用嚴格的 eslint 規範 文件連結

  • 如果不想使用eslint，可以gulpfile檔案中去掉該任務

2、使用scss預處理

  • 可以根據個人喜好，去配置不同的預處理工具

3、static資料夾

  • 一級目錄中static資料夾，可以存放不需要編譯的檔案內容，比如一些外掛，圖片，字型檔案等
  • 每次npm run dev or build 都會把static資料夾下的內容，打包到dist/static裡

代理模式

  • config/index.js檔案中配置

例子如下

 middleware: [
  proxy.proxyPrase(
    {
      target: 'http://v3.wufazhuce.com:8000/api',
      route: '/api'
    }
  )
]
複製程式碼

使用webpack

  • 整合webpack功能，可以自行選擇

config/index.js檔案

useWebpack: false // 是否啟用webpack
複製程式碼

小生後話

  • 此前端自動化構建框架，只是為了簡單方便

  • 可以隨便根據自己的要求去進行修改配置

  • 如有設計不合理地方，可以提出，我乃虛心聽取

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

相關文章