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

Posted 2021-05-06

我正在构建一些网站，并使用Gulp将他们的.scss文件编译成main.css文件。

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

例如，如果我运行gulp sass并编译我的main.css文件，然后运行我的FTP部署脚本，gulp ftp-deploy，.scss文件（以及我一直在研究的任何其他.html或.php文件）将部署，但不会运行main.css文件。

Gulp只会识别main.css是否有变化，如果我在IDE中打开它，进行更改，如添加空格或其他内容，然后保存。

当我运行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.1 CLI）

我在MacOS 10.14.2上

答案

啊，我原本以为你在谈论某种gulp watch行为;我错过了你的newer中的ftp-deploy线。

这听起来像修改时间比较问题。这通常是由于本地计算机和服务器之间的时间差异（您可能会在几分钟内关闭一个或另一个，从而导致任务中的不稳定行为）。另一种可能性是服务器位于不同的时区并使用本地时间而不是UTC。 S.O.的答案问题Gulp Vinyl FTP Timezone Issue可能会帮助你。

手工编辑/css中的文件和运行gulp sass来重新生成它们之间应该没有区别;重要的是修改时间（运行ls -l css来查看，所以你知道正在查看什么，并可以将它与服务器上的文件进行比较）。有一点需要注意的是，只需重新运行gulp sass而不对SCSS文件进行任何更改，就不会使用新的时间戳更新/css中的文件。这是gulp的一个功能，可能会在你测试时绊倒你。