gulp watch not updating properly

[starchild]

Hi,

I've got a weird gulp watch issue: if i make a change to a lower level scss file, gulp watches, and looks like it updates ok, but nothing actually changes.

I have to "touch" / save the style.scss file for it to actually take effect.

There was no change made to any structure or anything to cause this.

Has anyone seen this before?

[claudia-romano]

Hi there, gulp watches the .scss files inside the main/assets/css folder. Are you storing the lower level scss files in a different folder? Or did you modify the path of the files gulp is watching? Thanks.

[starchild]

Hi, no changes have been made to the file, and it was working fine for a long time.

Attached is the file we use.

`var gulp = require('gulp'); var sass = require('gulp-sass'); var sassGlob = require('gulp-sass-glob'); 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 concat = require('gulp-concat'); var rename = require('gulp-rename'); var uglify = require('gulp-terser');

// 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 = 'main/assets/js'; //folder for final scripts.js/scripts.min.js files

// css file paths var cssFolder = 'main/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(); }

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)); });

gulp.task('scripts', function() { return gulp.src([utilJsPath+'/util.js', componentsJsPath]) .pipe(concat('scripts.js')) .pipe(gulp.dest(scriptsJsPath)) .pipe(browserSync.reload({ stream: true })) .pipe(rename('scripts.min.js')) .pipe(uglify({ mangle: false, ecma: 6 })) .pipe(gulp.dest(scriptsJsPath)) .pipe(browserSync.reload({ stream: true })); });

gulp.task('browserSync', gulp.series(function (done) { browserSync.init({ server: { baseDir: 'main' }, notify: false }) done(); }));

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

[claudia-romano]

Hi there, if the gulp file has been working fine in the past, then it could mean the new scss files you have created are not in a watched folder. Could you double check this? Thanks.

[starchild]

There have been no changes to any folder structure or anything. No changes at all. It just stopped working.

[claudia-romano]

Could you please share the structure of a simple project where you can recreate the issue? Please make sure your structure includes only the basic files required to recreate the bug (gulp file + framework + one single 'low level' scss file). Thank you.

[starchild]

Hi,

We use the default structure of CD

framework -main --assets ---css ----various folders with scss

The issues is the same whether I update a file in the CH "base" subfolder or any other folder in the same level as the "various folders with scss" folder level.

Gulp watch actually recognises a file change and terminal goes through the motions as if it;s doing something, but the style.css file is not touched at all.

Is this what you mean Claudia?

[claudia-romano]

Could you please do this test:

• Download CodyFrame;
• Install the modules (npm install) and start the project (npm run gulp watch);
• Create a new style file in the css folder; your structure should be something like: https://www.dropbox.com/s/6xzdvwn0vpgpr7m/Screenshot%202020-07-03%2010.23.02.png?dl=0
• Import the style in the style.scss file: https://www.dropbox.com/s/5b5ls244gggvobn/Screenshot%202020-07-03%2010.23.53.png?dl=0
• Add some style to this custom file (_general.scss in the screenshot above).
• Does gulp refresh the browser and apply the new style?

Thanks.

[claudia-romano]

Hi there, I'm closing this for inactivity. Feel free to reopen it if you have additional questions. Cheers!

[starchild]

Weirdly, this resolved itself when I did an NPM update of all the various plugins etc. I guess it was a bug in one of them.