About Hbuild
Hbuild is a modern project starter kit
which allows you to build your own project by cli rapidly
Hbuild使用hbuild-cli命令列工具，可快速生成專案啟動套件，學習成本低，該套件包含如下特點：
Features
- Vue2 / Vue-Router / Vuex (optional)
- Hot reloading for single-file components
- Webpack 2
- babel (default)
- LESS/SASS/Stylus (optional)
- ejs/mustache/art-template (optional)
- React / React-Router (optional)
- zepto
- autoprefixer (vue support)
- mock server
- eslint
- Support for building multi-page applications
- offline mode support
- file hash
其中zepto是預設全域性引入的，可直接使用。h5專案可以選擇ejs，mustache或art-template模板引擎。 預設支援Babel轉碼。支援HMR。支援檔案指紋。
vue專案預設支援vue-router，react專案預設支援react-router
Get Started
You'd better have node >=6 and npm >=3 and gulp >=3.9 installed:
$ npm install -g hbuild-cli
$ h init new-project
# edit files and start developing
$ npm run dev
# bundle all scripts and styles for production use
$ npm run prod
# lint your js code
$ npm run eslint複製程式碼Local Templates
when you clone this project,you can use a template on your local file system:
$ git clone git@github.com:hawx1993/hbuild.git
$ h init ./hbuild new-project複製程式碼命令
$ npm run dev;//本地開發模式，連線mock資料
$ npm run dev-daily;//本地開發模式，連線daily日常環境資料
$ npm run dev-pre;//本地開發模式，連線預發環境資料
$ npm run daily;//線上日常構建模式，連線daily日常環境資料
$ npm run pre;//線上預發構建模式，連線預發環境資料
$ npm run prod;//線上構建模式，連線線上環境資料
$ npm run eslint;//js程式碼審查，預設檢查除lib資料夾下的js程式碼複製程式碼編譯
0.入口檔案為pages目錄下的index.js檔案，webpack通過讀取該檔案進行編譯打包
1.js程式碼預設採用Babel編譯，gulp + webpack打包構建。
2.編譯後的html檔案預設輸出到build/pages目錄下，html檔名採用其在src/pages下的父級目錄的檔名
3.編譯後的靜態資原始檔（圖片，字型，js檔案等）存放到build/static目錄下，編譯支援檔案hash，解決快取問題
4.支援程式碼熱替換，熱替換失敗會自動重新整理整個頁面
5.開發模式不對程式碼進行壓縮，sourceMap 只針對非開發模式有效(not dev)
6.支援圖片壓縮
HTML和模板引擎
1.h5專案支援 ejs ，mustache和art-template模板引擎，預設支援zepto
2.非本地開發環境，html，js和css程式碼會被壓縮
3.當你在pages下新建一個目錄時，html檔案需要手動配置一下靜態資源的引用，例如在index目錄下：
<script src="$$_CDNPATH_$$/index/index.js"></script>複製程式碼CSS和前處理器
1.支援css前處理器LESS、SASS和stylus (optional);
2.預設採用css-in-js的方式，可在hbuild.config.js檔案中配置是否單獨提取css，提取出的css檔名稱預設為：[name].css，name為src下less/scss/stylus檔名
3.開啟提取css檔案，需要在HTML中引入，引入方式同js
4.支援 螢幕適配方案，採用media-query+rem的方式，預設在common.less檔案中
5.支援postcss和autoprefixer
程式碼檢查
1.npm run eslint 支援vue單檔案元件，支援es6語法檢查
其他
mock：mock 資料只需要介面URI路徑和mock目錄保持一致即可
介面：介面如需根據環境來替換，需在
hbuild.config.js檔案和common/js/config檔案進行配置支援多入口檔案，可在pages下新建目錄，檔名需以index開頭
字串替換：
$$_CDNPATH_$$會被編譯替換為build/static/hash目錄，$$_STATICPATH_$$會被替換為build/static/hash/assets入口檔案：腳手架預設會讀取pages目錄下的index開頭的js檔案為入口檔案，名稱是寫死的
修改預設資料夾的名稱，需要在
hbuild.config.js檔案就對應檔案變數做修改
目錄結構
.
├── README.md
├── build # 構建工具目錄
│ └── gulpfile.js # gulp檔案
│ └── postcss.config.js # postcss配置檔案
│ └── util.js # gulp腳手架工具方法
│ └── hbuild.config.js # 腳手架配置檔案
├── mock # mock資料目錄，保持和介面一樣的路徑即可
│ └── h5
├── package.json
├── src # 原始檔
│ ├── assets # 靜態資源目錄，存放圖片或字型
│ │ └── logo.ico
│ ├── common # 共用程式碼目錄，css目錄存放公用css部分，js同理
│ │ ├── css
│ │ │ ├── common.less
│ │ │ └── common.scss
│ │ └── js
│ │ ├── api.js # api檔案
│ │ ├── config.js # 配置檔案
│ │ └── util.js # 工具函式檔案，可將公用方法存放於此
│ ├── components # 元件目錄
│ │ ├── counter # 計數器vue元件
│ │ │ └── index.vue
│ │ ├── index # vue元件的入口檔案
│ │ │ └── index.vue
│ │ ├── meta # h5 meta頭部資訊模組
│ │ │ └── index.html
│ │ ├── router # vue路由模組
│ │ │ └── router.js
│ │ └── store # vuex store模組
│ │ └── store.js
│ ├── lib # 第三方庫
│ └── pages # 頁面
│ └── index # 首頁目錄，可在pages目錄下新建多個目錄結構，作為多入口檔案
│ ├── index.html
│ ├── index.js # index.js/index.jsx檔案為webpack的入口檔案
│ ├── index.jsx
│ ├── index.less # 樣式檔案在js檔案中引入，可設定是否提取出css檔案
│ ├── index.scss
│ └── module # 頁面模板模組，可在index.js/jsx檔案引入該模組檔案
│ ├── main.jsx
│ └── main.tpl.html
└── yarn.lock複製程式碼ChangeLog
License
MIT © hawx1993
專案地址
github.com/hawx1993/hb… ，歡迎star和提issue