gulp.watch() 不适用于 ftp 更新答案

【问题标题】：gulp.watch() not working with ftp updategulp.watch() 不适用于 ftp 更新
【发布时间】：2014-07-27 09:52:52
【问题描述】：

我最近学习了 gulp，并在我的本地计算机上编写了这个 gulp 脚本，以便它可以监视任何更改，并将我的 javascripts（在本例中为 ./js/main.js 及其依赖项）编译成单个文件 ./js/bundle.js ：

var gulp = require('gulp');
// Plugins
var jshint = require('gulp-jshint');
var browserify = require('gulp-browserify');
var rename = require('gulp-rename');

// Lint Task
gulp.task('lint', function() {
  return gulp.src(['./js/**/*.js', '!./js/bundle.js'])
    .pipe(jshint())
    .pipe(jshint.reporter('default'));
});

// browserify task
gulp.task('b', function() {
  gulp.src('js/main.js')
    .pipe(browserify())
    .pipe(rename('bundle.js'))
    .pipe(gulp.dest('js/'));

});

// Watch Files For Changes
gulp.task('watch', function() {
  gulp.watch(['./js/*.js', './js/**/*.js', '!./js/bundle.js'], ['lint', 'b'])
    .on('change', function(event) {
      console.log("\n============");
      console.log('File ' + event.path + ' was ' + event.type + ', running tasks...');
    });
});

// Default Task
gulp.task('default', ['lint', 'watch']);

它在我的本地计算机 (Windows 7) 上运行良好，所以我尝试将它放到我的远程 Ubuntu 服务器上，让它监视任何 ftp 更新并浏览它们。

换句话说，我想远程编码并通过 ftp 更新./js/main.js，并让 gulp 监视更改并自动浏览它。

问题是：Gulp 识别出更改并登录控制台：

File /home/wordpress/public_html/cm/mobileCoder02/src/js/main.js was changed, running tasks...
[09:27:47] Starting 'lint'...
[09:27:47] Starting 'b'...
[09:27:47] Finished 'b' after 34 Î¼s
[09:27:47] Finished 'lint' after 6.71 ms

但输出文件 bundle.js 只包含模块加载器脚本：

(function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);throw new Error("Cannot find module '"+o+"'")}var f=n[o]={exports:{}};t[o][0].call(f.exports,function(e){var n=t[o][1][e];return s(n?n:e)},f,f.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){

},{}]},{},[1])

如果我将任务更改为

// browserify task
gulp.task('b', function() {
  setTimeout(function() {
    gulp.src('js/main.js')
      .pipe(browserify())
      .pipe(rename('bundle.js'))
      .pipe(gulp.dest('js/'));
  }, 1000);

});

然后代码运行正常。

我想问一下为什么浏览器需要等待一段时间。 gulp.watch() 不应该在 ftp 传输完成后触发“更改”事件吗？如果不是，至少应该使用旧版本吧？

谢谢。

【问题讨论】：

标签： javascript ftp gulp browserify gulp-watch

【解决方案1】：

乍一看，我认为这种行为主要是由于FTP Protocol 的工作原理。

事实上，在Stream、Block 或Compressed 的每种传输模式下，并非所有数据都一次发送。您的所有传输都被切成小块数据，实际上是8 bits 的byte size。这就是FTP clients 可以通过将成功传输的packets 数量与您要传输的文件所包含的packets 的实际数量进行比较来确定传输进度的方式。

这一切都说明当你启动uploadmain.js文件时，client开始传输数据（默认使用Stream模式，顾名思义，@ bytes 的 987654335@ （嘿！就像gulp ！）），在大多数情况下发送STOR 命令，如果文件不存在则在服务器上创建一个文件，否则替换其所有内容。

由于每次文件更改都会触发gulp watcher，因此即使文件未完成上传，只需单击一次成功传输数据包即可启动您的任务。就像我说的，当文件已经存在于服务器上时，它的所有内容都会在数据传输之前被清除，所以你的task 将运行一个空文件或部分文件。

您的timeout 在这里有助于等到文件上传完成，顺便说一下1 second 现在可以工作，但对我来说似乎有点短，特别是如果您的连接不佳或你的文件大小会扩大。

您可以查看RFC 959 了解更多详细信息，这是FTP Protocol 的当前标准规范。

【讨论】：

【解决方案2】：

我遇到了同样的问题。我现在使用 Python 库 when-changed，而不是使用 gulp-watch。它监视目录中的文件更改，但它似乎没有与 gulp 一样的 FTP 上传问题。

我已经删除了我的 gulpfile 的监视部分，现在正在使用以下命令运行“监视”部分：

when-changed -r /var/www/website/css/internal /var/www/website/js/internal -c gulp

【讨论】：