0

This issue...

... remembers me to another one, but seems different. (scroll down after code, to see what I mean)

I don't have really a problem with gulp-watch in other projects, especially since I fixed a similar issue. (which you can find on the end of this post)

But in this project (bigger web-application) I think nodejs/gulp-watch hitting his limit.

The JS-file which I get from gulp (via gulp-watch) seems to be corrupted when it was fired more then once.

The Javascript-file...

  • ...isn't corrupted, when I use the default-task via gulp command.
  • ...isn't corrupted, on the first recognized change by the watch-event.
  • ...is often corrupted, after all following fired tasks of the watch-event.

I compared the good and bad (corrupted) resulting JS-files and recognized, that one file lost the half part of his content.

MEANS:

It stops in the middle of the JS-file and continues with the next JS-File. (concat only a half of the js-file)

All other JS-files before and after are concatenated without lost.

Does anyone knows this issue and know how to fix?

I already tried...

  • ...to add gulp-wait with a 500ms delay, but that doesn't had a effect.
  • ...check if the code on this position is bad, but it seems valid.
  • ...restart the machine.

Environment: NodeJS 4.4.7 on Debian Jessie.

terminal output: These 8 starting script-tasks aren't fired at once. This are different detected changes when saving file and uploading this into the server and directory where Gulp is watching. (the arrows, worked & failed text aren't part of the output)

user@host: /path/to/vhost/public$ gulp watch
[20:09:02] Using gulpfile /path/to/vhost/public/gulpfile.js
[20:09:02] Starting 'watch'...
[20:09:02] Finished 'watch' after 25 ms
[20:09:32] Starting 'scripts'...
[20:09:32] Finished 'scripts' after 84 ms <- worked
[20:09:49] Starting 'scripts'...
[20:09:49] Finished 'scripts' after 51 ms <- failed
[20:09:51] Starting 'scripts'...
[20:09:51] Finished 'scripts' after 38 ms <- failed
[20:09:53] Starting 'scripts'...
[20:09:54] Finished 'scripts' after 68 ms <- worked
[20:10:01] Starting 'scripts'...
[20:10:02] Finished 'scripts' after 63 ms <- worked
[20:10:18] Starting 'scripts'...
[20:10:19] Finished 'scripts' after 59 ms <- failed
[20:10:35] Starting 'scripts'...
[20:10:35] Finished 'scripts' after 52 ms <- worked
[20:10:53] Starting 'scripts'...
[20:10:54] Finished 'scripts' after 58 ms <- failed

gulpfile.js:

/////////////
// INCLUDE //
/////////////

var gulp = require('gulp');

// Plugins
var autoprefixer = require('gulp-autoprefixer');
var concat = require('gulp-concat');
var rename = require('gulp-rename');
var sass = require('gulp-ruby-sass');
var uglify = require('gulp-uglify');
var expect = require('gulp-expect-file');

// Globals
var jsFiles = ['js/custom1.js',
             'js/custom2.js',
             'js/custom3.js',
             'js/custom4.js',
             'js/custom5.js',
             'js/custom6.js',
             'js/custom7.js',
             'js/custom8.js',
             'js/custom9.js',
             'js/custom10.js',
             'js/custom11.js',
             'js/custom12.js',
             'js/custom13.js',
             'js/custom14.js',
             'js/custom15.js',
             'js/custom16.js',
             'js/custom17.js',
             'js/custom18.js'];

var cssFiles = ['scss/style.scss'];



///////////
// TASKS //
///////////

// FILES
gulp.task('files', function() {
  var files = cssFiles.concat(jsFiles);
  return gulp.src(files)
    .pipe(expect(files));
});

// SCRIPTS
gulp.task('scripts', function() {
    return gulp.src(jsFiles)
        .pipe(concat('script.js'))
        .pipe(rename({suffix: '.min'}))
        // .pipe(uglify())
        .pipe(gulp.dest(''));
});

// SASS
gulp.task('sass', function() {
    return sass(cssFiles, {style: 'compressed'})
        .pipe(autoprefixer({
            browsers: ['last 2 versions'],
            cascade: false
        }))
        .pipe(rename({suffix: '.min'}))
        .pipe(gulp.dest(''));
});

// DEFAULT
gulp.task('default', ['files','scripts', 'sass']);

// WATCH
gulp.task('watch', function() {
    // Watch .js files
    gulp.watch(jsFiles, ['scripts']);
    // Watch .scss files
    gulp.watch(cssFiles, ['sass']);
});

REMEMBERS ME TO ANOTHER BUG

Two month ago I had a similar bug like this, which only worked once when the watch-task was fired. After that, you had to restart the command. Strange was that in the terminal wasn't any error message and it responded as if it would work. But the result was an empty css-file.

I fixed this OLD issue by updating my nodejs-installation from 0.12.x to 4.x.x.

But the current issue seems different.

Community
  • 1
  • 1
Sascha
  • 615
  • 1
  • 9
  • 20

2 Answers2

0

From your log, it looks like scripts is being run too often, which could cause conflicts. Are you outputting your concatted file to the source folder, retriggering the task?

.pipe(gulp.dest(''));

What happens if you output to a different folder?

.pipe(gulp.dest('dist/'));
peterorum
  • 1,401
  • 2
  • 15
  • 21
  • No, there is a misunterstanding. The terminal-output fired not at once, that was different saves. That's why I added the worked/failed market to it. I fixed this in my post. Thank you for your suggestion, I tried to change the destination liked you wrote, but that doesn't helped. – Sascha Aug 12 '16 at 08:46
0

Found the reason and solution:

gulp-watch fired to fast and executes while the upload via FTP wasn't finished.

So gulp-watch can't differ your upload methode... and just firing when it recognizing a change. Instead to wait until the full file is uploaded sucessfully.

The solution would be to change the upload-methode of your FTP client or just selecting another watcher which can recognize this. (I use when-changed * ) at the moment.

This thing toggles two times when I upload a file on save. That is a good indicator that SFTP seems to upload data in parts. So I will read now how to change the upload-methode in Sublime SFTP. (so that I can switch back to gulp-watch again.

Sascha
  • 615
  • 1
  • 9
  • 20