javascript - 无法让 gulp watch 触发所谓监视文件夹内文件更改的构建功能

Question

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

我确信在 grunt 中，只需将一个监视任务添加到构建任务数组中，然后它就会通过在开发 session 期间保持监视打开以监听更改来完成初始构建。

我已经尝试过这个，它取自 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来运行所有这些

not sure about mybuildtask string syntax