Growler Growler - 3 months ago 13
Javascript Question

gulp build task - concat and minify modules

What is a good strategy for concatenating and minifying modules?

I want to take this:

<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...


And make it this:

<script src="js/all_bower_components.js"></script>


I am running this build process for my other js files, which are concatenated and minified into
main.js
, but that's easy because my folder structure for my own JS files is relatively predictable. But my bower components is not:

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


I am attempting it as such: Loop through all components and sub folders and simply search for
.js
files... but again, this could be including things I do not need 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'));
});


Any thoughts?

Answer

have you tried main-bower-files? this gulp plugin will capture all your base bower .js and .css by looking in your components' bower.json file for which files to grab (those listed as main). you can override the defaults within your call to the plugin for any requirements that don't match their bower.json config. i've found this very useful for bundling a vendor.js and vendor.css for a dependency-heavy app.

good luck!

Comments