gulp.watch（）不使用ftp update

Question

我最近學習了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 ，並且./js/main.js監視更改並自動瀏覽它。

問題是：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);

});

然后代碼運行正常。

我想問為什么在瀏覽之前必須等待一段時間。 在ftp傳輸完成后， gulp.watch()應該觸發'更改'事件嗎？ 如果沒有，不應該至少使用舊版本？

謝謝。

Answer 1

乍一看，我認為這種行為主要是由於FTP Protocol工作原理。

事實是，在每種傳輸模式中， Stream ， Block或Compressed ，並非所有數據都是一次發送的。 所有傳輸都被切成小塊數據，實際上是8 bits byte size 。 這是怎樣FTP clients可以決定一個傳送的進展，通過比較多少packets與實際數量已成功傳輸packets要傳輸的文件組成。

所有這一切都說當你開始upload你的main.js文件時， client開始傳輸數據（默認情況下使用Stream模式，顧名思義，這是一個bytes stream （嘿！就像gulp ！ ）），在大多數情況下發送STOR命令，如果文件不存在則在服務器上創建文件，否則替換其所有內容。

由於每次更改文件都會觸發gulp watcher器，因此成功傳輸數據包的單個勾選可以啟動您的任務，即使文件未完成上傳也是如此。 就像我說的那樣，當文件已存在於服務器上時，在傳輸數據之前會清除其所有內容，因此您的task將使用空文件或部分文件運行。

你的timeout有助於等到文件完成上傳 ，順便說一下現在1 second工作，但對我來說似乎有點短，特別是如果你的連接不好或文件大小會擴大。

您可以查看RFC 959以獲取更多詳細信息，這是FTP Protocol的當前標准規范。

Answer 2

我遇到過同樣的問題。 而不是使用gulp-watch我現在在更改時使用Python庫。 它監視目錄中的文件更改，但它似乎與gulp沒有相同的FTP上傳問題。

我刪除了gulpfile的監視部分，現在使用以下命令運行'watch'部分：

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