Las tareas de Gulp extrañan el archivo que guardé específicamente y compila todo el resto: javascript, node.js, gulp, gulp-watch, gulp-sass

Configuré gulp en un servidor de eliminación y obtuve tareas parajs y scss que tienen vigilado. Cada vez que guardo un archivo en mi editor de texto, se convierte sftp en el servidor, donde el observador ve el archivo cambiar y comienza la tarea, pero casi siempre, los archivos compilados pierden el archivo que acabo de guardar.

Lo que quiero decir con eso, es que tengo varios _example.scss que se incluyen en main.scss, compilará y generará todos los estilos en cada archivo _example.scss, además del que acabo de guardar.

Esto ocurre tanto para JS como para la tarea SASS, pero solo cuando el observador inicia la tarea. Si detengo e inicio Gulp, todos los archivos se compilan.

Aquí está el 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"]);

Para que quede claro, no recibo ningún error de la terminal. Mi salida se ve así.

[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

Respuestas

Para aquellos que vienen buscando una respuesta, pueden consultar la respuesta a esta pregunta gulp.watch () no funciona con la actualización ftp

TL; DR El protocolo de transferencia FTP primero envía unpaquete para confirmar que puede enviar el resto del archivo. Ese paquete inicial desencadena la tarea GULP y compila un archivo que está actualmente vacío. Cuanto más lenta sea la red, más tiempo demorará la transferencia. La "solución" consiste en retrasar una tarea durante un cierto período de tiempo antes de compilar los archivos. . Solía https://www.npmjs.com/package/gulp-wait pero estoy seguro de que otros pueden hacer el truco.