gulp.watch（）不能用于ftp更新 [英] gulp.watch() not working with ftp update
问题描述
我最近在本地计算机上学习了gulp并编写了这个gulp脚本，以便它可以监视任何更改，并编译我的javascript（在这种情况下， ./ js / main.js 及其依赖关系）转换为一个文件 ./ js / bundle.js ：
var gulp = require（'gulp'）;
//插件
var jshint = require（'gulp-jshint'）;
var browserify = require（'gulp-browserify'）;
var rename = require（'gulp-rename'）;
Lint任务
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（重命名（'bundle.js'））
.pipe（gulp.dest（'js /'））;
}）;
$ b $ //观看文件以进行更改
gulp.task（'watch'，function（）{
gulp.watch（['./ js / *。js'，' ./js/**/*.js'，'！./ js / bundle.js']，['lint'，'b']）
.on（'change'，function（event）{
console.log（\\\
============）;
console.log（'File'+ event.path +'是'+ event.type +'，运行任务...'）;
}）;
}）;
//默认任务
gulp.task（'default'，['lint'，'watch']）;
它在我的本地计算机（Windows 7）上运行良好，所以我尝试将它放到远程Ubuntu服务器，并让它监视任何ftp更新并浏览它们。
换言之，我想远程编码并更新 ./ js /
问题是：Gulp识别出这个变化并记录下来在控制台上：
文件/home/wordpress/public_html/cm/mobileCoder02/src/js/main.js已更改，运行任务...
[09:27:47]开始'lint'...
[09:27:47]开始'b'...
[09:27： 47] 34微克
后完成'b'[09:27:47] 6.71毫秒后完成'lint'
但是输出文件 bundle.js 只包含模块加载器脚本：
（函数e（t，n，r）{函数s（o，u）{if（！n [o]）{if（！t [o]）{var a = typeof需要== 功能与 &&安培;再quire; if（！u& a）return a（o，！0）; if（i）return i（o，！0）; throw new Error（Can not 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（0）; o
}，{如果我将任务更改为，那么您可以使用
// browserify任务
gulp.task（'b'，function（）{
setTimeout（function（）{
gulp.src（'js / main.js'）
.pipe（browserify（））
.pipe（重命名（'bundle.js'））
.pipe gulp.dest（ 'JS /'））;
}，1000）;
}）;
然后代码运行OK。
我想问问为什么在浏览之前必须等待一段时间。在ftp传输完成后，不应该发出'change'事件吗？ gulp.watch（）如果没有，不应该至少使用旧版本吗？
谢谢。
解决方案乍一看，我认为这种行为主要是由于 FTP协议的作用。
事实是，在每种转移模式下， Stream ， Block 或压缩，并不是所有的数据都是一次发送的。所有传输都被分割成小块数据，实际上是 8位字节大小。这就是 FTP客户端如何通过比较成功传输多少个包与实际数量的比较来确定传输的进度的包您要传输的文件包含。
所有这些都说明，当您启动 upload 您 main.js 文件，客户端开始传输数据（默认情况下，使用 Stream 模式，这正如其名称所示，流 bytes （嘿！就像 gulp ！）），在大多数情况下发送 STOR 命令，在服务器上创建一个文件，如果它不存在或者替换它的所有内容。
由于 gulp watchcher 会在每次文件更改时触发，即使文件没有上传完成，成功传输数据包的单个刻度也会启动您的任务。就像我说的那样，当文件已经存在于服务器上时，它的所有内容都会在数据传输之前被清除，所以任务将以空文件或部分文件运行。
您的超时有助于在等到文件完成上传方式 1秒现在可以使用，但对我来说似乎有些短暂，特别是如果您的连接不良或文件大小会扩大。
有关更多详细信息，请查看 RFC 959 ，这是 FTP协议的当前标准规范。
I have recently learnt gulp and scripted this gulp script on my local computer, so that it can watch for any changes, and compile my javascripts (in this case, ./js/main.js with its dependencies) into a single file ./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']);
It runs well on my local computer (Windows 7), so I tried putting it to my remote Ubuntu server, and let it watch for any ftp updates and browserify them.
In other words, I want to code remotely and update ./js/main.js through ftp, and have gulp watch for the changes and browserify it automatically.
The problem is: Gulp recognizes the change and logged on the console:
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
But the output file, bundle.js contains nothing but the module loader script:
(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])
If I change the task to
// browserify task
gulp.task('b', function() {
setTimeout(function() {
gulp.src('js/main.js')
.pipe(browserify())
.pipe(rename('bundle.js'))
.pipe(gulp.dest('js/'));
}, 1000);
});
Then the code runs OK.
I would like to ask why it have to wait for some time before browserifying. Shouldn't gulp.watch() be firing 'change' event after the ftp transfer is finished? If not, shouldn't it be at least using the old version?
Thank you.
解决方案 At a first glance, I think that behavior is mainly due to how the FTP Protocol works.
The fact is that, in each mode of transfer, Stream, Block or Compressed, not all the data is send at one time. All your transfers are cut into small pieces of data, actually 8 bits of byte size. That's how FTP clients can determine the progress of a transfer, by comparing how many packets were successfully transferred with the actual number of packets the file you want to transfer consists.
All this to say that when you start the upload of you main.js file, the client begin to transfer the data (by default using the Stream mode, which is as its name suggest, a stream of bytes (Hey ! Just as gulp !)), sending in most of the cases the STOR command, creating a file on the server if it doesn't exists or replace all its content otherwise.
Since the gulp watcher is triggered on each file change, a single tick of a successful transfer packet can launch your task, even if the file is not done uploading. And like I say, when the file already exists on the server, all its content is cleaned before the data is transferred, so your task will run with an empty or partial file.
Your timeout helps here to wait until the file is done uploading, by the way 1 second works for now but seems a little short to me, specially if you have a poor connection or that your file size gonna expand.
You can have a look to the RFC 959 for more details, which is the current standard specification for the FTP Protocol.
这篇关于gulp.watch（）不能用于ftp更新的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
