Leo*_*ier 4 javascript node.js gulp
每次我使用bower安装任何依赖项都包括我的所有依赖项,index.html这是完美的!
问题:
它将单独返回所有文件,导致许多不必要的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));
});
ita*_*chi 10
这是一个相当古老的问题,但我有一个适合我的解决方案,应该为其他人工作.
首先,我们必须了解wiredep的工作原理.它并不像我之前想象的那么明显,因为默认情况下,wiredep会对你要注入的文件进行操作.典型的实现如下:
var wiredep = require('wiredep').stream;
gulp.task('bower', function () {
gulp.src('./src/footer.html')
.pipe(wiredep({
ignorePath: '../'
}))
.pipe(gulp.dest('./dest'));
});
查看require部分,其中将stream函数分配给wiredep变量.从那时起,您只使用了流功能,实际上并没有像您想象的那样返回凉亭组件流.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-从获取JS文件bower_components,wiredep().css从获得CSS文件bower_components.
为了完成这项任务,我使用了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文件,并在目录中创建连接的CSS文件styles.您可以自由定制此过程; 有关更多信息,请访问gulp-inject页面.gulp-inject是非常灵活的工具,因此您应该能够达到预期的效果.就我而言,在构建生产环境时,我还附加了gulp-uglify和gulp-rev.
如果你有问题,就问吧.
| 归档时间： |
|
| 查看次数： |
2209 次 |
| 最近记录： |