ideal optimization with Gulp!

i.md

The key gulp plugins used are

gulp-inject //: injects automatically the js files (vendors are added manually)

gulp-useref //: otpimizes and copies

gulpfile

gulp.task('index', function () {
  var sources = gulp.src(dir.src.js, {read: false});

  return gulp.src('./src/index.html')
            //reference the files injected relative to index.html
            .pipe(inject(sources, {relative: true}))
            .pipe(gulp.dest('./src'));
});



gulp.task('optimize', function () {
    var assets = useref.assets();

  //this will copy index.html into the dist directory with the newly created
  //optimized assets along with it
    return gulp.src('src/index.html')
        .pipe(assets)
        .pipe(assets.restore())
        .pipe(useref())
        .pipe(gulp.dest('./dist'));
});

	<!-- build:js js/main.js -->
		<script src="vendor/angular/angular.js"></script>
		<script src="vendor/angular-route/angular-route.js"></script>
		<script src="vendor/angular-resource/angular-resource.js"></script>
	  	<script src="vendor/angular-google-chart/ng-google-chart.js"></script>
		<!-- inject:js -->
			<script src="app/app.js"></script>
			<script src="app/charts/chart.js"></script>
			<script src="common/resources/chart.js"></script>
			<script src="common/directives/chart/chart.controller.js"></script>
			<script src="common/directives/chart/chart.directive.js"></script>
			<script src="common/directives/scrollWhen/scroll.js"></script>
			<script src="common/directives/chart/agg_functions/agg_functions.js"></script>
			<script src="common/directives/chart/chart_helpers/chart_helpers.js"></script>
		<!-- endinject -->
	<!-- endbuild -->