gulp构建任务-合并并缩小模块

Question

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 1

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!