✔簡單的入門項目,可以更快地提供項目和/或:
- GitHub頁面的自動部署
- 發布發行到GitHub
這提供了一個示例項目,該項目可以自動使用GULP自動化任務,包括:
該項目需要滿足一些要求才能進行編譯。
為了開始使用該項目,您需要使用GIT命令將其克隆到PC上,請用您的項目名稱替換[your-project] :
git clone https://github.com/adorade/startit.git [your-project]導航到文件夾:
cd [your-project]安裝依賴項:
yarn install請注意,已修復模塊版本以確保兼容性。運行yarn outdated並更新package.json 。
要開始使用它,您唯一需要做的就是在選擇和代碼的代碼編輯器上打開項目。要編譯和實時預覽您的所有更改,您擁有一些可以幫助您的命令。這是您應該知道的命令列表。
每個命令都必須使用GULP命令(例如gulp cleaner或gulp build在項目的根目錄上執行:
| 任務 | 描述 |
|---|---|
| 清潔工 | 刪除所有編譯的文件 |
| Linter | 皮棉樣式,腳本和哈巴狗文件 |
| 樣式 | 編譯Sass樣式 |
| 腳本 | 編譯JavaScript文件 |
| 字體 | 複製字體 |
| 靜態 | 複製靜態文件 |
| 圖像 | 優化圖像 |
| 頁面 | 編譯哈巴狗模板 |
| 服務 | 啟動服務器並註意任何更改 |
| 建造 | 建立項目 |
| 開發 | 編譯並註意更改 |
| 部署 | 將文件部署到github頁面 |
| 發布 | 發布發行到GitHub |
| 預設 | 默認GULP任務 |
| 檢查 | 檢查Gulp配置 |
| 幫助 | 打印幫助消息 |
運行gulp --tasks以查看所有可用的Gulp任務。
如果您正在開發,那麼gulp dev命令是您的最佳選擇。轉到控制台中的項目文件夾,並執行gulp dev ,它將編譯項目並啟動每次更改代碼中的內容時都會刷新的服務器。
Gulp將關注變化,並將告訴您如何從本地和公共URL訪問該項目。
指向該URL的每個瀏覽器都會自動刷新。作為測試目的的額外功能,一個瀏覽器上的任何交互都會反映在其他任何瀏覽器上。同時在手機,平板電腦和PC上嘗試一下。
該項目具有非常簡單且靈活的結構。如果需要移動任何文件或目錄的默認位置,請確保更新到tool/util/config.js文件上的新位置。
├── dist - > All the compiled files will be placed here (Production)
├── logs - > Logs files
├── src - > Source files for the project
│ ├── es6 - > Scripts
│ ├── fonts - > Fonts
│ ├── images - > Images
│ ├── scss - > Sass
│ ├── static - > Favicons...
│ ├── vendors - > Vendors folder for all the dependencies
│ └── views - > Templates directory for Pug files
├── test - > Tests Files
├── tmp - > All the compiled files will be placed here (Development)
├── tools - > Project tools and configuration
│ ├── build - > files for build
│ ├── tasks - > tasks files for gulp
│ └── util - > config and options for project
├── package.json - > NodeJS configuration file
├── gulpfile.esm.js - > Gulp tasks
├── README.md - > README
└── ... config files for packages當項目編譯時,不同任務將自動生成dist和tmp文件夾中的所有文件。請確保不要在這些文件夾中手動修改任何文件,因為將在編譯過程中替換更改。
該項目具有一些不錯的配置選項,可以滿足您所有需求。要配置您需要編輯以下文件並更改所需的任何值:
tool/util/banner.js腳本和样式文件的橫幅tool/util/config.js項目配置tool/util/options.js插件的選項每次進行更改後,請檢查gulp checks是否有訂單,沒有錯誤。
該配置的每個方面都在文件中描述,以便您知道選項。
以實時加載開發模式運行:
yarn run start
# or
gulp
# or
gulp dev導航到http://localhost:1234/或從另一個設備訪問的External URL。
查找任務的完整列表:
gulp -T
# or
gulp -T --tasks-depth 0將NODE_ENV設置為production ,以便GULP任務產生最終代碼,即縮小文件,並禁用Sourcemap生成。
yarn run build
# or
gulp build --production根據您的操作系統將NODE_ENV設置為手動production :
Linux/Mac OS:
NODE_ENV=production
gulp build (或Inline NODE_ENV=production gulp build )
Windows PowerShell:
$ env: NODE_ENV = " production "
gulp buildWindows Legacy命令行:
set NODE_ENV = production
gulp build要自動將您的項目部署到github頁面,並在https://[your-username].github.io/[your-project-name]中提供。
yarn run deploy
# or
gulp build --production && gulp deploy發布發佈到github使用:
yarn run release
# or
gulp release該項目已根據麻省理工學院許可證