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

Современные требования ставят задачу перед 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
  • Вопрос задан
  • 22713 просмотров
Пригласить эксперта
Ответы на вопрос 5
@7rulnik
Посмотрите на генераторы yeoman.io
Ответ написан
Комментировать
ColCh
@ColCh
Веб разработчик
На самом деле, организация файлов в проекте - очень важный вопрос.
У меня есть отличная дока по теме: Best Practice Recommendations for Angular App Structure.
Сквозь огонь и воду, на практических примерах, для себя, понял, что лучше организовывать проект как "дерево модулей" (фрактальная иерархия).
Ответ написан
Комментировать
ajaxtelamonid
@ajaxtelamonid
Laravel
Конкретно для 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
Ответ написан
Комментировать
@zjoin
Вопрос был, как это делается, если на выходе все файлы минимизируются и конкатинируются, не какие есть сборки
Ответ написан
Комментировать
LB777
@LB777 Автор вопроса
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы