每次我使用 Bower 安装任何依赖项时，都会将我所有的依赖项包含到我的 index.html 中，这太完美了!
The problem:
它分别返回我的所有文件，导致许多不必要的 HTTP 调用。我需要将我所有的 Bower 依赖项连接到一个文件中，这样我最终可以缩小它并应用 HTTP 压缩。
有什么想法吗？
var options = {
bowerJson: config.bower.bowerJson,
directory: config.bower.directory,
ignorePath: config.bower.ingnorePath
};
gulp.task('wiredep', function () {
'use strict';
log('Injectin Bower components into the Layout page');
var options = config.getWiredConfiguration();
var wiredep = require('wiredep').stream;
return gulp
.src(config.layout + 'index.cshtml')
.pipe(wiredep(options))
.pipe($.inject(gulp.src('js/layout/layout.js')))
.pipe(gulp.dest(config.layout));
});
最佳答案
这是一个很老的问题，但我有一个适合我的解决方案，应该也适合其他人。
首先，我们必须了解wiredep 的工作原理。它并不像我之前想象的那么明显，因为 wiredep 默认情况下对您要注入(inject)的 文件进行操作。一个典型的实现如下:
var wiredep = require('wiredep').stream;
gulp.task('bower', function () {
gulp.src('./src/footer.html')
.pipe(wiredep({
ignorePath: '../'
}))
.pipe(gulp.dest('./dest'));
});
查看require 部分，其中stream 函数被分配给wiredep 变量。从这一刻起，您只使用 stream 函数，实际上它不会像您想象的那样返回 bower 组件流。 wiredep 现在对传递给管道的文件进行操作，在上面的示例中是 footer.html 并且管道的输出仍然是 footer.html，但由 wiredep 修改。这就是您最终得到包含 index.cshtml 的 all.js 的原因。它是一个如下所示的管道链:
bower_components
|
V
"src/footer.html" ===> wiredep.stream() ===> gulp.dest() ===> "dest/footer.html"
此时，我们应该问两个问题:如何获得 wiredep 使用的文件列表以及如何使用它们。值得庆幸的是，这些问题都有答案。
如何获取文件列表
这是一个相当简单的任务。首先，修改 require 函数调用以包含整个库:var wiredep = require('wiredep');。从那时起，您可以使用 wiredep 提供的两个额外字段:wiredep().js - 从 bower_components 获取 JS 文件，wiredep ().css 从 bower_components 获取 CSS 文件。
如何使用它们
为了完成这项任务，我使用了非常适合此类工作的 gulp-inject，当然还有 gulp-concat。如果您没有，只需通过 NPM 安装它们(npm install --save-dev gulp-inject gulp-concat)并向您的 gulpfile 添加依赖项。
如果您的示例 index.html 如下所示:
<html>
<head>
<title>Hello World!</title>
<!-- inject:css -->
<!-- endinject -->
</head>
<body>
Hello World!
<!-- inject:js -->
<!-- endinject -->
</body>
</html>
您的gulpfile 将如下所示:
var gulp = require('gulp');
var inject = require('gulp-inject');
var concat = require('gulp-concat');
var wiredep = require('wiredep');
gulp.task('bower', injectBower);
function injectBower() {
var target = gulp.src('./html/index.html');
var js = gulp.src(wiredep().js);
var css = gulp.src(wiredep().css);
return target
.pipe(inject(js.pipe(concat('bower.js')).pipe(gulp.dest('./scripts'))))
.pipe(inject(css.pipe(concat('bower.css')).pipe(gulp.dest('./styles'))))
.pipe(gulp.dest('./html'));
}
现在，在您运行 gulp bower 之后，您的 index.html 应该如下所示:
<html>
<head>
<title>Hello World!</title>
<!-- inject:css -->
<link rel="stylesheet" href="styles/bower.css"/>
<!-- endinject -->
</head>
<body>
Hello World!
<!-- inject:js -->
<script src="scripts/bower.js"></script>
<!-- endinject -->
</body>
</html>
Gulp 将在 scripts 目录中创建串联的 JS 文件，并在 styles 目录中创建串联的 CSS 文件。你可以自由定制这个过程；欲了解更多信息，请访问 gulp-inject页。 gulp-inject 是一个非常灵活的工具，因此您应该能够达到预期的结果。就我而言，在构建生产环境时，我还附加了 gulp-uglify 和 gulp-rev。
有什么问题，尽管问。
关于javascript - 将 wiredep 返回的所有文件连接到一个文件中，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33882041/