Как выглядит ваша файловая структура во время разработки проекта?

Question

[Kotaro Hiba]

Здравствуйте, научился работать с SASS, PUG, ознакомился немного с JS, хочу сделать проект, но сделать его максимально грамотно с точки зрения его файловой структуры, т.е что бы каждый файл лежал на своем месте, как это бывает в компаниях где веб разработкой занимается группа людей, т.к такого опыта нет и взять его пока что не от куда прошу помочь.
Можете ли вы скинуть как выглядит ваша папка с проектом во время разработки и выход на продакшен, желательно с пояснениями за что отвечает каждый файл или папка.
На данный момент моя структура выглядит ~ так

dist/ - папка с готовой работой
  assets/
    css/
       index.css
    js/
      vendors.js
      index.js
    fonts/
    img/
       photo1
       photo2
index.html
page2.html


src/
  components/
    global.sass
    service/ - служебные стили
       fonts/ - папка со шрифтами
       fonts.sass
       variables.sass
       mixins.sass
       functions.sass
    sections/  - папка которая содержит в себе большие секции типа footer/header
       footer/
         footer.sass
         footer.pug
         footer.js
    block/ - небольшие блоки - панели навигации, формы
    items/ - кнопочки, прочая мелкая ересь, 
  pages/
    base/
      base.pug - шаблон для страниц
      includes.pug - подключаю сюда все sections
    index.pug
    page2.pug
index.js - Точка входа в webpack подключаю сюда все js и sass из папки components вот такой вот функцией

function requireAll(requireContext) {
    return requireContext.keys().map(requireContext);
}

requireAll(require.context('./components', true, /\.(sass)$/));
requireAll(require.context('./components', true, /\.(jsx?)$/));
requireAll(require.context('./pages', true, /\.(jsx?)$/));

Возможно такая файловая структура совсем косячная, прошу подсказать а не тролить, опыта в разработке файла или приложения более чем на 1 страницу или 1000 строк отсутствует напрочь.

UPD
Для работы на данный момент использую pug, sass, jQuery (некоторые плагины под jQuery), в планах освоить react или Vue

Answer 1

[Владислав Бойченко]

assets/
  /css
  /fonts
  /img
    /icons
    /svg
    /del
  /js
    /libs
    /components
    script.js
  /scss
    /base
      fonts.scss
      base.scss
      header.scss
      footer.scss
    /common
      animation.scss
      buttons.scss
      elements.scss
      grids.scss
      typography.scss
    /components
    /libs
    /mixins
    /pages
    /vars
      breakpoints.scss
      colors.scss
      fonts.scss
      transitions.scss
    style.scss
  index.html

Вот так у нас выглядит фронт, который в дальнейшем билдится и передается на бек (работаем с WP). Собираем все галпом.