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

適用於中小型項目，快速構建前端項目框架。好比運營活動頁，官網類，簡單移動端項目，小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配置文件
複製代碼

項目約定

一、 使用嚴格的 eslint 規範 文檔連接

• 若是不想使用eslint，能夠gulpfile文件中去掉該任務

二、使用scss預處理

• 能夠根據我的喜愛，去配置不一樣的預處理工具

三、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 ！哈哈哈！！