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

user_1433268 0
Viewed 633

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

npm gulp node.js
1 Answers

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.

user_806300
Related