如何使用 gulp / browsersync 或类似的东西来观看和分配动态的源列表

Question

我是运行具有文件监视功能和 BrowserSync 的 gulpfile。

我正在寻找一种无需重新启动所有任务即可动态更改任务源数组的方法 tasks/watches/processes/server。我目前使用 Gulp 作为我的构建过程，但任何具有此功能的类似工具都会很棒。

示例：

gulp.task('scripts', () =>
     gulp.src(['js/file1.js'])
        .pipe(...)
        .pipe(...)
)

改为

gulp.task('scripts', () =>
     gulp.src(['js/file1.js', 'js/file2.js', 'js/file3.js'])
        .pipe(...)
        .pipe(...)
)

无需重新加载浏览器同步进程和其他 gulp.watch 功能。

Answer 1

将所有你想要动态的路径放在一个文件中paths.json:

{
  "scriptFiles": ["js/file1.js"]
}

在您的 gulpfile.js 中添加一个函数 paths() 来读取和解析 JSON 文件：

var fs = require('fs');

function paths() {
  return JSON.parse(fs.readFileSync('paths.json'));
}

在您的任务中使用该函数访问您在 paths.json:

中定义的路径

gulp.task('scripts', () =>
  return gulp.src(paths().scriptFiles)
    .pipe(...)
    .pipe(...)
);

现在您只需编辑 paths.json 中 "scriptFiles" 属性的值，下次您的 scripts 任务运行时，它将使用更新后的值。

How to watch and task an dynamic list of sources with gulp / browsersync or something alike