My gulp.js file is not updating my css on the browser

Question

I am using a gulp.js file to convert my less code to css and then update the website automatically on save using BrowserSync however, when I save the file no changes have been made. the code for my gulp.js file is below:

var gulp = require('gulp'),
                    less = require('gulp-less'),
                    uglifycss = require("gulp-uglifycss"),
                    path = require('path'),
                    watch = require('gulp-watch'),
                    autoprefixer = require('gulp-autoprefixer'),
                    browserSync = require('browser-sync'),
                    uglify = require('gulp-uglify'),
                    sourcemaps = require('gulp-sourcemaps'),
                    jshint = require('gulp-jshint'),
                    imageResize = require('gulp-image-resize'),
                    rename = require("gulp-rename"),
                    changed = require("gulp-changed"),
                    plumber = require("gulp-plumber"),
                    cmq = require('gulp-combine-media-queries');


            var run = require('gulp-run');

            //gulp.src(['js/**/*.js', '!js/**/*.min.js'])

            gulp.task('default', function () {


                 var devProxy = "mywebsite.dev.chand.co";
            // } 

            browserSync({
                    proxy: devProxy,
                    files: "library/css/*.css"
                });

            //gulp.watch('./library/less/**/*.less', ['compile-css']);

            gulp.watch('./library/less/**/*.less', ['compile-css']);

            gulp.watch(['./library/js/*.js', '!./library/js/main-built.js'], ['javascript']);

            });



            gulp.task('javascript', function() {
             gulp.src(['./library/js/*.js','./library/js/components/*.js', '!./library/js/main-built.js',  '!./library/js/cf7.js'])     // ignore vendor stuff
             .pipe(plumber())    
             .pipe(jshint())
             .pipe(jshint.reporter('default'));

            //    gulp.src(['./library/js/**/*.js', '!./library/js/require.js'])    
               //.pipe(uglify())
            //     .pipe(gulp.dest('library/dist/js'));


            run('r.js -o build.js').exec();
            });


            gulp.task('compile-css', function () {
            gulp.src('./library/less/main.less')
                        .pipe(plumber())    
                        .pipe(sourcemaps.init())
                        .pipe(less())
                        .pipe(autoprefixer())
                        //.pipe(uglifycss())
                        .pipe(sourcemaps.write('./maps'))
                        .pipe(gulp.dest('./library/css/'));



            gulp.src('./library/less/admin.less')
                        .pipe(plumber())    
                        .pipe(sourcemaps.init())
                        .pipe(less())
                        .pipe(autoprefixer())
                        //.pipe(uglifycss())
                        .pipe(sourcemaps.write('./maps'))
                        .pipe(gulp.dest('./library/css/'));

            gulp.src('./library/less/editor-style.less')
                        .pipe(plumber())    
                        .pipe(sourcemaps.init())
                        .pipe(less())
                        .pipe(autoprefixer())
                        //.pipe(uglifycss())
                        .pipe(sourcemaps.write('./maps'))
                        .pipe(gulp.dest('./library/css/'));


            gulp.src('./library/less/style-bootstrap.less')
                        .pipe(plumber())    
                        //.pipe(sourcemaps.init())
                        .pipe(less())
                        .pipe(autoprefixer())
                        //.pipe(uglifycss())

                        .pipe(gulp.dest('./library/css/'));

            return; 

            });

            gulp.task('dist-css', function () {
            gulp.src('./library/less/main.less')
                        .pipe(less())
                        .pipe(autoprefixer())
                        .pipe(cmq({
                          log: true
                        }))
                        .pipe(uglifycss())
                        .pipe(gulp.dest('./library/css/'));




            gulp.src('./library/less/admin.less')
                        //.pipe(sourcemaps.init())
                        .pipe(less())
                        .pipe(autoprefixer())
                        .pipe(uglifycss())
                        //.pipe(sourcemaps.write('./maps'))
                        .pipe(gulp.dest('./library/css/'));

            gulp.src('./library/less/editor-style.less')
                        //.pipe(sourcemaps.init())
                        .pipe(less())
                        .pipe(autoprefixer())
                        .pipe(uglifycss())
                        //.pipe(sourcemaps.write('./maps'))
                        .pipe(gulp.dest('./library/css/'));



            });




            gulp.task('resize-images', function () {

            // this doesn't happen automatically, because it's a bit intensive, it should be done when we need.

            var originalName;

             gulp.src("images/src/**/*.{jpg,png}")
            .pipe(changed("images/dist"))


            // This isn't ideal, but it'll work fine
            // Make sure that you go BIGGEST FIRST because of piping

            // Need to change renaming to the wordpress convention

            // need to specify heights?

            // need to do lossless optimisation

            // remember to set new name as well as new size for each resize.
            .pipe(imageResize({ 
                imageMagick : true,
                width : 200
            }))
            .pipe(rename(function (path) {
                originalName = path.basename;
                path.basename = originalName + "-200";        
            }))
            .pipe(gulp.dest("images/dist"))


            .pipe(imageResize({ 
                imageMagick : true,
                width : 100
            }))
            .pipe(rename(function (path) {
                path.basename = originalName + "-100";        
            }))
            .pipe(gulp.dest("images/dist"));

            });

Answer 1

It looks like you are having a caching problem I read more about this for css + browsersync. this post might help you. This could be your solution then.

move your watch to a seperate task

gulp.task('watch', ['browser-sync'], function(){
    gulp.watch('./library/less/**/*.less', ['compile-css']);
    gulp.watch('./library/css/**/*.css').on('change', browserSync.reload);
});

and let it depend on browser-sync

gulp.task('browser-sync', function() {
    var devProxy = "mywebsite.dev.chand.co";
    browserSync({
        proxy: devProxy,
        files: "library/css/*.css"
    });
});

And then change default to

gulp.task('default', 'watch');

read more about reloading + browserSync here

Answer 2

It's also worth trying to delete your compressed CSS and JavaScript files manually.

rm -f web/css/compressed/style.css for example

...and then trying a gulp build again.