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用作静态服务器，并具有启用和配置的实时重新加载选项。

执照

麻省理工学院