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

【问题标题】：How can I get Gulp to recognise changes/updates in compiled files?如何让 Gulp 识别编译文件中的更改/更新？
【发布时间】：2019-06-07 16:13:23
【问题描述】：

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

一切正常，但一方面 - Gulp 似乎不知道 main.css 文件何时更新。

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

如果我在 IDE 中打开它，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 上

【问题讨论】：

这可能需要更多信息——到目前为止，听起来它的行为完全符合其应有的行为。如果你编辑一个 scss 文件，gulp 会识别它并重新生成相应的 css 文件。请注意，您当然必须重新运行gulp sass。（您的 gulpfile 不包含“监视”任务，如果您的问题与监视任务有关，则应在问题中包含该代码。）
@ElliotNelson，是的，gulp sass 命令工作正常 - .css 是用我对 .scss 的更改编译的。问题在于ftp-deploy。如果我在 IDE 中手动更改文件，它只会识别文件已更改（因此它会看到 scss 文件中的更改，而不是 css 文件中的更改）。

标签： node.js npm gulp

【解决方案1】：

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

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

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

【讨论】：