UPD: Робота не в оригінальному вигляді, так як в деяких місцях рефакторив код, пробуючи нові штуки

http://orlovmax.github.io/uawebchallengeVI_2

• Результат screenshots
• Тест сумісності браузерів, окрім експлореру browser_compat
• Тест адаптивності responsive

• Folder structure
• Requirements
  • Editorconfig
• How to start
• Tasks
  • Start
  • Dev
  • Build
  • Rebuild
  • Server
• Live reload

./
├── .editorconfig
├── README.md
|
├── _grunt/                                    * grunt build system
|   ├── grunt_tasks/                           * grunt tasks
|   |   ├── config/                            * grunt tasks config
|   │   |   ├── paths.js
|   │   |   ├── settings.js
|   │   |   └── aliases.js
|   │   |
|   |   └── task.js
|   │
|   ├── Gruntfile.js
|   └── package.json
|
├── screenshots/                               * responsive test screenshots
|
├── dev/                                       * site source
│   ├── images/                                * image sources
|   │
│   ├── pug/                                   * templates
|   │
│   ├── js/                                    * source js
|   │
|   ├── sass/                                  * sass preprocessor styles
|   │
│   ├── helpers/                               * helper files
|   │
│   └── fonts/                                 * font sources
│
└── build/                                     * built source
    ├── index.html
    |
    └── static/                                * static assets
        ├── css/                               * minified styles
        |
        ├── images/                            * minified images
        │
        ├── js/                                * minified assembled js
        |
        └── fonts/                             * @font-face-ready webfonts

• Node.js
• Build sytem: Grunt
• Optionally: Editorconfig

This project have .editorconfig file at the root that used by your code editor with editorconfig plugin. It describes codestyle like indent style, trailing whitespaces etc. See more details here

If you haven't used Grunt before, be sure to check out the Getting Started guide, as it explains how to use Gruntfile as well as install and use Grunt plugins.

Before start you need to have installed npm , as well as grunt globally.

Here comes groups of grunt tasks with some explanations

Remove placeholders from work directories. Grunt: grunt start

• Remove gitkeep files

Dev task with static server. Grunt: grunt dev

• Combine javascripts
• Compile Sass stylesheets
• Add vendor prefixes in css
• Combine media queries in css files
• Compile Pug templates
• Sync helpers and other assets
• Sync fonts
• Sync images
• Run BrowserSync static server with live reload using
• Watch for changes and run dev task

Build task. Grunt: grunt build

• Minify images
• Minify javascript files
• Minify stylesheets
• Minify html
• Run BrowserSync static server

Regenerate and build project by running all tasks. Grunt: grunt rebuild

• Combine javascripts
• Compile Sass stylesheets
• Add vendor prefixes in css
• Combine media queries in css files
• Compile Pug templates
• Sync helpers and other assets
• Sync fonts
• Sync images
• Minify images
• Minify javascript files
• Minify stylesheets
• Minify html

Run server without watching for changes. Grunt: grunt server

• Run BrowserSync static server

This project uses BrowserSync as static server with enabled and configured live reload option.