How can I efficiently concatenate and minify modules in my project?
I have a list of JavaScript files from different bower components:
<script type="text/javascript" src="bower_components/angular-route/angular-route.js"></script>
<script type="text/javascript" src="bower_components/angular-bootstrap/ui-bootstrap-tpls.js"></script>
<script type="text/javascript" src="bower_components/angular-ui-router/release/angular-ui-router.min.js"></script>
<script type="text/javascript" src="bower_components/satellizer/satellizer.min.js"></script>
etc...
My goal is to combine them into a single file like this:
<script src="js/all_bower_components.js"></script>While I already have a build process for my own JS files that works well, concatenating and minifying them into main.js, the structure of bower components is less predictable:
bower_components/
angular/
angular.js
index.js
other random js files which aren't the ones I need
jquery/
dist/
jquery.js
src/
bunch of other crap
Currently, my approach involves looping through all components and subfolders looking for .js files. However, this method may include unnecessary files like index.js in Angular:
gulp.task('modules', function() {
return gulp.src(['bower_components/**/*.js'])
.pipe(concat('modules.js'))
.pipe(uglify())
.pipe(gulp.dest('public/js'));
});
Do you have any suggestions or alternative approaches?