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

Question

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

一切工作正常，但有一件事 - Gulp 似乎不知道 main.css 文件何时更新。

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

如果我在 IDE 中打开 main.css，进行更改(例如添加空格或其他内容)，然后保存，Gulp 只会识别 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.1 CLI)

我在 MacOS 10.14.2 上

Answer 1

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

在我看来，这像是一个修改时间比较问题。这通常是由于本地计算机和服务器之间的时间差异造成的(其中一方可能会偏离几分钟，从而导致任务出现不稳定的行为)。另一种可能性是服务器位于不同的时区并使用本地时间而不是 UTC。对 S.O. 的回答问题Gulp Vinyl FTP Timezone Issue可能会帮助你。

在 /css 中手动编辑文件和运行 gulp sass 重新生成它们应该没有区别；重要的是修改时间(运行 ls -l css 来查看，这样您就知道正在查看什么，并可以将其与服务器上的文件进行比较)。需要注意的一件事是，仅重新运行 gulp sass 而不对 SCSS 文件进行任何更改 不会更新 /css 中的文件新的时间戳；这是 gulp 的一个功能，可能会在您测试时给您带来麻烦。