title: angular gulp - how to split js file in dist folder according to each src folder
body: <p>i'm using <a href="https://github.com/Swiip/generator-gulp-angular" rel="nofollow">gulp-angular</a> for my projet and my problem is that i don't have enought experience with node and gulp to modify the default scripts task.</p>
  
  <p>I want to be able to generate for each folder of my app to create an optimized js file who contains all the others js files of this specific folder and repeat this process for each folder. <a href="https://github.com/gulpjs/gulp/blob/master/docs/recipes/running-task-steps-per-folder.md" rel="nofollow">something like that</a></p>
  
  <p>here's the default file where almost everything is done: ** <strong>build.js</strong> **</p>
  
  <pre><code>'use strict';
  
  var gulp = require('gulp');
  
  var $ = require('gulp-load-plugins')({
    pattern: ['gulp-*', 'main-bower-files', 'uglify-save-license', 'del']
  });
  
  module.exports = function(options) {
    gulp.task('partials', function () {
      return gulp.src([
        options.src + '/app/**/*.html',
        options.tmp + '/serve/app/**/*.html'
      ])
        .pipe($.minifyHtml({
          empty: true,
          spare: true,
          quotes: true
        }))
        .pipe($.angularTemplatecache('templateCacheHtml.js', {
          module: 'gulpTest',
          root: 'app'
        }))
        .pipe(gulp.dest(options.tmp + '/partials/'));
    });
  
    gulp.task('html', ['inject', 'partials'], function () {
      var partialsInjectFile = gulp.src(options.tmp + '/partials/templateCacheHtml.js', { read: false });
      var partialsInjectOptions = {
        starttag: '&lt;!-- inject:partials --&gt;',
        ignorePath: options.tmp + '/partials',
        addRootSlash: false
      };
  
      var htmlFilter = $.filter('*.html');
      var jsFilter = $.filter('**/*.js');
      var cssFilter = $.filter('**/*.css');
      var assets;
  
      return gulp.src(options.tmp + '/serve/*.html')
        .pipe($.inject(partialsInjectFile, partialsInjectOptions))
        .pipe(assets = $.useref.assets())
        .pipe($.rev())
        .pipe(jsFilter)
        .pipe($.ngAnnotate())
        .pipe($.uglify({ preserveComments: $.uglifySaveLicense })).on('error', options.errorHandler('Uglify'))
        .pipe(jsFilter.restore())
        .pipe(cssFilter)
        .pipe($.csso())
        .pipe(cssFilter.restore())
        .pipe(assets.restore())
        .pipe($.useref())
        .pipe($.revReplace())
        .pipe(htmlFilter)
        .pipe($.minifyHtml({
          empty: true,
          spare: true,
          quotes: true,
          conditionals: true
        }))
        .pipe(htmlFilter.restore())
        .pipe(gulp.dest(options.dist + '/'))
        .pipe($.size({ title: options.dist + '/', showFiles: true }));
    });
  
    // Only applies for fonts from bower dependencies
    // Custom fonts are handled by the "other" task
    gulp.task('fonts', function () {
      return gulp.src($.mainBowerFiles())
        .pipe($.filter('**/*.{eot,svg,ttf,woff,woff2}'))
        .pipe($.flatten())
        .pipe(gulp.dest(options.dist + '/fonts/'));
    });
  
    gulp.task('other', function () {
      return gulp.src([
        options.src + '/**/*',
        '!' + options.src + '/**/*.{html,css,js}'
      ])
        .pipe(gulp.dest(options.dist + '/'));
    });
  
    gulp.task('clean', function (done) {
      $.del([options.dist + '/', options.tmp + '/'], done);
    });
  
    gulp.task('build', ['html', 'fonts', 'other']);
  };
  </code></pre>
  
  <p>Once we run the cmd :</p>
  
  <pre><code>gulp build
  </code></pre>
  
  <p>All the html, css, js etc... files are minified, uglyfied,concatenated etc... and put in a dist folder with this structure:</p>
  
  <pre><code>──  dist/
  │   │   ├──  styles/
  │   │   │   │   ├──  app-e4a4643d.css
  │   │   │   │   └──  vendor-2183d05f.css
  │   │   ├──  scripts/
  │   │   │   ├──  app-078d1fc3.js
  │   │   │   ├──  vendor-b58797da.js
  │   ├──  404.html
  │   ├──  favico.ico
  │   └──  index.html
  </code></pre>
  
  <p>Also, i don't understant how the names of the optimized files are generated.</p>
  
  <p>So to recap, i want to put in the dist/scripts folder an amount of javascript files equals to the amount of the existing views in the app and rename them as i wish...</p>
  
  <p>Is there someone who can explain me what i shoud do?</p>