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任务，并编译当前为空的文件。网络越慢，转移所需的时间越长。修复＆＃39;是在编译文件之前将任务延迟一段时间。我使用https://www.npmjs.com/package/gulp-wait，但我确定其他人可以做到这一点。

Gulp任务错过了我专门保存的文件并构建了所有其余的文件

1 个答案: