title: Add grunt to an existing App built on AngularJS
body: <p>I have an AngularJS application that was built without yeo, grunt, bower etc.. This is currently done via Rails. But due to certain issues, we are in the process of separating AngularJS app separate from Rails and to use Rails purely as API.</p>
  
  <ul>
  <li>How do i integrate grunt to the existing app? Whether this is even possible.?</li>
  <li>Pit-falls?</li>
  </ul>
  
  <p>As per current architecture of the app, controllers, services, templates, filters, directives are all in separate folders. </p>
  
  <ul>
  <li>Is there any particular folder structure needed to implement grunt?</li>
  </ul>
  
  <p>Basic things that need to be done:</p>
  
  <ul>
  <li>Compress source files into one(controllers into 1 controller, etc)</li>
  <li>Minify</li>
  </ul>
  
  <p><strong>Current gruntFile</strong></p>
  
  <pre><code>module.exports = function(grunt) {
      require('load-grunt-tasks')(grunt);
  
      grunt.initConfig({
          pkg: grunt.file.readJSON("package.json"),
  
  
          clean: ['js/dist/**/*.js'], 
          concat: {
              controllers: {
                  src: ['js/controllers/*.js'],
                  dest: 'js/dist/controller.js'
              },
              models: {
                  src: ['js/services/*.js'],
                  dest: 'js/dist/service.js'
              }
          },
          uglify: {
              options: {
                mangle: false
              },
              my_target: {
                  files: {
                      'js/dist/controller.min.js': ['js/dist/controller.js'],
                      'js/dist/service.min.js': ['js/dist/service.js'],
                      'js/dist/filters.min.js': ['js/filters/filters.js'],
                      'js/dist/directives.min.js': ['js/directives/custom.js'],
                      'js/dist/app.min.js': ['js/app.js']
                  }
              }
          },
          imagemin: {
              dynamic: {
                  files: [{
                      expand: true,
                      cwd: 'assets/images/',
                      src: ['**/*.{png,jpg,gif}'],
                      dest: 'assets/images/'
                  }]
              }
          }
      });
  
      grunt.registerTask('default', ['clean','concat','uglify']);
  };
  </code></pre>
  
  <p>How do i start? Sorry if this seems obvious, but this would be the first time with grunt and hence would like to get proper advice.</p>