プロジェクトをビルドして、CDNからロードできるようにします。aurelia.jsonをCDN用に構築するにはどうすればよいですか？
<body aurelia-app="main"> <script src="https://somecdn.com/scripts/vendor-bundle-a2d1fde206.js" data-main="aurelia-bootstrapper"></script> </body>
私はBASEDIR値を変更する必要があると思うが、私は何を知っていない：
だから私のページの私のようなものがあるでしょう。
私はその後、これらの新しい機能を実行するようにビルドの一気のタスクを更新し、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
);
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("."));
}
でビルド中にすべての私の参照を更新するために、これらのマニュアルの関数を作成
私はaurelia.jsonを変更することでそれを行う方法はないと思います。あなたは、それを行うために麻薬のタスクを作成する必要があります。 –