Building a project under Angular. How does anyone do it?

Question

JavaScript

Recently, I have been writing a lot in AngularJS. Medium projects (2-4K lines). There was a question about the assembly of the project.

GruntJS is used for assembly, at the moment I use the following approach for myself (borrowed from the grunt file of Angular itself:
every directive, controller, service, etc. in a separate file. Everything is divided into catalogs (by modules and by purpose). There is a file AppFiles.json which contains the list of all files divided into separate modules. Next, modules are assembled, concatenation is performed, and these modules are already used in the index. The advantages of this approach are obvious: everything is easy to find, any filter, service or directive of interest ... The disadvantages are also obvious - when changing one single file, you have to rebuild the entire project. The task has so far been solved through watchers, but I don't like it. On average, there are about 50-100 files in projects, so connecting each one separately is also not an option. I thought of writing a mini-plugin that will collect modules like this:

<!-- module:app dist:dist/someModule.js -->
<script src="src/someModule/someModule.js"></script>
<script src="src/someModule/services/TestService.js"></script>
...
<!-- endmodule-->

It would be possible, when building on the basis of this, to concatenate and at the same time replace this entire block by connecting a single js file. And during development, the files would be loaded in a row, so that if you change any of them, you would not need to rebuild the project.
But then again, that's a bit too much. You can also prescribe targets and describe what and how should be collected in the grun file, but again, doubts gnaw.

How do you organize a big project? The framework is not that important.

Answer 1

I use yeoman (it sets up Grunt). You can also look at ng-boilerplate

Answer 2

in our project, several watches work through the grunt concurrent module,
one for all css, the second for angular, the third for jquery + or to it, etc.