如何让Gulp识别已编译文件中的更改/更新？

Question

我正在构建几个站点，并使用Gulp将它们的.scss文件编译成一个main.css文件。

事情进展顺利，但首先-- Gulp似乎不知道何时更新了main.css文件。

例如，如果我运行gulp sass并编译我的main.css文件，那么运行我的FTP部署脚本、gulp ftp-deploy、.scss文件(以及我正在处理的任何其他.html或.php文件)将部署，而不是main.css文件。

Gulp只有当我在IDE中打开它时，才会识别main.css中是否有变化，然后进行修改，比如添加一个空格或其他东西，然后保存。

在运行Shopify ThemeKit的theme watch命令时，也会出现上述问题。

有人知道我怎么做才能检测到变化吗？

我的gulpfile.js就是这样：

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( '.' ) )
  ;

});

附加信息

node.js版本为11.6.0

npm版本为6.5.0

Gulp版本为4.0.0 (2.0.1CLI)

I on MacOS 10.14.2

Answer 1

啊，我一开始以为你在谈论某种gulp watch行为；我错过了ftp-deploy中的那条newer行。

这听起来像是一个修改时间比较的问题。这通常是由于您的本地机器与服务器之间的时间差(您的其中一台或另一台可能关机几分钟，导致您的任务中出现片状行为)。另一种可能是服务器位于不同的时区，并且使用本地时间而不是UTC。Gulp Vinyl FTP Timezone Issue对S.O.问题的回答可能会对你有所帮助。

手工编辑/css中的文件与运行gulp sass来重新生成文件没有什么区别；重要的是修改时间(运行ls -l css查看修改时间，以便您知道正在查看什么，并将其与服务器上的文件进行比较)。需要注意的一点是，只要重新运行gulp sass而不对SCSS文件进行任何更改，就不会用新的时间戳更新/css中的文件；这是在测试过程中可能会绊倒您的gulp特性。