Javascript 将wiredep返回的所有文件连接到一个文件中
每次我使用bower安装任何依赖项时，都会将所有依赖项包含到我的Javascript 将wiredep返回的所有文件连接到一个文件中,javascript,node.js,gulp,Javascript,Node.js,Gulp,每次我使用bower安装任何依赖项时，都会将所有依赖项包含到我的index.html中，这太完美了 问题： 它会分别返回我的所有文件，导致许多不必要的HTTP调用。我需要将所有bower依赖项连接到一个文件中，以便最终缩小它并应用HTTP压缩 有什么想法吗 var options = { bowerJson: config.bower.bowerJson, directory: config.bower.directory,
index.htmlvar 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));
});
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(concat('all.js'))
.pipe(gulp.dest(config.layout));
});
var concat = require('gulp-concat');
gulp.task('scripts', function() {
return gulp.src('./lib/*.js')
.pipe(concat('all.js'))
.pipe(gulp.dest('./dist/'));
});
这是一个很老的问题，但我有一个对我有效的解决方案，应该对其他人有效 首先，我们必须了解wiredep是如何工作的。这并不像我之前想的那么明显，因为wiredep默认操作的是要注入的文件。典型的实现如下所示：
var wiredep = require('wiredep').stream;
gulp.task('bower', function () {
gulp.src('./src/footer.html')
.pipe(wiredep({
ignorePath: '../'
}))
.pipe(gulp.dest('./dest'));
});
<html>
<head>
<title>Hello World!</title>
<!-- inject:css -->
<!-- endinject -->
</head>
<body>
Hello World!
<!-- inject:js -->
<!-- endinject -->
</body>
</html>
bower_components
|
V
"src/footer.html" ===> wiredep.stream() ===> gulp.dest() ===> "dest/footer.html"
var wiredep=require（'wiredep'）。此后，您可以使用wiredep提供的两个附加字段：wiredep（）.js
-从bower_组件获取js文件，wiredep（）.css
从bower_组件获取css文件
如何使用它们
为了完成这项任务，我使用了非常适合这类工作的gulpinject，当然还有gulpconcat。如果您没有，只需通过NPM安装它们（NPM install--save dev gulp inject gulp concat
）并向gulpfile添加依赖项即可
如果示例index.html如下所示：
var wiredep = require('wiredep').stream;
gulp.task('bower', function () {
gulp.src('./src/footer.html')
.pipe(wiredep({
ignorePath: '../'
}))
.pipe(gulp.dest('./dest'));
});
<html>
<head>
<title>Hello World!</title>
<!-- inject:css -->
<!-- endinject -->
</head>
<body>
Hello World!
<!-- inject:js -->
<!-- endinject -->
</body>
</html>
现在，在运行gulp bower
之后，index.html应该如下所示：
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'));
}
<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将在脚本
目录中创建连接的JS文件，并在样式
目录中创建连接的CSS文件。您可以自由定制此流程；有关更多信息，请访问页面。gulp inject是一个非常灵活的工具，因此您应该能够达到预期的效果。在我的例子中，在构建生产环境时，我还添加了gulp uglify和gulp rev
如果您有任何问题，请提问。如果我采取了该方法，那么我将不得不手动删除``中的所有标记，我建议您尝试一下，并让我知道发生了什么。（不要先手动删除任何内容和备份）：）我将grunt与concat一起使用，不必删除bower注释。我希望它也能起到同样的作用。我试过了。。。但是现在我并没有点击文件来写它，我确实改变了我的代码一次。确保我们的代码是相同的。无论如何，它根本没有在任何地方创建all.js
？它创建了一个新的all.js文件。。。但它基本上是index.cshml的一个副本，扩展名为.js