Growler Growler - 1 year ago 88
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>

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
, but that's easy because my folder structure for my own JS files is relatively predictable. But my bower components is not:

other random js files which aren't the ones I need
bunch of other crap

I am attempting it as such: Loop through all components and sub folders and simply search for
files... but again, this could be including things I do not need like
in Angular:

gulp.task('modules', function() {
return gulp.src(['bower_components/**/*.js'])

Any thoughts?

Answer Source

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!

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download