portfolio_one page template

投資組合一頁模板 - 存檔

由Maxim Orlov設計和編碼平坦且響應迅速的網站模板。

演示：http：//website-templates.github.io/portfolio_one-page-template

使用http://magicmockups.com/創建的產品模型

內容

• 文件夾和文件結構
• 要求：
  • EditorConfig
• 如何開始
• 站點配置
• 任務
  • 清理
  • 開發
  • 建造
  • 重建
  • 伺服器
  • 精靈
• 現場重新加載
• 執照

文件夾和文件結構

 ./
├── .editorconfig
├── gulpfile.js
├── package.json
├── README.md
|
├── gulp_tasks/                                * gulp tasks
|   ├── config/                                * gulp tasks config
│   |   ├── paths.js
│   |   └── aliases.js
│   |
|   └── task.js
|
├── screenshots/                               * responsive test screenshots
|
├── dev/                                       * site source
│   ├── images/                                * image sources
|   │
│   ├── pug/                                   * templates
|   |   ├── blocks/                            * blocks library
|   │   |   └── block.pug
|   │   ├── helpers/                           * helper mixins
|   │   ├── vendor/                            * third-party code
|   │   ├── layouts/                           * page layouts
|   │   └── pages/                             * main pages templates
|   │
│   ├── js/                                    * source js
|   |   ├── vendor/                            * vendor scripts library
|   |   ├── lib/                               * site scripts library
|   │   ├── head.js                            * head scripts
|   │   └── body.js                            * body scripts
|   │
|   ├── sass/                                  * sass preprocessor styles
|   |   ├── blocks/                            * blocks library
|   │   |   └── block.sass
|   │   ├── helpers/                           * mixins and vars
|   │   ├── vendor/                            * third-party code
|   │   ├── custom.sass
|   │   ├── noscript.sass
|   │   └── screen.sass
|   │
│   ├── helpers/                               * helper files
|   |   ├── favicon.ico
|   |   └── .htaccess
|   │
│   ├── fonts/                                 * font sources
|   │
│   └── data/                                  * configs and data for templates
│
└── build/                                     * built source
    ├── index.html
    ├── page.html
    |
    └── static/                                * static assets
        ├── css/                               * minified styles
        |
        ├── images/                            * minified images
        │
        ├── js/                                * minified assembled js
        |
        └── fonts/                             * @font-face-ready webfonts

要求

• node.js
• 構建系統：咕unt或吞嚥
• 可選：
  • EditorConfig

EditorConfig

該項目的根部有一個.editorConfig文件。它描述了縮進的樣式，落後的空間等。在此處查看更多詳細信息

如何開始

如果您以前從未使用過Gulp，請務必查看“入門指南”

在開始之前，您需要在全球安裝NPM以及GULP 。

一些簡單的步驟開始：

• 通過運行： npm install package.json的依賴項。
• 從下面的列表中運行任務並開始開發！
• 在dev/data/config.json中編輯常規設置，請參閱網站配置部分

站點配置

該樣板使用帶有外部數據配置的哈巴狗模板。主設置可以在dev/data/config.json文件中找到。並且它們可用於使用config.key-name模板中使用

任務

有一些解釋，這是一組凝血任務

清理

從工作目錄中刪除佔位符。吞噬： gulp cleanup

• 刪除gitkeep文件

開發

使用靜態服務器的開發任務。灣： gulp dev

• 束JavaScript
• 編譯SASS樣式表
• 在CSS中添加供應商前綴
• 在CSS文件中結合媒體查詢
• 編譯哈巴狗模板
• 同步助手和其他資產
• 同步字體
• 同步圖像
• 使用實時重新加載運行browsersync靜態服務器
• 注意更改並運行開發任務

建造

構建任務。吞噬： gulp build

• 縮小圖像
• 刪除JavaScript文件
• 縮小樣式表
• 縮小HTML
• 運行browsersync靜態服務器

重建

通過運行所有任務來再生和建立項目。吞噬： gulp rebuild

• 束JavaScript
• 編譯SASS樣式表
• 在CSS中添加供應商前綴
• 在CSS文件中結合媒體查詢
• 編譯哈巴狗模板
• 同步助手和其他資產
• 同步字體
• 同步圖像
• 縮小圖像
• 刪除JavaScript文件
• 縮小樣式表
• 縮小HTML

伺服器

運行服務器而無需觀察更改。 Gulp： gulp server

• 運行browsersync靜態服務器

現場重新加載

該項目將browsersync用作靜態服務器，並具有啟用和配置的實時重新加載選項。

執照

麻省理工學院