如何配置 aurelia.json 以构建 CDN？答案

【问题标题】：How do I configure aurelia.json to build for a CDN?如何配置 aurelia.json 以构建 CDN？
【发布时间】：2017-05-24 22:42:35
【问题描述】：

我想构建我的项目，以便可以从 CDN 加载它。

所以在我的页面上我会有类似的内容：

<body aurelia-app="main"> <script src="https://somecdn.com/scripts/vendor-bundle-a2d1fde206.js" data-main="aurelia-bootstrapper"></script> </body>

我认为我需要更改 baseDir 值，但我不知道要更改什么。

【问题讨论】：

我认为没有办法通过更改 aurelia.json 来做到这一点。您必须创建一个 gulp 任务来为您执行此操作。

标签： aurelia

【解决方案1】：

我创建了这些手动函数来更新我在 build.js 中构建期间的所有引用

// this function needs to run BEFORE writeBundles
// so all the img src URLs can be prepended with the correct cdnUrl before being bundled
function replaceSourceCdnUrl() {
  if (!cdnUrl)
    return Promise.resolve();

  return gulp.src("src/**/*.*")
    // find img src attributes with either single or double quotes
    .pipe(replace(/img.*src=["']([^\\\"]+).*/g, function(match, p1) {
      return (p1.indexOf(cdnUrl) > -1) ? match : match.replace(new RegExp(p1, 'g'), url.resolve(cdnUrl, p1));
    }))
    // find img src.bind attributes with single quotes, to append double quoted cdn url
    .pipe(replace(/img.*src.bind='([^\\\"]+).*/g, function(match, p1) {
      return (p1.indexOf(cdnUrl) > -1) ? match : match.replace(new RegExp(p1, 'g'), `"${cdnUrl}" + ${p1}`);
    }))
    
    // find img src.bind attributes with double quotes, to append single quoted cdn url
    .pipe(replace(/img.*src.bind="([^\\\"]+).*/g, function(match, p1) {
      return (p1.indexOf(cdnUrl) > -1) ? match : match.replace(new RegExp(p1, 'g'), `'${cdnUrl}' + ${p1}`);
    }))
    
    .pipe(gulp.dest("src/"));
}

function replaceCssCdnUrl() {
  if (!cdnUrl)
    return Promise.resolve();

  return gulp.src("css/**/*.*")
    // find url values in css files
    .pipe(replace(/url\(["'](.*)["']/g, function(match, p1) {
      return (p1.indexOf(cdnUrl) > -1) ? match : match.replace(new RegExp(p1, 'g'), url.resolve(cdnUrl, p1));
    }))
    .pipe(gulp.dest("css/"));
}

// update the index file BEFORE AND AFTER writeBundles
// as the aurelia-cli.bundle searches for the exact output name when updating the revision bundle
// however it then uses path.posix.join() to update the index script src
// causing the cdnUrl to be updated with only 1 slash, i.e. http:/
function replaceIndexCdnUrl() {
  if (!cdnUrl)
    return Promise.resolve();

  // https://www.npmjs.com/package/gulp-replace#regex-replace-with-function-callback
  // regex - https://stackoverflow.com/a/17190290/5954805
  let outputDir = project.build.targets[0].output;
  let scriptRegex = new RegExp(`script.*src=["']([^\\\"]*${outputDir}*).*`, "g");
  return gulp.src(project.build.targets[0].index)
    // find script src attribute
    .pipe(replace(scriptRegex, function(match, p1) {

      // https://nodejs.org/api/path.html#path_windows_vs_posix
      let posixPath = path.posix.join(cdnUrl, outputDir);
      let resolvedPath = url.resolve(cdnUrl, outputDir);

      return (p1.indexOf(cdnUrl) > -1) ? match : match.replace(new RegExp(posixPath, 'g'), resolvedPath).replace(p1, resolvedPath);
    }))

    //find link shortcut favicon
    .pipe(replace(/<link(?=.*rel="shortcut icon".*).*href=["']([^\\\"]+).*/g, function(match, p1) {
      return (p1.indexOf(cdnUrl) > -1) ? match : match.replace(new RegExp(p1, 'g'), url.resolve(cdnUrl, p1));
    }))
    .pipe(gulp.dest("."));
}

然后更新构建的 gulp 任务以执行这些新功能并导入 path 和 url 依赖项

import path from 'path';
import url from 'url';

let build = gulp.series(
  gulp.parallel(
    replaceIndexCdnUrl,
    replaceSourceCdnUrl,
    replaceCssCdnUrl
  ),
  readProjectConfiguration,
  gulp.parallel(
    transpile,
    processMarkup,
    processCSS,
    copyFiles
  ),
  writeBundles,
  replaceIndexCdnUrl
);

【讨论】：