在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路径。

基本上，您使用wer或只是复制粘贴安装供应商脚本，并使用本地路径将它们注入到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失败(无论出于何种原因)，您的页面仍然可以工作。

Answer 2

我在一个类似的用例中使用了gulp-replace:

html:

<!-- replace:google-places -->

杯:

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;
    }
  }