Webogram: Code reorganization

[cbrwizard]

I have a strong feeling that improving the project would be much more efficient if files would have been properly separated.
Great examples are less and js files. For instance, https://github.com/zhukov/webogram/blob/master/app/less/desktop.less could be chopped into logically separated folders with files, each of them with maximum of ~100 lines, which is better than having a single file with 2220 lines. Another example is https://github.com/zhukov/webogram/blob/master/app/js/controllers.js file, where it might be easy to separate the file by moving each controller into its' file in a controllers folder.
Is there any specific reason why it was chosen to store all code in single huge files? I am not criticizing, just looking for a place to improve the code stability.

[zhukov]

The problem I see is how to organize these files' includes after splitting.
Should we manually add all the <script> tags for each new controller, etc?

[cbrwizard]

What about keeping js source files separated and using Gulp to move them to one file and minimize them? Then you can use just one <script> tag for a minimized version both in production and development.

[fitiskin]

@cbrwizard I think that's good idea to separate .less files (totally no problems after do it), but in .js case we need to add an JavaScript module loader like RequireJS into the project.

[suissa]

@ArtemFitiskin I dont think, can use the regular angular modules like everyone.

[migueloop]

@ zhukov https://github.com/migueloop/encuentra.me this project does this. It adds scripts and css automatically to html.

It can be possible using something like that (this is for Grunt)

 // Automatically inject Bower components into the HTML file
   wiredep: {
      app: {
        src: ['<%= config.app %>/index.html'],
        ignorePath: /^(\.\.\/)*\.\./
      },
      sass: {
      src: ['<%= config.app %>/styles/{,*/}*.{scss,sass}'],
      ignorePath: /^(\.\.\/)+/
    }