Les tâches Gulp manquent le fichier que j'ai spécifiquement sauvegardé et construisent tout le reste - javascript, node.js, gulp, gulp-watch, gulp-sass

J'ai installé gulp sur un serveur de suppression et obtenu des tâches pourjs et scss qui ont watcher. Chaque fois que j'enregistre un fichier dans mon éditeur de texte, le sftp est transféré vers le serveur, où l'observateur voit le fichier changer et commence la tâche, mais les fichiers compilés omettent presque toujours le fichier que je viens d'enregistrer.

Ce que je veux dire par là, c'est que j'ai plusieurs _example.scss qui sont tous inclus dans un main.scss, il compilera et affichera tous les styles dans chaque fichier _example.scss, à l'exception de celui que je viens de sauvegarder.

Cela se produit à la fois pour les tâches JS et SASS, mais uniquement lorsque l'observateur démarre la tâche. Si j'arrête et démarre Gulp, tous les fichiers sont compilés.

Voici le 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"]);

Pour que ce soit clair, je n’obtiens aucune erreur du terminal. Ma sortie ressemble à ceci.

[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

Réponses:

Pour ceux qui viennent chercher une réponse, vous pouvez vous référer à la réponse à cette question. gulp.watch () ne fonctionne pas avec la mise à jour ftp

TL; DR Le protocole de transfert FTP envoie d’abord un messagepaquet pour confirmer qu'il peut envoyer le reste du fichier. Ce paquet initial déclenche la tâche GULP et compile un fichier qui est actuellement vide. Plus le réseau est lent, plus le transfert prend longtemps. Le «correctif» consiste à retarder une tâche pendant un certain temps avant de compiler vos fichiers. . J'ai utilisé https://www.npmjs.com/package/gulp-wait mais je suis sûr que les autres peuvent faire l'affaire.