Question

我正在开发一个Web应用程序，我正在使用大约20个bower_components（bootstrap，jquery，一些jquery插件，如cookie和serializejson，mousewheel，小胡子，下划线等）。

所有这些插件都很小（除了bootstrap和jquery），但是加载了一个专用的“”标签。

这使我的页面要求提供20个微型javascript文件，这会使页面加载缓慢。

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

我尝试过使用gulp-bower-src，但它只是帮助我对它们进行uglify并将它们移动到“lib”文件夹中......无法找到一种将它们压缩在一起的方法。

这是我的gulp任务atm

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

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

我该怎么办？

Answer 1

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

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文件。

手动订购/选择凉亭组件可以通过以某种方式用bowerSrc()代替

来完成

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

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

减少将bower_components捆绑在一起的HTTP请求？

1 个答案: