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

UPDATE!

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.

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

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

Hope this helps.