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