CSS styles are not being injected after latest update

[JonQuayle]

Hi,

I realise that this might not be a direct issue with the latest update, it could be down to code I have written. Since the latest update, any styles I change are not injected into the browser and no browser reload occurs. Has anybody else had this issue? My gulp file code is pasted below. I can't see anything out of the ordinary.

Thanks in advance, Jon

var gulp = require('gulp'); var sass = require('gulp-sass'); var sassGlob = require('gulp-sass-glob'); var uglify = require('gulp-uglify'); var concat = require('gulp-concat'); var source = require('vinyl-source-stream'); var request = require('request'); var merge = require('merge2'); var buffer = require('gulp-buffer'); var browserSync = require('browser-sync').create(); var postcss = require('gulp-postcss'); var autoprefixer = require('autoprefixer'); var cssvariables = require('postcss-css-variables'); var calc = require('postcss-calc'); var rename = require('gulp-rename'); var babel = require("gulp-babel");

// js file paths var utilJsPath = 'main/assets/js'; // util.js path - you may need to update this if including the framework as external node module var componentsJsPath = 'main/assets/js/components/*.js'; // component js files var scriptsJsPath = '../web/assets/js'; //folder for final scripts.js/scripts.min.js files

// css file paths var cssFolder = '../web/assets/css'; // folder for final style.css/style-custom-prop-fallbac.css files var scssFilesPath = 'main/assets/css/*/.scss'; // scss files to watch

function reload(done) { browserSync.reload(); done(); }

// Copying the necessary framework files from node_modules to a specified folder in the dev folder for a new project gulp.task('copy-framework', function() { gulp.src([ 'node_modules/codyhouse-framework/main/assets/css/*/.scss', 'node_modules/codyhouse-framework/main/assets/js/*.js' ]) .pipe(gulp.dest('main/assets/new')); return new Promise(function(resolve, reject) { console.log("Codyhouse-framework updated files have been copied from node_modules to the dev folder"); resolve(); }); });

// Update the base style scss files if they have been updated in the git repository gulp.task('update-base-styles', function() { gulp.src('node_modules/codyhouse-framework/main/assets/css/base/*.scss') .pipe(gulp.dest('main/assets/css/base')); return new Promise(function(resolve, reject) { console.log("Codyhouse-framework base styles have been updated from node_modules to the dev folder"); resolve(); }); });

// Update the base script util.js file if it has been updated in the git repository gulp.task('update-base-scripts', function() { gulp.src('node_modules/codyhouse-framework/main/assets/js/util.js') .pipe(gulp.dest('main/assets/js')); return new Promise(function(resolve, reject) { console.log("Codyhouse-framework base scripts have been updated from node_modules to the dev folder"); resolve(); }); });

// Generating and serving a minified css file to the web directory gulp.task('sass', function() { return gulp.src(scssFilesPath) .pipe(sassGlob()) .pipe(sass({outputStyle: 'compressed'}).on('error', sass.logError)) .pipe(postcss([autoprefixer()])) .pipe(gulp.dest(cssFolder)) .pipe(browserSync.reload({ stream: true })) .pipe(rename('style-fallback.css')) .pipe(postcss([cssvariables(), calc()])) .pipe(gulp.dest(cssFolder)); });

// Generating and serving a minified javascript file to the web directory gulp.task('scripts', function() { var jquery = request('https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js').pipe(source('jquery.js')); var mainPlugins = gulp.src([ 'node_modules/scrollmagic/scrollmagic/minified/ScrollMagic.min.js', 'node_modules/scrollmagic/scrollmagic/minified/plugins/animation.gsap.min.js', 'node_modules/scrollmagic/scrollmagic/minified/plugins/debug.addIndicators.min.js', 'node_modules/gsap/src/minified/TweenMax.min.js', 'main/assets/js/util.js', 'main/assets/js/components/midnight.jquery.min.js', // 'main/assets/js/components/smooth-scroll.js', 'main/assets/js/components/navigation.js', 'main/assets/js/components/homepage.js' ]); return merge(jquery, mainPlugins) .pipe(buffer()) .pipe(babel()) .pipe(concat('scripts.js')) .pipe(gulp.dest(scriptsJsPath)) .pipe(browserSync.reload({ stream: true })) .pipe(rename('scripts.min.js')) // .pipe(uglify()) .pipe(gulp.dest(scriptsJsPath)) .pipe(browserSync.reload({ stream: true })); });

// Change these credentials to match the host in MAMP Pro gulp.task('browserSync', gulp.series(function (done) { browserSync.init({ proxy: "http://jonquayle.dev", host: 'jonquayle.dev', open: 'external', reloadOnRestart: true }) done(); }));

gulp.task('watch', gulp.series(['browserSync', 'sass', 'scripts'], function () { gulp.watch('main/assets/css//*.scss', gulp.series(['sass'])); gulp.watch('../templates/*/.twig', gulp.series(reload)); gulp.watch('main/assets/js//*.js', gulp.series(reload)); gulp.watch(componentsJsPath, gulp.series(['scripts'])); }));

[JonQuayle]

Managed to fix it with the help of this link - https://johnathan.org/originals/2017/12/fixing-browsersync-not-reloading.html, what I had before wasn't quite working.