Как правильно организовать структуру файлов и папок FrontEnd-а веб-проекта?

Question

[LB777]

Современные требования ставят задачу перед Web FrondEnd-ом , чтобы все файлы были сжаты и сконкатенированы. Т.е. чтобы пользователь получал style.min.css , script.min.js и т.п.
Но для разработки (особенно для крупного проекта) надо, чтобы все было распихано по разных файлам, папка, c комментариями и даже с документацией.
Мне интересно как вы структурируете и готовите свой проект (особенно интересна подготовка крупных проектов), чтобы было его удобно поддерживать при разработке, тестировании, написании документации и при дальнейшем выкладывании его на продакшен с учетом современных требований (сконкатенированно и сжато).
К примеру структурирование проекта вроде такого только более подробно, как это все завязано системами автосборки, средой разработки и дебаженьем =) :
-dev
--style
---sass
---img
--js
---app
---react
--html
-prod
--style
--img
--js
--index.html
-test
--reactTest
-doc
--public
--index.html
--readmi.mb

Answer 1

[7rulnik]

Посмотрите на генераторы yeoman.io

Answer 2

[Макс Сысоев]

На самом деле, организация файлов в проекте - очень важный вопрос.
У меня есть отличная дока по теме: Best Practice Recommendations for Angular App Structure.
Сквозь огонь и воду, на практических примерах, для себя, понял, что лучше организовывать проект как "дерево модулей" (фрактальная иерархия).

Answer 3

[ajaxtelamonid]

Конкретно для react.js вот кусок gulpfile:

var gulp = require('gulp'),
    source = require('vinyl-source-stream'),
    browserify = require('browserify'),
    reactify = require('reactify');

gulp.task('react', function () {
    var bundleStream = browserify('./react/app.js')
        .transform(reactify)
        .bundle();

    bundleStream
        .pipe(source('app.js'))
        .pipe(gulp.dest('./public/js'));
});

vinyl-source-stream, browserify и reactify надо установить при помощи npm
В react/app.js находится реакт-приложение с модулями, объявленными через CommonJS

Answer 4

[zjoin]

Вопрос был, как это делается, если на выходе все файлы минимизируются и конкатинируются, не какие есть сборки

Answer 5

[LB777]

habrahabr.ru/post/242379
habrahabr.ru/post/251807