Gulpタスクは私が特に保存したファイルを逃して残りのすべてをビルドします

Question

私は、サーバーを削除してgulpをセットアップし、ウォッチャーがオンになっているjsとscssのタスクを取得しました。テキストエディタでファイルを保存すると、ウォッチャがファイルの変更を確認してタスクを開始するサーバにsftpが送信されますが、ほとんどの場合、コンパイルされたファイルは今保存したファイルを失います。

私はそれが私がmain.scssにすべて含まれている複数の_example.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タスクを起動し、現在空のファイルをコンパイルします。ネットワークの速度が遅いほど、転送に時間がかかります。 '修正'は、ファイルをコンパイルする前に一定の時間だけタスクを遅らせることです。私はhttps://www.npmjs.com/package/gulp-waitを使用しましたが、私は他人がそのトリックをすることができると確信しています。