我想构建我的项目,以便可以从CDN加载。
所以在我的页面上我会有类似的东西:
<body aurelia-app="main">
<script src="https://somecdn.com/scripts/vendor-bundle-a2d1fde206.js" data-main="aurelia-bootstrapper"></script>
</body>
我想我需要更改baseDir值,但我不知道是什么。
答案 0 :(得分:0)
我创建了这些手动功能,以便在我"something".map({ String($0) })
build.js
然后更新构建的gulp任务以执行这些新功能并导入// 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("."));
}
和path
依赖项
url