Gulp с watchify/browserify запускается дважды, а затем прекращает просмотр

Только что столкнулся с этой проблемой. После просмотра ответов в Интернете в течение пары часов я попытался отредактировать файл в Блокноте вместо PHPStorm IDE. Оказалось, что browserify/watchify продолжали работать через блокнот.

Именно тогда я попытался поиграться с некоторыми настройками. Оказалось PHPStorm/Системные настройки/Использовать «безопасную запись», если включено, прекращает watchify после того, как PHPStorm отредактирует файл.

Все проблемы волшебным образом исчезли, когда я отключил «безопасную запись». Я не уверен, какую IDE вы используете, но, возможно, есть опция «Безопасная запись».

Для меня это тоже не было очевидным, когда я впервые использовал watchify для ускорения времени компиляции браузера js. При использовании watchify gulp.watch больше не требуется. Чтобы увидеть время компиляции/сборки в окне вывода/задач, вы можете сделать следующее (обратите внимание на команду gutil.log):

    var gulp = require('gulp');
    var gutil = require('gulp-util');
    var source = require('vinyl-source-stream');
    var buffer = require('vinyl-buffer');
    var watchify = require('watchify');
    var browserify = require('browserify');

    var bundler = watchify(browserify('./src/app.js', watchify.args));
    gulp.task('browserify', bundle);

    bundler.on('update', bundle); 

    function bundle() {
        var start = new Date().getTime();

        var b = bundler.bundle()
          .on('error', gutil.log.bind(gutil, 'Browserify Error'))
          .pipe(source('bundle.js'))
          .pipe(buffer())
          .pipe(gulp.dest('./src/dist'));

        var end = new Date().getTime();
        var time = end - start;

        gutil.log('[browserify]', 'rebundle took ', gutil.colors.cyan(time + ' ms'));
        return b;
    }

Посмотрите, поможет ли это.

Вот как выглядит мой новый рабочий файл gulp. Не доставил мне никаких проблем и выполняет то же самое. Почти уверен, что @Ben был прав - gulp.watch и watchify конфликтовали.

var gulp = require('gulp');
var source = require('vinyl-source-stream');
var browserify = require('browserify');
var watchify = require('watchify');
var reactify = require('reactify');
var chalk = require('chalk');
var gcallback = require('gulp-callback');
var moment = require('moment');
var gutil = require('gutil');

var jsDest = '../../server/webship/html/html/static/js';
var viewsDir = './js/views';

var watchifyArgs = watchify.args;
watchifyArgs.debug = true;

var bundler = watchify(browserify('./js/views/main.jsx', watchifyArgs));
// add any other browserify options or transforms here
bundler.transform(reactify);

bundler.on('time', function (time) {
    var durationOfBundleBuild = moment.duration(time).asSeconds();
    console.log(chalk.green('Updated'), ' bundle in ', chalk.bold(durationOfBundleBuild + 's'), '\n');
});

gulp.task('watch', function() {

    bundle(true);

    bundler.on('update', function() {
        console.log('updating...');
        bundle(true);
    });
});

gulp.task('build', function() {
    bundle();
    bundler.close();
});

function bundle(watching) {

    console.log(chalk.yellow('Updating') + ' bundle...');

    bundler.bundle()
        .on('error', gutil.log.bind(gutil, 'Browserify Error'))
        .pipe(source('bundle.js'))
        .pipe(gulp.dest(jsDest))
        .pipe(gcallback(function() {

            if (!watching) {
                process.nextTick(function() {
                    process.exit(0);
                });
            }
        }));
}

Я думаю, что watchify и gulp.watch, вероятно, конфликтуют, когда они оба пытаются перестроить ваш пакет. Я бы удалил задачу watch и просто использовал задачу browserify напрямую.

Если вы используете vim и столкнулись с этой проблемой, но не используете и watchify, и gulp.watch, попробуйте выполнить :set noswapfile или добавить set noswapfile в .vimrc.

Я считаю, что это исправление работает, потому что схема vim создания и редактирования файла .swp во время работы и последующей замены файла файлом подкачки при фактическом сохранении мешает способности watchify получать события файловой системы.

Обратите внимание, что :set noswapfile означает, что ваши изменения не сохраняются на диск до тех пор, пока вы не сделаете :w!