CSS not updating on .NET core website deployed using Visual Studio Online and Azure

AZURE & Visual Studio Online

Yasser Shaikh
Jun 17, 2017 · 2 min read

I always wanted to try out Azure, I was always fascinated by how Scott Hanselman always demo’d how easy and simple it is to build and deploy using Azure. So I decided to give it a try. I made a .NET Core Web app, a Visual Studio Online account and deploying to Azure from there.

Everything is very straight forward and I am sure that anyone would be able to setup that. Next I configured gulp by creating gulpfile.js — Can read more here. But once the site got deployed, any css changes I make, had no effect on the website even after re-deploying. Also note I did not commit the .min.css and .min.js files.

FIX

To fix this, I found that in the build steps you can configure gulp to run. I set it up to run post-build, few additional things I had to do was configure multiple npm installs steps for gulp and rimraf which I was using.

steps for setting up website deployment on visual studio online
steps for setting up website deployment on visual studio online

With these changes, now everytime I see gulp running after a successful build and I have setup a default task which cleans and builds both css and js, below is the gulpfile.js I am using.

/// <binding Clean='clean' AfterBuild='postbuild' />
"use strict";
var gulp = require("gulp"),
rimraf = require("rimraf"),
concat = require("gulp-concat"),
cssmin = require("gulp-cssmin"),
uglify = require("gulp-uglify");
var paths = {
webroot: "./wwwroot/"
};
paths.js = paths.webroot + "js/**/*.js";
paths.minJs = paths.webroot + "js/**/*.min.js";
paths.css = paths.webroot + "css/**/*.css";
paths.minCss = paths.webroot + "css/**/*.min.css";
paths.concatJsDest = paths.webroot + "js/site.min.js";
paths.concatCssDest = paths.webroot + "css/site.min.css";
gulp.task("clean:js", function (cb) {
rimraf(paths.concatJsDest, cb);
});
gulp.task("clean:css", function (cb) {
rimraf(paths.concatCssDest, cb);
});
gulp.task("clean", ["clean:js", "clean:css"]);gulp.task("min:js", function () {
return gulp.src([paths.js, "!" + paths.minJs], { base: "." })
.pipe(concat(paths.concatJsDest))
.pipe(uglify())
.pipe(gulp.dest("."));
});
gulp.task("min:css", function () {
return gulp.src([paths.css, "!" + paths.minCss])
.pipe(concat(paths.concatCssDest))
.pipe(cssmin())
.pipe(gulp.dest("."));
});
gulp.task("min", ["min:js", "min:css"]);gulp.task("default", ["clean:js", "clean:css", "min:js", "min:css"]);

Edit :

Very stupid of me to setup multiple steps for each dependencies, after reading this on stackoverflow.com, I actually had to only setup 1 npm command which would be npm install and it would automatically pickup all dependencies from the package.json folder. :)

Yasser Shaikh's blog

It's supposed to be automatic, but actually you have to push this button.

Yasser Shaikh

Written by

Yasser Shaikh's blog

It's supposed to be automatic, but actually you have to push this button.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade