无法获得 gulp watch 以触发在所谓的监视文件夹中的文件更改的构建功能

Question

我尝试了几种方法让 gulp 监视文件文件夹，以便在文件更改时重建并避免我不得不手动执行此操作。

我相信在 grunt 中，这只是通过向构建任务数组添加一个监视任务，然后它会通过在开发会话期间打开监视以侦听更改来完成初始构建。

我已经试过这个，取自 this example from the 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)

我也试过这个，基于this example from the gulp readme：

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

我可能弄错了，但我希望这可以观察 glob 的变化并应用该功能。该函数需要一些 JSX 并使用 ReactJS 转换为原始 JS，然后将它找到的所有文件连接到单个 js 文件中。

没有错误，但我在根目录中获得了一个新目录，该目录遵循 glob 中的模式，创建了已保存文件的新编译示例

我没有上述两次尝试的完整文件在这里：

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']);

Answer 1

1. 尝试使用 gulp 找到一些 Yeoman 生成器并安装它们
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 字符串语法