Gulp tasks 缺少我专门保存的文件并构建所有其余文件

Question

我在移除服务器上设置了 gulp 并获得了 js 和 scss 的任务，这些任务开启了 watcher。每当我在文本编辑器中保存文件时，它都会通过 sftp 上传到服务器，观察者会在服务器上看到文件更改并启动任务，但几乎每次编译后的文件都会错过我刚刚保存的文件。

我的意思是，我有多个 _example.scss 都包含在一个 main.scss 中，它将编译并输出每个 _example.scss 文件中的所有样式，除了我刚刚保存的那个。

JS 和 SASS 任务都会发生这种情况，但仅当观察者启动任务时才会发生。如果我停止并启动 Gulp，所有文件都是已编译的。

这是gulpfile.js

var gulp = require('gulp');
var gutil = require('gulp-util');
var gulpif = require('gulp-if');
var autoprefixer = require('gulp-autoprefixer');
var sass = require('gulp-sass');
var cleanCSS = require('gulp-clean-css');
var concat = require('gulp-concat');
var plumber = require('gulp-plumber');
var buffer = require('vinyl-buffer');
var source = require('vinyl-source-stream');
var babelify = require('babelify');
var browserify = require('browserify');
var watchify = require('watchify');
var uglify = require('gulp-uglify');
var sourcemaps = require('gulp-sourcemaps');
var transform = require('vinyl-transform');
var streamify = require('gulp-streamify');

/*
 |--------------------------------------------------------------------------
 | Same as browserify task, but will also watch for changes and re-compile.
 |--------------------------------------------------------------------------
*/
gulp.task('js', function() {
    return browserify('./js/main.js')
        .transform(babelify, {presets: ["es2015"]})
        .bundle()
        .on('error', function(e) {
            gutil.log(e);
        })
        .pipe(source('bundle.js'))
        .pipe(streamify(uglify()))
        .pipe(gulp.dest('./js/build'));
});

/*
 |--------------------------------------------------------------------------
 | Compile LESS stylesheets.
 |--------------------------------------------------------------------------
 */
gulp.task('styles', function() {
  return gulp.src('./scss/main.scss')
    .pipe(sass.sync().on('error', sass.logError))
    .pipe(cleanCSS())
    .pipe(gulp.dest('./css'));
});

gulp.task('watch', function() {
  gulp.watch('./scss/**/*.scss', ['styles']);
  gulp.watch('./js/components/*.js', ['js']);
  gulp.watch('./js/*.js', ['js']);
});

gulp.task('default', ['styles', 'js', 'watch']);

为了清楚起见，我没有从终端收到任何错误。我的输出看起来像这样。

[15:45:50] Using gulpfile /example/path/to/gulpfile.js
[15:45:50] Starting 'styles'...
[15:45:50] Starting 'js'...
[15:45:50] Starting 'watch'...
[15:45:50] Finished 'watch' after 17 ms
[15:45:50] Finished 'styles' after 221 ms
[15:45:53] Finished 'js' after 2.86 s
[15:45:53] Starting 'default'...
[15:45:53] Finished 'default' after 4.96 μs

Answer 1

过来找答案的可以参考这个问题的答案gulp.watch() not working with ftp update

TL;DR FTP 传输协议首先发送一个数据包以确认它可以发送文件的其余部分。该初始数据包触发 GULP 任务并编译当前为空的文件。网络越慢，传输所需的时间就越长。 'fix' 是在编译文件之前将任务延迟一定时间。我使用了 https://www.npmjs.com/package/gulp-wait，但我相信其他人也可以做到这一点。

Gulp tasks 缺少我专门保存的文件并构建所有其余文件

Gulp tasks miss the file I specifically saved and builds all the rest

javascript

node.js

gulp

gulp-watch

gulp-sass