How can I get Gulp to recognise changes/updates in compiled files?

Question

I'm building a few sites and am using Gulp to compile their .scss files into a main.css file.

Things are working fine but for one thing - Gulp doesn't seem to know when main.css file has been updated.

For example, if I run gulp sass and compile my main.css file, then run my FTP deploy script, gulp ftp-deploy, the .scss files (and any other .html or .php files I've been working on) will deploy, but not the main.css file.

Gulp will only recognise if there is a change in main.css if I open it in my IDE, make an alteration like adding a space or something, then save.

The above problem also happens when I run Shopify ThemeKit's theme watch command as well.

Would anyone know how I could make it so changes are detected?

My gulpfile.js is as such:

const gulp = require('gulp');
const sass = require('gulp-sass'); //Compiles SASS
const ftp = require( 'vinyl-ftp' ); //FTP

gulp.task('sass', function(){
  return gulp.src('scss/main.scss')
    .pipe(sass())
    .pipe(gulp.dest('css'))
});

gulp.task('ftp-deploy', function() {

  var conn = ftp.create({
    // CONFIG
  });

  var localFilesGlob = ['css/**']; 

  return gulp.src(localFilesGlob, { base: '.', buffer: false })
    .pipe( conn.newer( '.' ) )
    .pipe( conn.dest( '.' ) )
  ;

});

Additional info

node.js version is 11.6.0

npm version is 6.5.0

Gulp version is 4.0.0 (2.0.1 CLI)

I on MacOS 10.14.2

This might need more info -- so far, it sounds like it is behaving exactly as it should. If you edit an _scss_ file, gulp will recognize this and regenerate the corresponding _css_ file. Note that you'll have to re-run `gulp sass` of course. (Your gulpfile does not include a "watch" task, if your problem is with the watch task, you should include that code in your question.) — Elliot Nelson, Jan 13 '19 at 16:05
@ElliotNelson, yes the `gulp sass` command works fine - the .css is compiled with my changes to .scss. The problem is with `ftp-deploy`. It only recognises files are changed if I change them manually in my IDE (so it sees changes in the scss files but not the css file). — MeltingDog, Jan 14 '19 at 04:19

score 0 · Answer 1 · answered Jan 14 '19 at 11:30

Ah, I originally thought you were talking about some kind of gulp watch behavior; I missed that newer line in your ftp-deploy.

This sounds to me like a modification time comparison issue. This is often due to a difference in time between your local machine and the server (one or the other of you may be off by a few minutes, causing flaky behavior in your task). Another possibility is that the server is in a different timezone and uses local time instead of UTC. The answer to the S.O. question Gulp Vinyl FTP Timezone Issue might help you there.

There should be no difference between hand-editing a file in /css and running gulp sass to regenerate them; all that matters is the modification time (run ls -l css to see that, so you know what is being looked at, and can compare it to the files on the server). One thing to be aware of is that just re-running gulp sass without any changes to the SCSS files will not update files in /css with new timestamps; that is a feature of gulp that might trip you up while you are testing.

How can I get Gulp to recognise changes/updates in compiled files?

1 Answers1