Azure DevOps 管道构建工件中缺少 Gulp 编译的 CSS 文件夹答案

【问题标题】：Gulp-compiled CSS folder missing from the Azure DevOps pipeline Build ArtifactAzure DevOps 管道构建工件中缺少 Gulp 编译的 CSS 文件夹
【发布时间】：2019-05-29 06:13:09
【问题描述】：

一点背景...

我有一个托管在 Azure 上的小型 dotnet 核心应用程序，正在使用 Azure DevOps Pipelines 构建和部署。在我们开始使用 DevOps Pipelines 之前，CI 直接连接到 Azure，它编译得很好，但需要一个实际的生命周期来部署，因此决定迁移。

但是，构建管道不再编译或输出 sass/css 文件夹

其他一切正常 - 我签入，构建管道获取我的提交并执行以下步骤：

恢复 [.NET Core]
构建 [.NET Core]
发布 [.NET Core]
发布构建工件

第 3 步（发布）的一部分使用 Gulp 任务：

gulp.task('prod', function (callback) {
    runSequence('clean','set-prod',
    ['icon-sprite', 'logo-sprite', 'images', 'sass', 'modernizr', 'mainjs', 'adminjs'], 
           callback);
});

在本地（和以前）这会生成五个文件夹：

图标

图片

js

标志

css（现在神秘失踪）

我尝试过的变体

我已经尝试删除我的本地 css 文件夹并运行 CLI dotnet publish 完全一样管道所做的，并且在本地似乎可以正常工作。

我还剥离了 sass 任务，以防在管道中的某个地方引起问题，所以现在看起来像这样：

return gulp.src('src/sass/style.scss')
    .pipe(sass({outputStyle: 'compressed'}))
    .pipe(gulp.dest('wwwroot/dist/css));

我可以在 Pipeline 的控制台日志中看到所有输出，并且它成功执行了 sass 任务：

2019-01-02T14:43:51.3558593Z   [14:43:51] Starting 'sass'...
2019-01-02T14:43:51.9284145Z   [14:43:51] Finished 'sass' after 524 ms

构建脚本中没有其他错误或警告，一切都完成并启动发布管道（将工件复制到 Azure 站点）。

推测

我预计某处会出现错误...但什么都没有 - 所有的绿色刻度都非常高兴...所以我对可能发生或可能不会发生的事情感到有些困惑！我只能认为 Pipeline 环境中一定有一些依赖或缺少什么？ Orrrrr 也许我错过了一个管道步骤？

任何帮助、轻推或想法将不胜感激！感谢您通过我的小论文坚持下去，以及您可以提供的任何帮助:)

【问题讨论】：

这是托管（在 Microsoft 服务器上）构建代理还是本地构建代理？如果它在本地（或安装在您有权访问的服务器上），您可以远程访问构建代理并查看作业目录并查看生成的文件在放入工件之前是否存在。
嘿杰米！不幸的是，它是一个 MS 托管的 DevOps Build Pipeline 任务 - 对于管道的东西还是相当新的，但是如果我能在发布之前看到正在构建的内容，它会非常方便......？我会继续闲逛:)
哇。我有完全相同的问题。我这边有趣的是 dist 文件夹应该有scripts 和css。两者都可以在本地正常生成，但是在通过管道运行时，构建工件只有 scripts 文件夹。 css 文件夹在操作中丢失。

标签： azure sass gulp azure-devops azure-pipelines

【解决方案1】：

我之前在这种情况下所做的事情是更改 Publish Build Artifact 任务以上传构建文件夹中的所有内容。我的猜测是，现在该任务中的“发布路径”值设置为 $(build.artifactStagingDirectory)。将其更改为 $(build.SourcesDirectory)。再次运行构建后，您将看到整个构建目录已上传。这包括您的源代码和您在本地环境中的任何其他文件夹。从那里您可以确定 CSS 文件夹是否真的丢失，或者它是否最终位于其他文件夹位置。

如果文件夹最终位于奇怪的位置，您可以添加文件复制任务以将 CSS 文件夹移动到 $(build.artifactStagingDirectory) 中的正确文件夹或更改 Gulp 任务。无论哪种方式更适合您的方案。

找到位置后，您可以修复发布构建工件任务。

【讨论】：

感谢指点！按照您的指示，我确实设法通过下载放置文件夹来查看 Sources 目录。不幸的是，所有地方仍然缺少已编译的 CSS 文件夹。不过，这是一个超级方便的技巧 - 将来调查时一定会牢记:)
在这种情况下，我想知道是否有任何东西正在运行，即使日志说 sass 任务正在运行。我要尝试的下一件事是将 Grunt 构建任务手动添加到管道中。在 Publish .NET Core 任务和 Publish Build Artifacts 任务之间添加它。然后查看被推送到放置文件夹的内容。另外，您是否在调试模式下查看控制台输出？我忘记了变量名，但这是您在构建队列时在弹出框中设置为 true 的设置。那可能有更多信息。

【解决方案2】：

我遇到了完全相同的问题。我能够让一切在本地正常工作。 gulp 会生成 css 文件夹就好了。 dotnet publish -c release 也会这样做。但是，当通过管道运行时，没有 css 文件夹。

我觉得最奇怪的是，有一个同级文件夹（脚本），它的使用方式与使用 css gulp 任务的方式相同，但该文件夹使它很好。这是我的 CSS 任务：

gulp.task('min', function() {
    return gulp.src('wwwroot/css/**/*.css')
        .pipe(cssnano({zindex:false}))
        .pipe(gulp.dest('wwwroot/dist/css/'));
});

但是，此任务在本地和管道中都有效：

gulp.task('build-js', function() {
  return gulp.src('wwwroot/scripts/**/*.js')
    .pipe(concat('site.bundle.js'))
    .pipe(uglify())
    .pipe(gulp.dest('wwwroot/dist/scripts/'));
});

我最终只是放弃了，因为无论如何这是遗留代码并确定了解决方法：

使用以下配置在 gulp 任务之后添加 Copy Files 任务：

或者，如果你喜欢 YAML：

steps:
- task: CopyFiles@2
  displayName: 'Copy Files to: wwwroot/dist/css'
  inputs:
    SourceFolder: wwwroot/css
    Contents: '*.css'
    TargetFolder: wwwroot/dist/css

【讨论】：