Включить источники CDN в gulp-inject

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 выходит из строя (по любой причине).

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