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

Question

一些背景...

我有一个小型的dotnet核心应用程序，该应用程序托管在Azure上，并使用Azure DevOps Pipelines构建和部署。在我们开始使用DevOps Pipelines之前，CI已直接连接到Azure，该Azure可以很好地编译，但是要花实际的生命周期进行部署，因此决定迁移。

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

其他所有方法都可以正常工作-我签入，构建管道接收我的提交并执行以下步骤：

1. 还原[.NET Core]
2. 构建[.NET Core]
3. 发布[.NET Core]
4. 发布构建工件

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

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

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

  

  
• 图标
  
• img
  
• 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

构建脚本中没有其他错误或警告，一切已完成并触发了Release管道（它将发行版复制到Azure站点）。

猜测

我希望在某个地方出现错误...但是什么都没发生-所有的绿色刻度线都非常欢快...所以我为可能发生或可能发生的事情感到有些困惑！我只能认为Pipeline环境中必须存在某些依赖项或缺少某些内容？ Orrrrr也许我缺少管道步骤？

任何帮助，推动或想法将不胜感激！感谢您通过我的小文章将其粘贴出来，并为您提供任何帮助：）

Answer 1

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

如果文件夹最终位于怪异的位置，则可以添加文件复制任务以将CSS文件夹移动到$（build.artifactStagingDirectory）中的适当文件夹，也可以更改Gulp任务。无论哪种情况都适合您的情况。

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

Answer 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