CSS not updating on Node.js? - html

Question

Trying to get the css to update on the browser using browser sync via Gulp on Node.js... What am I doing wrong?
This is the Gulp.js file
var themename = 'playtest haha 1';
var gulp = require('gulp'),
// Prepare and optimize code etc
autoprefixer = require('autoprefixer'),
browserSync = require('browser-sync').create(),
image = require('gulp-image'),
jshint = require('gulp-jshint'),
postcss = require('gulp-postcss'),
sass = require('gulp-sass'),
sourcemaps = require('gulp-sourcemaps'),
// Only work with new or updated files
newer = require('gulp-newer'),
// Name of working theme folder
root = '../' + themename + '/',
scss = root + 'sass/',
js = root + 'js/',
img = root + 'images/',
languages = root + 'languages/';
// CSS via Sass and Autoprefixer
gulp.task('css', function() {
return gulp.src(scss + '{style.scss,rtl.scss}')
.pipe(sourcemaps.init())
.pipe(sass({
outputStyle: 'expanded',
indentType: 'tab',
indentWidth: '1'
}).on('error', sass.logError))
.pipe(postcss([
autoprefixer('last 2 versions', '> 1%')
]))
.pipe(sourcemaps.write(scss + 'maps'))
.pipe(gulp.dest(root));
});
// Optimize images through gulp-image
gulp.task('images', function() {
return gulp.src(img + 'RAW/**/*.{jpg,JPG,png}')
.pipe(newer(img))
.pipe(image())
.pipe(gulp.dest(img));
});
// JavaScript
gulp.task('javascript', function() {
return gulp.src([js + '*.js'])
.pipe(jshint())
.pipe(jshint.reporter('default'))
.pipe(gulp.dest(js));
});
// Watch everything
gulp.task('watch', function() {
browserSync.init({
open: 'external',
proxy: 'http://localhost/wordpress', /* add your local host so the task can since the browser thing a bob*/
port: 8080
});
gulp.watch([root + '**/*.css', root + '**/*.scss' ], ['css']);
gulp.watch(js + '**/*.js', ['javascript']);
gulp.watch(img + 'RAW/**/*.{jpg,JPG,png}', ['images']);
gulp.watch(root + '**/*').on('change', browserSync.reload);
});
// Default task (runs at initiation: gulp --verbose)
gulp.task('default', ['watch']);
I have using the "local server" link to view the website project on browser and the proxying :http://localhost (do I add the /wordpress path?)
Node.js terminal screen: https://imgur.com/a/9lUNi
Not sure why the css is not updating, the browser sync sign is shown on the browsers and seem to be in sync (tested with multiple browsers), the css is not updating?!

Answer 1

You need to pipe to browserSync at the end of your 'css' task ala:
// CSS via Sass and Autoprefixer
gulp.task('css', function() {
return gulp.src(scss + '{style.scss,rtl.scss}')
.pipe(sourcemaps.init())
.pipe(sass({
outputStyle: 'expanded',
indentType: 'tab',
indentWidth: '1'
}).on('error', sass.logError))
.pipe(postcss([
autoprefixer('last 2 versions', '> 1%')
]))
.pipe(sourcemaps.write(scss + 'maps'))
.pipe(gulp.dest(root))
.pipe(browserSync.reload({ stream:true }));
});
Your
gulp.watch(root + '**/*').on('change', browserSync.reload);
will probably run into lots of race conditions (as for instance running before the 'css' task finishes and running multiple times) and I would remove it and put the reload pipe at the end of your 'javascript' and 'images' tasks as well.

Answer 2

I just had a very frustrating couple of days battling css that refused to update and finally solved it by disabling caching in the Network tab of Chrome Developer Tools. Worked like a charm. I know this is an old question, but thought I'd add the suggestion here for people who find themselves in the same position in the future.