我使用命令ng new APPNAME创建了一个角度应用程序。我想使用cake build来部署这个应用程序。是否可以使用蛋糕搭建？如果是这样的话？我的目标是将它部署到azure，但我需要使用Cake构建。我已将所有源代码上传到git repository。
答案 0 :(得分：9)
因此，使用Angular CLI构建一个简单的vanilla应用程序看起来就像这样
string target = Argument("target", "Build");
FilePath ngPath = Context.Tools.Resolve("ng.cmd");
FilePath npmPath = Context.Tools.Resolve("npm.cmd");
DirectoryPath outputPath = MakeAbsolute(Directory("./output"));
Action<FilePath, ProcessArgumentBuilder> Cmd => (path, args) => {
var result = StartProcess(
path,
new ProcessSettings {
Arguments = args
});
if(0 != result)
{
throw new Exception($"Failed to execute tool {path.GetFilename()} ({result})");
}
};
Task("Install-AngularCLI")
.Does(() => {
if (ngPath != null && FileExists(ngPath))
{
Information("Found Angular CLI at {0}.", ngPath);
return;
}
DirectoryPath ngDirectoryPath = MakeAbsolute(Directory("./Tools/ng"));
EnsureDirectoryExists(ngDirectoryPath);
Cmd(npmPath,
new ProcessArgumentBuilder()
.Append("install")
.Append("--prefix")
.AppendQuoted(ngDirectoryPath.FullPath)
.Append("@angular/cli")
);
ngPath = Context.Tools.Resolve("ng.cmd");
});
Task("Clean")
.Does( ()=> {
CleanDirectory(outputPath);
});
Task("Install")
.IsDependentOn("Clean")
.Does( ()=> {
Cmd(npmPath,
new ProcessArgumentBuilder()
.Append("install")
);
});
Task("Build")
.IsDependentOn("Install-AngularCLI")
.IsDependentOn("Install")
.Does( ()=> {
Cmd(ngPath,
new ProcessArgumentBuilder()
.Append("build")
.Append("--output-path")
.AppendQuoted(outputPath.FullPath)
);
});
RunTarget(target);
基本上是
如果你想运行构建并在kudu上发布你可以使用Cake.Kudu addin和KuduSync工具，通过添加tool和addin预处理器指令来声明依赖关系： / p>
#tool nuget:?package=KuduSync.NET&version=1.3.1
#addin nuget:?package=Cake.Kudu&version=0.6.0
发布任务看起来像这样
Task("Publish")
.IsDependentOn("Build")
.Does( ()=> {
Kudu.Sync(outputPath);
});
要让kudu知道它应该使用自定义部署脚本，您需要添加一个.deployment文件，告诉它这样做，看起来像这样：
[config]
command = deploy.cmd
一个定制的boostrapper来安装Cake i kudu环境，看起来像这样：
@ECHO OFF
REM SET Cake
SET CAKE_VERSION=0.23.0
SET CAKE_FOLDER=Cake.%CAKE_VERSION%
SET PATH=%~dp0\Tools;%PATH%
REM Cleanup any old Cake versions
FOR /f "delims=" %%c IN ('dir /AD /B "Tools\Cake*"') DO (
IF NOT "%%c" == "%CAKE_FOLDER%" (RD /S /Q "Tools\%%c")
)
REM Install Dependencies
IF NOT EXIST "Tools" (md "Tools")
IF NOT EXIST "Tools\Addins" (md "Tools\Addins")
IF NOT EXIST "Tools\%CAKE_FOLDER%\Cake.exe" (
echo Downloading Cake %CAKE_VERSION%
nuget install Cake -Version %CAKE_VERSION% -OutputDirectory "Tools" -Source https://api.nuget.org/v3/index.json
)
REM Execute deploy
Tools\%CAKE_FOLDER%\Cake.exe -version
Tools\%CAKE_FOLDER%\Cake.exe build.cake --Target="Publish"
这基本上只是清理任何旧的Cake版本，如果尚未安装，则提取0.23.0。
完整的Cake脚本看起来像下面的
#tool nuget:?package=KuduSync.NET&version=1.3.1
#addin nuget:?package=Cake.Kudu&version=0.6.0
string target = Argument("target", "Build");
FilePath ngPath = Context.Tools.Resolve("ng.cmd");
FilePath npmPath = Context.Tools.Resolve("npm.cmd");
DirectoryPath outputPath = MakeAbsolute(Directory("./output"));
Action<FilePath, ProcessArgumentBuilder> Cmd => (path, args) => {
var result = StartProcess(
path,
new ProcessSettings {
Arguments = args
});
if(0 != result)
{
throw new Exception($"Failed to execute tool {path.GetFilename()} ({result})");
}
};
Task("Install-AngularCLI")
.Does(() => {
if (ngPath != null && FileExists(ngPath))
{
Information("Found Angular CLI at {0}.", ngPath);
return;
}
DirectoryPath ngDirectoryPath = MakeAbsolute(Directory("./Tools/ng"));
EnsureDirectoryExists(ngDirectoryPath);
Cmd(npmPath,
new ProcessArgumentBuilder()
.Append("install")
.Append("--prefix")
.AppendQuoted(ngDirectoryPath.FullPath)
.Append("@angular/cli")
);
ngPath = Context.Tools.Resolve("ng.cmd");
});
Task("Clean")
.Does( ()=> {
CleanDirectory(outputPath);
});
Task("Install")
.IsDependentOn("Clean")
.Does( ()=> {
Cmd(npmPath,
new ProcessArgumentBuilder()
.Append("install")
);
});
Task("Build")
.IsDependentOn("Install-AngularCLI")
.IsDependentOn("Install")
.Does( ()=> {
Cmd(ngPath,
new ProcessArgumentBuilder()
.Append("build")
.Append("--output-path")
.AppendQuoted(outputPath.FullPath)
);
});
Task("Publish")
.IsDependentOn("Build")
.Does( ()=> {
Kudu.Sync(outputPath);
});
RunTarget(target);
在Azure网站上运行的Kudu构建的输出看起来像这样
+## #;;'
#;;# .+;;;;+,
'+;;#;,+';;;;;'#.
++'''';;;;;;;;;;# ;#;
##';;;;++'+#;;;;;'. `#:
;# '+'';;;;;;;;;'#` #.
`#, .'++;;;;;':..........#
'+ `.........';;;;':.........#
#..................+;;;;;':........#
#..................#';;;;;'+''''''.#
#.......,:;''''''''##';;;;;'+'''''#,
#''''''''''''''''''###';;;;;;+''''#
#''''''''''''''''''####';;;;;;#'''#
#''''''''''''''''''#####';;;;;;#''#
#''''''''''''''''''######';;;;;;#'#
#''''''''''''''''''#######';;;;;;##
#''''''''''''''''''########';;;;;;#
#''''''''''''++####+;#######';;;;;;#
#+####':,` ,#####';;;;;;'
+##'''''+.
___ _ ___ _ _ _
/ __\__ _| | _____ / __\_ _(_) | __| |
/ / / _` | |/ / _ \/__\// | | | | |/ _` |
/ /___ (_| | < __/ \/ \ |_| | | | (_| |
\____/\__,_|_|\_\___\_____/\__,_|_|_|\__,_|
Version 0.23.0+Branch.main.Sha.67afe72f1c21a8a3cfd96d3969fb2591d62f37ff
========================================
Install-AngularCLI
========================================
Found Angular CLI at D:/home/site/repository/tools/ng/ng.cmd.
========================================
Clean
========================================
========================================
Install
========================================
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^1.0.0 (node_modules\chokidar\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.1.3: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"ia32"})
npm WARN codelyzer@3.2.2 requires a peer of @angular/compiler@^2.3.1 || >=4.0.0-beta <5.0.0 but none was installed.
npm WARN codelyzer@3.2.2 requires a peer of @angular/core@^2.3.1 || >=4.0.0-beta <5.0.0 but none was installed.
========================================
Build
========================================
Date: 2017-11-17T10:36:45.847Z
Hash: 3b11c732f8aa65f3a08c
Time: 8815ms
chunk {inline} inline.bundle.js, inline.bundle.js.map (inline) 5.83 kB [entry] [rendered]
chunk {main} main.bundle.js, main.bundle.js.map (main) 7.79 kB [initial] [rendered]
chunk {polyfills} polyfills.bundle.js, polyfills.bundle.js.map (polyfills) 200 kB [initial] [rendered]
chunk {styles} styles.bundle.js, styles.bundle.js.map (styles) 11.3 kB [initial] [rendered]
chunk {vendor} vendor.bundle.js, vendor.bundle.js.map (vendor) 2.29 MB [initial] [rendered]
========================================
Publish
========================================
KuduSync.NET from: 'D:\home\site\repository\output' to: 'D:\home\site\wwwroot'
Copying file: 'favicon.ico'
Copying file: 'index.html'
Copying file: 'inline.bundle.js'
Copying file: 'inline.bundle.js.map'
Copying file: 'main.bundle.js'
Copying file: 'main.bundle.js.map'
Copying file: 'polyfills.bundle.js'
Copying file: 'polyfills.bundle.js.map'
Copying file: 'styles.bundle.js'
Copying file: 'styles.bundle.js.map'
Copying file: 'vendor.bundle.js'
Copying file: 'vendor.bundle.js.map'
Time 444
Task Duration
--------------------------------------------------
Install-AngularCLI 00:00:00.0491433
Clean 00:00:00.0782836
Install 00:00:35.4828120
Build 00:01:12.5709830
Publish 00:00:00.8032134
--------------------------------------------------
Total: 00:01:48.9844353
在上一篇评论中，您写道要使用Octopus部署进行部署，这基本上意味着添加2个新任务就像kudu发布执行后期构建一样。
对于这个Cake，有OctoPack和OctoPush别名。
这些别名需要octo.exe工具，可以使用此tool指令获取
#tool nuget:?package=OctopusTools&version=4.25.0
打包任务可能看起来像这样
DirectoryPath nugetPath= MakeAbsolute(Directory("./nuget"));
Task("Pack")
.IsDependentOn("Build")
.Does( ()=> {
OctoPack(
"PoCApp",
new OctopusPackSettings {
BasePath = outputPath,
OutFolder = nugetPath,
Format = OctopusPackFormat.Zip
}
);
});
打包应用程序并将软件包推送到我们的章鱼服务器后，您可以使用他们内置的部署到Azure Web应用程序功能，这是一个很好的指导 https://octopus.com/docs/deploying-applications/deploying-to-azure/deploying-a-package-to-an-azure-web-app
上面的一些代码可以在下面的回购中找到 https://github.com/azurevoodoo/NGAppDeployedWithKuduPoC