How to properly organize the file and folder structure of the FrontEnd of a web project?

Question

JavaScript

Modern requirements challenge Web FrondEnd to ensure that all files are compressed and concatenated. Those. so that the user gets style.min.css , script.min.js , etc.
But for development (especially for a large project), it is necessary that everything be crammed into different files, a folder, with comments and even documentation.
I’m interested in how you structure and prepare your project (preparation of large projects is especially interesting) so that it is convenient to support it during development, testing, writing documentation and further putting it into production, taking into account modern requirements (concatenated and compressed).
For example, structuring a project like this is only in more detail, how it is all tied up with auto-assembly systems, development environment and debugging =) :
-dev
--style
---sass
---img
--js
---app
---react
--html
-prod
--style
--img
--js
--index.html
-test
--reactTest
-doc
-- public
--index.html
--readmi.mb

Answer 1

Have a look at yeoman.io generators

Answer 2

In fact, the organization of files in a project is a very important issue.
I have a great doc on the topic: Best Practice Recommendations for Angular App Structure .
Through fire and water, on practical examples, for myself, I realized that it is better to organize the project as a "tree of modules" (fractal hierarchy).

Answer 3

Specifically for react.js, here is a piece of 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 and reactify need to be installed with npm
react/app.js contains a react app with modules declared via CommonJS

Answer 4

The question was, how is this done, if at the output all files are minimized and concatenated, not what assemblies are

Answer 5

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