在 gulp-inject 中包含 CDN 源答案

【问题标题】：Include CDN sources in gulp-inject在 gulp-inject 中包含 CDN 源
【发布时间】：2014-03-19 18:53:04
【问题描述】：

我正在尝试将 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>

有人有什么想法吗？

【问题讨论】：

标签： javascript gulp gulp-inject

【解决方案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 失败（无论出于何种原因）时您的页面仍然有效。

【讨论】：

感谢@OverZealous。这绝对是正确的路线，尽管inject 将插入对任意占位符字符串的引用，而gulp-cdnizer 会将它们转换为 CDN 引用。它应该可以工作 - 我会试一试，但它可能会让接下来的人感到困惑。 :)
嗯。我遇到了两个问题。首先，如果文件不存在，它就不起作用。其次，此解决方案可能不适用于 livereload url，例如http://localhost:35728/livereload.js 这是一个目标问题（现在编辑问题以注意这一点）。
如果您没有使用 cdnizer 的本地功能，那么您可能会使用gulp-replace 获得更简单的解决方案。
是的，我想gulp-replace 将是答案，尽管 cdnizer 真的很酷 - 感谢您引起我的注意。
有机会分享您如何使用 gulp-replace。提供的示例非常模糊。

【解决方案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')));

替换位置：

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

【讨论】：