javascript - angular gulp - how to split js file in dist folder according to each src folder -

i'm using gulp-angular projet , problem don't have enought experience node , gulp modify default scripts task.

i want able generate each folder of app create optimized js file contains others js files of specific folder , repeat process each folder. something that

here's default file done: ** build.js **

'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: '<!-- inject:partials -->',       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 }));   });    // applies fonts bower dependencies   // custom fonts handled "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']); }; 

once run cmd :

gulp build 

all html, css, js etc... files minified, uglyfied,concatenated etc... , put in dist folder structure:

──  dist/ │   │   ├──  styles/ │   │   │   │   ├──  app-e4a4643d.css │   │   │   │   └──  vendor-2183d05f.css │   │   ├──  scripts/ │   │   │   ├──  app-078d1fc3.js │   │   │   ├──  vendor-b58797da.js │   ├──  404.html │   ├──  favico.ico │   └──  index.html 

also, don't understant how names of optimized files generated.

so recap, want put in dist/scripts folder amount of javascript files equals amount of existing views in app , rename them wish...

is there can explain me shoud do?

start simple, first gulp 2 css files learn how works step step

1. create gulp task , name 'css'

   gulp.task('css', function(){ //code goes here })

2. create array of files want concatenate, using *.filetype include in directory

   gulp.src(['filename1','filename2','every/css/file/inthis/dir/*.css])

3. concatenate result, creates main.css file in public dir concatenated , compiled assets

   .pipe(concat('main.css')) .pipe(gulp.dest('public/css/'));

4. now in terminal run gulp css

5. all below

   gulp.task('css', function () { gulp.src([ './bower_components/angular-material/angular-material.css', './assets/css/*.css' ]) .pipe(concat('main.css')) .pipe(gulp.dest('public/css/')); });

also last not least if want try little challenge, try compiling sass, use node-bourbon