Gulp-cdnizer - 不替换源链接 [英] Gulp-cdnizer - Not replacing source links
问题描述
我试图让gulp-cdnizer工作，但它所做的只是将文件取出并将未处理的文件吐出到目标文件夹。也许我的选项设置是错误的或者吞咽任务不起作用。如何配置gulp-cdnizer以使用自定义的bower_components路径？
Gulp任务：
gulp .task（'makeCdn'，function（）{
return gulp.src（'./app/ ** / *。html'）
.pipe（cdnizer（{
bowerComponents：'./vendor/bower_components'，
allowRev：true，
allowMin：true，
文件：[
{
file：'/ vendor / bower_components /angular/angular.js'，
包：'angular'，
// angular在bower内部有一个奇怪的版本字符串，带有额外的信息
//直接使用major.minor.patch确保它可以与CDN
cdn：'//ajax.googleapis.com/ajax/libs/angularjs/ $ {major}。$ {minor}。$ {patch} /angular.min.js'$ b一起使用
$）
.pipe（gulp.dest（'./ dist /'））
）;
}）;
HTML文件'./ app / test / test.html '：
$ b
<！DOCTYPE html>
< html xmlns =http://www.w3.org/1999/xhtml>
< head>
< title>< / title>
< / head>
< body>
< script src =/ vendor / bower_components / angular / angular.js>< / script>
< script src =/ vendor / bower_components / bootstrap / dist / js / bootstrap.js>< / script>
< / body>
< / html>
文件夹结构：
需要什么做到让gulp-cdnizer工作？
原来你在你的gulp文件中有几个拼写错误。你已经将所有东西都包装在第一个 gulp.src（）。pipe（）中，而不是被链接在一起。
如果你删除参数和空白，你可以看到你的是这样的：
$ b
return gulp.src（...）
.pipe（
cdnizer（...）。pipe（gulp.dest（...））
）;
当它应该是：
.pipe（cdnizer（...））
.pipe（gulp.dest（' ./dist/'））;
老实说，我不确定为什么这样做会失败，但是 cdnizer（）被绕过。
只需修改你的嵌套/圆括号，就可以完成设置。
$ b
gulp.task（'makeCdn'，function（）{
return gulp.src（'./app/ ** / *。html'）
.pipe（cdnizer（{
bowerComponents：'./vendor/bower_components'，
allowRev： true，
allowMin：true，
files：[
{
file：'/vendor/bower_components/angular/angular.js'，
package：'angular' ，
// angular在bower中有一个奇怪的版本字符串，带有额外的信息
//使用major.minor.patch直接确保它可以与CDN一起工作
cdn：'// aj ax.googleapis.com/ajax/libs/angularjs/ $ {major}。$ {minor}。$ {patch} /angular.min.js'
}
]
}））
.pipe（gulp.dest（'./ dist /'））;
}）;
如果您的 .bowerrc也可以消除包装器对象和默认选项在正确的位置：
gulp.task（'makeCdn '，function（）{
return gulp.src（'./app/ ** / *。html'）
.pipe（cdnizer（[
{
文件：'/vendor/bower_components/angular/angular.js'，
包：'angular'，
// angular在bower内部有一个奇怪的版本字符串，带有额外的信息
/ / using major.minor.patch直接确保它可以与CDN
cdn一起使用：'//ajax.googleapis.com/ajax/libs/angularjs/ $ {major}。$ {minor}。$ {patch} / angular.min.js'
}
）））
.pipe（gulp.dest（'./ dist /'））;
}）;
I'm trying to get gulp-cdnizer to work but all it does is take in the file and spits out the file unprocessed to the destination folder. Perhaps my option settings are wrong or the gulp task isn't working. How do you configure the gulp-cdnizer to work with a custom bower_components path?
Gulp task:
gulp.task('makeCdn', function () {
return gulp.src('./app/**/*.html')
.pipe(cdnizer({
bowerComponents: './vendor/bower_components',
allowRev: true,
allowMin: true,
files: [
{
file: '/vendor/bower_components/angular/angular.js',
package: 'angular',
// angular has a bizarre version string inside bower, with extra information.
// using major.minor.patch directly ensures it works with the CDN
cdn: '//ajax.googleapis.com/ajax/libs/angularjs/${ major }.${ minor }.${ patch }/angular.min.js'
}
]
})
.pipe(gulp.dest('./dist/'))
);
});
HTML file './app/test/test.html':
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<script src="/vendor/bower_components/angular/angular.js"></script>
<script src="/vendor/bower_components/bootstrap/dist/js/bootstrap.js"></script>
</body>
</html>
Folder Structure:
What needs to be done to get gulp-cdnizer to work?
Turns out you have a couple of typos in your gulpfile. You have everything wrapped inside the first gulp.src().pipe(), rather than being chained.
If you strip the arguments and whitespace, you can see what you have is this:
return gulp.src(...)
.pipe(
cdnizer(...).pipe(gulp.dest(...))
);
When it should be:
return gulp.src(...)
.pipe(cdnizer(...))
.pipe(gulp.dest('./dist/'));
Honestly, I'm not sure why this failed the way it did, but the result of cdnizer() was being bypassed.
Simply fix your nesting / parentheses, like so, and you'll be all set.
gulp.task('makeCdn', function () {
return gulp.src('./app/**/*.html')
.pipe(cdnizer({
bowerComponents: './vendor/bower_components',
allowRev: true,
allowMin: true,
files: [
{
file: '/vendor/bower_components/angular/angular.js',
package: 'angular',
// angular has a bizarre version string inside bower, with extra information.
// using major.minor.patch directly ensures it works with the CDN
cdn: '//ajax.googleapis.com/ajax/libs/angularjs/${ major }.${ minor }.${ patch }/angular.min.js'
}
]
}))
.pipe(gulp.dest('./dist/'));
});
You can also eliminate the wrapper object and default options, if your .bowerrc is in the right place:
gulp.task('makeCdn', function () {
return gulp.src('./app/**/*.html')
.pipe(cdnizer([
{
file: '/vendor/bower_components/angular/angular.js',
package: 'angular',
// angular has a bizarre version string inside bower, with extra information.
// using major.minor.patch directly ensures it works with the CDN
cdn: '//ajax.googleapis.com/ajax/libs/angularjs/${ major }.${ minor }.${ patch }/angular.min.js'
}
]))
.pipe(gulp.dest('./dist/'));
});
这篇关于Gulp-cdnizer - 不替换源链接的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
