Node.js 减少将bower_组件捆绑在一起的HTTP请求？

我正在开发一个web应用程序，使用了大约20个bower_组件（bootstrap、jquery、一些jquery插件，如cookie和JSON、mousewheel、mustache、下划线等）

所有这些插件都非常小（除了bootstrap和jquery），但都加载了一个专用的“”标记

这使得我的页面需要20个微javascript文件，这使得页面加载缓慢

我想将所有这些脚本捆绑在一起并加载捆绑包

我尝试过gulp bower src，但它只是帮助我丑化它们并将它们移动到“lib”文件夹中。。。无法找到一种方法将它们全部压缩在一起

这是我的吞咽任务

var filter = gulpFilter("**/*.js", "!**/*.min.js");

gulp.task("default", function () {
    bowerSrc()
    .pipe(filter)
    .pipe(uglify())
    .pipe(filter.restore())
    .pipe(gulp.dest(__dirname + "/public/lib"));
});

如何操作？

您可以使用将所有这些微文件捆绑到一个资产中

var concat = require('gulp-concat');
var filter = gulpFilter("**/*.js", "!**/*.min.js");

gulp.task("default", function () {
    bowerSrc()
    .pipe(filter)
    .pipe(uglify())
    .pipe(concat('bundle.js'))
    .pipe(filter.restore())
    .pipe(gulp.dest(__dirname + "/public/lib"));
});

这将把所有经过过滤和丑化的文件作为

bundle.js

合并到目录

public/lib

中。请记住，在连接这些文件时，文件的顺序很重要。我猜gulp bower src不会根据依赖关系图对脚本进行排序（我在文档中没有找到任何内容），因此可能需要您手动按正确的顺序选择bower文件

手动订购/选择bower部件可以通过以下方式替换

bowerSrc（）

gulp.src(['./bower_components/jquery/jquery.js', './bower_components/jquery-ui/jquery-ui.js', './bower_components/jquery-swift-color-picker/color.js']);

---

这可能看起来有点笨拙，但顺序很重要。

谢谢，我如何指定文件的顺序？我添加了一个示例来选择和排序bower组件。