2017-02-16 2 views
0

Я настраиваю gulp на удаленный сервер и получаю задачи для js и scss, на которых есть наблюдатель. Всякий раз, когда я сохраняю файл в текстовом редакторе, он получает sftp на сервер, где наблюдатель видит, как файл изменяется и запускает задачу, но почти каждый раз скомпилированные файлы пропускают только что сохраненный файл.Задачи Gulp пропускают файл, который я специально сохранил и строит все остальное

Что я имею в виду, это то, что у меня есть несколько _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 
+0

Когда вы говорите, что глоток «пропускает» ваш файл, вы имеете в виду, что задача стилей завершается, но скомпилированный css включает в себя предыдущую версию частица sass, которую вы только что отредактировали? – biggles

+0

Нет. Я имею в виду, что он сохраняет все остальные файлы, кроме этого, он игнорирует его, как будто он не существует как все. Это как если FTP-передача удаляет файл, он думает, что он изменяется, они строятся, пока файл отсутствует, а затем файл снова записывается на сервер: /. Есть идеи? – Teddy

+0

Итак, часть, которую вы сохранили, не включена в скомпилированный css? Как запускается задача с глотанием? Выполняется ли gulp.watch на сервере? Если это так, мне придется догадаться, что на самом деле это проблема с тем, как FTP пишет на сервер. – biggles

ответ

1

Для тех, кто прибывает сюда в поисках ответа, вы можете обратиться к ответу этого вопроса gulp.watch() not working with ftp update

TL; протокол передачи Д.Р. FTP первым посылает пакет подтверждения может послать остальную часть файл. Этот начальный пакет запускает задачу GULP и компилирует файл, который в настоящее время пуст. Чем медленнее сеть, тем дольше это потребуется для передачи. «Исправить» - это отложить задачу на определенное количество времени перед компиляцией ваших файлов. Я использовал https://www.npmjs.com/package/gulp-wait, но я уверен, что другие могут сделать трюк.

+0

В то время как это, вероятно, будет работать большую часть времени, ручное время ожидания - это довольно хакерское решение, в зависимости от скорости и размера сети, как вы сказали. К моменту запуска задачи загрузка файла может быть неполной. Возможно, есть еще один триггер, который можно было бы использовать для запуска задачи глотки, вообще отказавшись от функции вахты gulp? – biggles

+0

Техническое решение да, проблема заключается в том, что мы обнаруживаем начало загрузки файла, а не его завершение. Предполагая, что у вас есть глоток, на котором запущен сервер, вы загружаете файл, вместо того чтобы использовать gulp watcher для проверки изменений файлов, вы используете библиотеку python, такую ​​как https://github.com/joh/when-changed, которая в значительной степени похожа на просмотр файла gulp но срабатывает при завершении загрузки файла, и вы используете это для запуска команды gulp, например 'when-changed -r/var/www/website/css/internal/var/www/website/js/internal -c gulp'. Тем не менее, вы можете создать сценарий bash для того же самого эффекта. – Teddy

Смежные вопросы