在gulp-inject中包含CDN源

Question

我试图将CDN和其他HTTP资源放入由gulp-inject修改的脚本中.

我在存储库中创建了一个相应的问题.

要点是我希望沿着这些方向发挥作用:

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>

有人有什么想法？

Answer 1

我写了一个插件,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失败时(无论出于何种原因)您的页面仍然有效.