Gulp-compiled CSS folder missing from the Azure DevOps pipeline Build Artifact

4
votes

A little background...

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.

However, the build pipeline no longer compiles or outputs the sass/css folder

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

  1. Restore [.NET Core]
  2. Build [.NET Core]
  3. Publish [.NET Core]
  4. Publish Build Artifact

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:

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

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.

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));

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

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

Speculation

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 :)

2
azuresassgulpazure-devopsazure-pipelines
Is this a hosted (on a Microsoft server) build agent or an on-prem one? If it's on prem (or installed on a server you have access to), you could remote to the build agent and take a look in the job directory and see if the generated files are present before they are placed into the artifact. – Jamie Taylor
Hey Jamie! Unfortunately it's an MS hosted one on the DevOps Build Pipeline tasks - am still fairly new to the pipelines stuff, but it would be super handy if I could see what's getting built before the publish...? I will keep poking around :) – Laura Weatherhead
Wow. I am having the exact same issue. What's interesting on my side is that dist folder should have scripts and css. Both get generated fine locally but when running through the pipeline, the build artifact only has the scripts folder. css folder is missing in action. – mwilson

2 Answers

0
votes

Something I've done in this situation before is changing the Publish Build Artifact task to upload everything in the build folder. My guess is that right now the 'Path to Publish' value in that task is set to $(build.artifactStagingDirectory). Change it to $(build.SourcesDirectory). After running the build again you'll see that the entire build directory has was uploaded. This includes your source code and any other folders like you have on your local environment. From there you can figure out if the CSS folder is actually missing, or if it ended up in some other folder location.

If the folder ends up in a weird location you can either add a file copy task to move the CSS folder to the proper folder in $(build.artifactStagingDirectory) or make a change to the Gulp task. Whatever is better for your scenario.

Once you find the location, you can fix the Publish Build Artifact task.

0
votes

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.

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:

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

Pipeline Task

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