我正在尝试将CDN和其他HTTP资源放入由gulp-inject修改的脚本中。
我在存储库中创建了a corresponding issue。
要点是我希望沿着这些方向发挥作用:
var sources = [
"http://cdnjs.cloudflare.com/ajax/libs/jasmine/1.3.1/jasmine.js",
"./spec/test.js"
]
gulp.task('source', function () {
gulp.src("src/my.html")
.pipe(inject(sources))
.dest("dest/")
})
该结果包含在dest/my.html
:
<script src='http://cdnjs.cloudflare.com/ajax/libs/jasmine/1.3.1/jasmine.js'>
</script>
<script src='/spec/test.js'></script>
有人有任何想法吗?
答案 0 :(得分:8)
我写了一个插件gulp-cdnizer
,专门用来帮助解决这种情况。
它旨在让您在开发过程中保留所有CDN源本地,然后在构建发行版时用CDN路径替换本地路径。
基本上,您使用bower安装供应商脚本或只是复制粘贴,并使用本地路径将它们注入HTML。然后,将gulp-inject
的结果传递到gulp-cdnizer
,它将用CDN路径替换本地路径。
gulp.task('source', function () {
return gulp.src("src/my.html")
.pipe(inject(sources)) // only local sources
.pipe(cdnizer([
{
package: 'jasmine',
file: 'bower_components/jasmine/jasmine.js',
cdn: 'http://cdnjs.cloudflare.com/ajax/libs/jasmine/${version}/jasmine.js'
}
])
.dest("dest/")
});
我喜欢这样做得更好,因为你仍然可以离线开发。 cdnizer库还可以处理本地回退,这可以确保在CDN失败时(无论出于何种原因)您的页面仍可正常工作。
答案 1 :(得分:0)
我将gulp-replace
用于类似的用例:
html:
<!-- replace:google-places -->
gulp:
return gulp.src(path.join(conf.paths.src, '/*.html'))
.pipe($.inject(injectStyles, injectOptions))
.pipe($.inject(injectScripts, injectOptions))
.pipe($.replace('<!-- replace:google-places -->', replacePlaces)) // <-- gulp-replace
.pipe(wiredep(_.extend({}, conf.wiredep)))
.pipe(gulp.dest(path.join(conf.paths.tmp, '/serve')));
replacePlaces:
const replacePlaces = match => {
switch (process.env.NODE_ENV){
case 'dev':
return '<script src="https://maps.googleapis.com/maps/api/js....."></script>';
case 'production':
return '<script src="https://maps.googleapis.com/maps/api/js......"></script>';
default:
return match;
}
}