Не удается заставить gulp watch запускать функцию сборки при изменении файла в предположительно отслеживаемой папке

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

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

Я пробовал это, взятое из этот пример из файла gulp readme. Я удалил вызов batch, так как хочу, чтобы сборка запускалась при каждом событии.

gulp.task('watch', function () {
    watch('src/**/*.js', function (events, done) {
        gulp.start('build', done);
    });
});

Вызов gulp watch работает, и он, кажется, наблюдает, но эта ошибка отображается, как только я вношу изменения в файл в папке.

Моя функция сборки работает - я до сих пор не так счастлив запускать ее вручную!

/Users/tonileigh/node_modules/gulp/node_modules/orchestrator/index.js:89
                    throw new Error('pass strings or arrays of strings');
                          ^
Error: pass strings or arrays of strings
    at Gulp.Orchestrator.start (/Users/tonileigh/node_modules/gulp/node_modules/orchestrator/index.js:89:12)
    at /Users/tonileigh/development/shadowcat/gulpfile.js:26:14
    at write (/Users/tonileigh/node_modules/gulp-watch/index.js:123:9)
    at /Users/tonileigh/node_modules/gulp-watch/node_modules/vinyl-file/index.js:52:4
    at /Users/tonileigh/node_modules/gulp-watch/node_modules/vinyl-file/node_modules/graceful-fs/graceful-fs.js:76:16
    at fs.js:334:14
    at /Users/tonileigh/node_modules/gulp-watch/node_modules/vinyl-file/node_modules/graceful-fs/graceful-fs.js:42:10
    at /Users/tonileigh/node_modules/gulp-watch/node_modules/chokidar/node_modules/readdirp/node_modules/graceful-fs/graceful-fs.js:42:10
    at FSReqWrap.oncomplete (fs.js:95:15)

Я также пробовал это на основе этого примера. из файла readme:

jsxToJs = function() {
  gulp.src('src/**/*.js')
    .pipe(watch('src/**/*.js'))
    .pipe(react())
    .pipe(concat('javascript.js'))
    .pipe(gulp.dest('./'));
}

Я, вероятно, ошибаюсь, но я ожидаю, что это будет следить за глобальными изменениями и применять функцию. Функция берет немного JSX и преобразует его в необработанный JS с помощью ReactJS, а затем объединяет все найденные файлы в один файл js.

Это не ошибка, но я получаю новый каталог в своем корне, который следует шаблону в глобусе, создавая новый скомпилированный пример сохраненного файла.

Мой полный файл без моих двух вышеуказанных попыток находится здесь:

var gulp = require('gulp'),
    concat = require('gulp-concat'),
    react = require('gulp-react'),
    sass = require('gulp-sass'),
    watch = require('gulp-watch'),

    jsxToJs = function() {
      gulp.src('src/**/*.js')
        .pipe(react())
        .pipe(concat('javascript.js'))
        .pipe(gulp.dest('./'));
    },

    scssToCss = function() {
      gulp.src('src/style.scss')
        .pipe(sass('style.css').on('error', sass.logError))
        .pipe(gulp.dest('./'));
    };

gulp.task('jsxToJs', jsxToJs);
gulp.task('styles', scssToCss);
gulp.task('js', ['jsxToJs', 'concat']);
gulp.task('build', ['jsxToJs', 'styles']);

build javascript frontend gulp gulp-watch
person Toni Leigh    schedule 05.01.2016    source источник

Ответы (1)


arrow_upward
1
arrow_downward

  1. Попробуйте найти генераторы Yeoman с gulp и установить их.
  2. Используйте этот код
    gulp = require('gulp);
    var $ = require('gulp-load-plugins')();
    var browserSync = require('browser-sync);
    var reload = browserSync.reload;

    gulp.task('mysupertask', function () {
        gulp.watch('src/**/*.js').on('change', reload);
    });

это будет перезагружаться каждый раз, когда вы вносите изменения в свой js. Вы можете создать задачу сборки и добавить ее в свой скрипт следующим образом:

...
gulp.task('mybuildtask, function() {
    gulp.src('src/**/*.coffee')
    .pipe($.coffee())
    .pipe($.uglify())
    .pipe(gulp.dest('src/scripts'));
});

gulp.task('mysupertask', function () {
    gulp.watch('src/**/*.js').on('change', ['mybuildtask'],reload);
});

а запустить все это можно gulp mysupertask

не уверен в синтаксисе строки mybuildtask

person Viktorminator    schedule 11.01.2016