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

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:

Restore [.NET Core]

Build [.NET Core]

Publish [.NET Core]

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

edited Jan 2 at 15:44

asked Jan 2 at 15:31

Laura Weatherhead

1015

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
Jan 2 at 16:30

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
Jan 2 at 16:49

add a comment |

A little background...

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:

Restore [.NET Core]

Build [.NET Core]

Publish [.NET Core]

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

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

edited Jan 2 at 15:44

asked Jan 2 at 15:31

Laura Weatherhead

1015

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
Jan 2 at 16:30

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
Jan 2 at 16:49

add a comment |

A little background...

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:

Restore [.NET Core]

Build [.NET Core]

Publish [.NET Core]

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

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

edited Jan 2 at 15:44

asked Jan 2 at 15:31

Laura Weatherhead

1015

A little background...

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:

Restore [.NET Core]

Build [.NET Core]

Publish [.NET Core]

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

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

azure sass gulp azure-devops azure-pipelines

edited Jan 2 at 15:44

asked Jan 2 at 15:31

Laura Weatherhead

1015

edited Jan 2 at 15:44

asked Jan 2 at 15:31

Laura Weatherhead

1015

edited Jan 2 at 15:44

asked Jan 2 at 15:31

Laura Weatherhead

1015

asked Jan 2 at 15:31

Laura Weatherhead

1015

asked Jan 2 at 15:31

Laura Weatherhead

1015

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
Jan 2 at 16:30

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
Jan 2 at 16:49

add a comment |

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
Jan 2 at 16:30

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
Jan 2 at 16:49

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
Jan 2 at 16:30

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
Jan 2 at 16:49

add a comment |

1 Answer
1

active

oldest

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.

answered Jan 2 at 18:04

ProgrammerAl

154314

Thank you for the pointer! Following your instructions I did manage to get a look at the Sources directory by downloading the drop folder. Unfortunately, the compiled CSS folder was still missing from all of the places. A super handy trick to know though - will definitely keep in mind for when investigating in future :)

– Laura Weatherhead
Jan 3 at 10:50

In that case, I'm wondering if anything is even being run, even though the logs say the sass task is being run. The next thing I'd try is manually adding the Grunt build task to the pipeline. Add it between your Publish .NET Core task and the Publish Build Artifacts task. Then see what gets pushed up to the drop folder. Also, are you viewing the console output with debug mode on? I forget the variable name, but it's a setting you set to true in the popup box when you queue the build. That might have some more info.

– ProgrammerAl
Jan 3 at 18:09

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54009016%2fgulp-compiled-css-folder-missing-from-the-azure-devops-pipeline-build-artifact%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

1 Answer
1

active

oldest

votes

1 Answer
1

active

oldest

votes

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

answered Jan 2 at 18:04

ProgrammerAl

154314

Thank you for the pointer! Following your instructions I did manage to get a look at the Sources directory by downloading the drop folder. Unfortunately, the compiled CSS folder was still missing from all of the places. A super handy trick to know though - will definitely keep in mind for when investigating in future :)

– Laura Weatherhead
Jan 3 at 10:50

In that case, I'm wondering if anything is even being run, even though the logs say the sass task is being run. The next thing I'd try is manually adding the Grunt build task to the pipeline. Add it between your Publish .NET Core task and the Publish Build Artifacts task. Then see what gets pushed up to the drop folder. Also, are you viewing the console output with debug mode on? I forget the variable name, but it's a setting you set to true in the popup box when you queue the build. That might have some more info.

– ProgrammerAl
Jan 3 at 18:09

add a comment |

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

answered Jan 2 at 18:04

ProgrammerAl

154314

Thank you for the pointer! Following your instructions I did manage to get a look at the Sources directory by downloading the drop folder. Unfortunately, the compiled CSS folder was still missing from all of the places. A super handy trick to know though - will definitely keep in mind for when investigating in future :)

– Laura Weatherhead
Jan 3 at 10:50

In that case, I'm wondering if anything is even being run, even though the logs say the sass task is being run. The next thing I'd try is manually adding the Grunt build task to the pipeline. Add it between your Publish .NET Core task and the Publish Build Artifacts task. Then see what gets pushed up to the drop folder. Also, are you viewing the console output with debug mode on? I forget the variable name, but it's a setting you set to true in the popup box when you queue the build. That might have some more info.

– ProgrammerAl
Jan 3 at 18:09

add a comment |

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

answered Jan 2 at 18:04

ProgrammerAl

154314

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

answered Jan 2 at 18:04

ProgrammerAl

154314

answered Jan 2 at 18:04

ProgrammerAl

154314

answered Jan 2 at 18:04

ProgrammerAl

154314

answered Jan 2 at 18:04

ProgrammerAl

154314

Thank you for the pointer! Following your instructions I did manage to get a look at the Sources directory by downloading the drop folder. Unfortunately, the compiled CSS folder was still missing from all of the places. A super handy trick to know though - will definitely keep in mind for when investigating in future :)

– Laura Weatherhead
Jan 3 at 10:50

In that case, I'm wondering if anything is even being run, even though the logs say the sass task is being run. The next thing I'd try is manually adding the Grunt build task to the pipeline. Add it between your Publish .NET Core task and the Publish Build Artifacts task. Then see what gets pushed up to the drop folder. Also, are you viewing the console output with debug mode on? I forget the variable name, but it's a setting you set to true in the popup box when you queue the build. That might have some more info.

– ProgrammerAl
Jan 3 at 18:09

add a comment |

Thank you for the pointer! Following your instructions I did manage to get a look at the Sources directory by downloading the drop folder. Unfortunately, the compiled CSS folder was still missing from all of the places. A super handy trick to know though - will definitely keep in mind for when investigating in future :)

– Laura Weatherhead
Jan 3 at 10:50

In that case, I'm wondering if anything is even being run, even though the logs say the sass task is being run. The next thing I'd try is manually adding the Grunt build task to the pipeline. Add it between your Publish .NET Core task and the Publish Build Artifacts task. Then see what gets pushed up to the drop folder. Also, are you viewing the console output with debug mode on? I forget the variable name, but it's a setting you set to true in the popup box when you queue the build. That might have some more info.

– ProgrammerAl
Jan 3 at 18:09

Thank you for the pointer! Following your instructions I did manage to get a look at the Sources directory by downloading the drop folder. Unfortunately, the compiled CSS folder was still missing from all of the places. A super handy trick to know though - will definitely keep in mind for when investigating in future :)

– Laura Weatherhead
Jan 3 at 10:50

In that case, I'm wondering if anything is even being run, even though the logs say the sass task is being run. The next thing I'd try is manually adding the Grunt build task to the pipeline. Add it between your Publish .NET Core task and the Publish Build Artifacts task. Then see what gets pushed up to the drop folder. Also, are you viewing the console output with debug mode on? I forget the variable name, but it's a setting you set to true in the popup box when you queue the build. That might have some more info.

– ProgrammerAl
Jan 3 at 18:09

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

Search This Blog

Ufyukyu