How to handle project modularization

[robypez]

Hello, I'm starting to use this generator and I'm trying to migrate a project build on the official Ionic template with a modified Gulp.js file.

I organize my app with a lot of subdirectory, in every subdirectory, for example "home", I have home.controller, home.service etc etc.

Is the first time I use Grunt: i see that this generator copy all my js to the www folder but of course they are not concatenated to app.js and they are not invocated by index.html.

How can I use this generator to manage a modular project?

[aitorllj93]

Hi! Simply keep all your js modules (files and folders) in app/scripts and call them in index.html inside the

<!-- build:js scripts/scripts.js -->

tag. Grunt should make all the missing stuff for you

eg.

<!-- build:js scripts/scripts.js -->
<script src="scripts/home/home.service.js"></script>
<script src="scripts/home/home.controller.js"></script>
<!-- endbuild -->

Note:

grunt compress

I think it's what you want

[robypez]

Yes, but I have 40 files... :(

[farantesrodrigues]

Yes, this would be a great thing to automatize... I have to get around by copy-pasting results from this :

var glob = require('glob');
var path = require('path');

glob('scripts/**/*', {}, function(err, files) { 
  for(file in files){ 
    if(path.extname(files[file])==='.js'){ 
      console.log("<script src=\"" + files[file] + "\"></script>");
    } 
  }
});

I'm not sure on how to do it with usemin task in grunt though...

[Alir3z4]

@farantesrodrigues Nice thing to do, but it would be great if there was a task for it

[justadropofwater]

Using grunt-injector something like this does what you are describing

    injector: {
      options: {
            // ....
      },
    // Inject application script files into index.html (doesn't include bower)
      scripts: {
        options: {
          transform: function(filePath) {
            filePath = filePath.replace('/app/', '');
            filePath = filePath.replace('/.tmp/', '');
            return '<script src="' + filePath + '"></script>';
          },
          starttag: '<!-- injector:js -->',
          endtag: '<!-- endinjector -->'
        },
        files: {
          '<%= yeoman.app %>/index.html': [
               [
                 '{.tmp,<%= yeoman.app %>}/{scripts,components}/**/!(*.spec|*.mock).js',
                 '!{.tmp,<%= yeoman.app %>}/scripts/app.js'
               ]
            ]
        }
      },

   .......

 grunt.task.run([
       // ....
      'injector',
       // ....
      'watch'
    ]);