Azure DevOps管道中缺少Gulp编译的CSS文件夹Build Artifact [英] Gulp-compiled CSS folder missing from the Azure DevOps pipeline Build Artifact

问题描述

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

I have a small dotnet core application that is hosted on Azure and is being built and deployed using Azure DevOps Pipelines. Before we started using the DevOps Pipelines the CI was hooked up directly to Azure which compiled fine but took an actual lifetime to deploy, hence the decision to move.

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

其他所有操作都可以-我签入，构建管道接收我的提交，并执行以下步骤:

Everything else works okay - I check in, the Build pipeline picks up my commits and has the following steps:

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

第3步(发布)的一部分使用Gulp任务:

Part of step 3 (Publish) uses a Gulp task:

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

在本地(和以前)生成了五个文件夹:

And locally (and previously) this generated five folders:

• 图标
• img
• js
• 徽标
• css(现在神秘地消失了)

• icons
• img
• js
• logos
• css (now mysteriously missing in action)

我尝试过的变化

我尝试删除本地css文件夹并运行CLI dotnet publish 与管道完全相同的方式，并且在本地运行良好.

Variations I've tried

I've tried deleting my local css folder and running the CLI dotnet publish exactly the same way the Pipeline does and that appears to work fine locally.

我还剥离了sass任务，以防在管道中某处引起问题，所以现在看起来像这样:

I've also stripped the sass task way back in case that was causing an issue somewhere in the pipeline, so that now looks like this:

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

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

I can see all of the output in the console logs on the Pipeline and it successfully executes the sass task:

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站点).

There are no other errors or warnings in the build script and everything completes and fires off the Release pipeline (which copies the artifact up to the Azure site).

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

I would expect an error somewhere... but nothing - all of the green ticks are downright cheerful... so I'm a little stumped at what may or may not be happening! I can only think that there must be some dependency or something missing in the Pipeline environment? Orrrrr maybe I'm missing a Pipeline step?

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

Any help or nudges or ideas would be greatly appreciated! Thank you for sticking it out through my small essay and for any help you can provide :)

推荐答案

我遇到了完全相同的问题.我能够使一切在本地正常工作. gulp会很好地生成 css 文件夹. dotnet publish -c release将执行相同的操作.但是，当通过管道运行时，没有css文件夹.

I was having the exact same issue. I was able to get everything working locally without issue. gulp would generate the css folder just fine. dotnet publish -c release would do the same. However, when ran through the pipeline, no css folder.

我发现最奇怪的是，有一个同级文件夹(脚本)，其使用方式与css gulp任务的使用方式相同，但是该文件夹可以使它正常工作.这是我的CSS任务:

The thing that I find the most strange, is that there is a sibling folder (scripts) that is used in the same way the css gulp task is used, but that folder makes it just fine. Here's my css task:

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

但是，此任务在本地和管道中均有效:

but, this task does works both locally and in the pipeline:

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

我最终还是放弃了，因为无论如何这都是遗留代码，并决定了一种解决方法:

I ended up just giving up since this is legacy code anyways and settled on a workaround:

在具有以下配置的gulp任务之后立即添加 Copy Files 任务:

Add the Copy Files task right after your gulp task with the below configuration:

或者，如果您喜欢YAML:

Or, if you like YAML:

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

这篇关于Azure DevOps管道中缺少Gulp编译的CSS文件夹Build Artifact的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！