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


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

AZURE & Visual Studio Online

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.


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

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: "." })

gulp.task("min:css", function () {
    return gulp.src([paths.css, "!" + paths.minCss])

gulp.task("min", ["min:js", "min:css"]);

gulp.task("default", ["clean:js", "clean:css", "min:js", "min:css"]);

Hope this helps.