在另一个任务中使用 gulp 任务输出答案

【问题标题】：Using a gulp task output inside another task在另一个任务中使用 gulp 任务输出
【发布时间】：2020-10-06 21:50:06
【问题描述】：

我有两个 gulp 任务如下：

gulp.task("merge-json", () => {
  return gulp
    .src(
      [
        src_folder + "/modules/**/*.json",
        src_folder + "/organisms/**/*.json",
        src_folder + "/pages/**/*.json",
      ],
      {
        since: gulp.lastRun("merge-json"),
      }
    )
    .pipe(plumber())
    .pipe(merge({fileName: "data.json"}))
    .pipe(gulp.dest(src_folder + "/datas/dist/"))
    .pipe(browserSync.stream());
});

gulp.task("nunjucks", () => {
  return gulp
    .src([src_folder + "pages/**/*.njk"], {
      base: src_folder + "pages",
      since: gulp.lastRun("nunjucks"),
    })
    .pipe(plumber())
    .pipe(data(() => JSON.parse(fs.readFileSync(src_folder + "datas/dist/data.json"))))
    .pipe(nunjucks({path: src_folder}))
    .pipe(gulp.dest(dist_folder))
    .pipe(browserSync.stream());
});

第一个任务使用merge-json插件将所有的json文件合并成一个单独的名为data.json的文件，然后这个data.json会被gulp-nunjucks-render插件用来生成html页面。

我这里的问题是在我的项目src中生成了一个名为data.json的文件，它只会用于nunjucks插件。

我的问题是，有没有办法直接在 nunjucks 插件中使用 merge-json (data.json) 插件的输出？

【问题讨论】：

标签： node.js gulp

【解决方案1】：

这不一定是理想的解决方案，但我还是把它留在这里。

使用map-stream，在管道中引入一个新阶段，拦截合并的JSON文件缓冲区的内容并将其存储到共享变量中。

const map = require('map-stream');

// a variable to store the merged JSON string
let mergedJsonString;

gulp.task("merge-json", () => {
    return gulp
        .src(
            [
                src_folder + "/modules/**/*.json",
                src_folder + "/organisms/**/*.json",
                src_folder + "/pages/**/*.json",
            ],
            {
                since: gulp.lastRun("merge-json"),
            }
        )
        .pipe(plumber())
        .pipe(merge({fileName: "data.json"}))
        // only one file should ever be passed - data.json
        .pipe(map((file, callback) => {
            // capture the file buffer as a string
            mergedJsonString = file.contents.toString()
            // pass on the file to the next pipe, unmodified
            callback(null, file)
        }))
        // can optionally be removed if not necessary to save to a file anymore
        .pipe(gulp.dest(src_folder + "/datas/dist/"))
        .pipe(browserSync.stream());
});

现在需要修改 nunjucks 任务以使用不同的数据源并指定 gulp 任务依赖项。如果之前没有运行merge-json 任务，则可以有条件地生成数据源以使用旧的缓存版本；例如JSON.parse(typeof mergedJsonString !== "undefined" ? mergedJsonString : fs.readFileSync(src_folder + "datas/dist/data.json"))

// optionally use gulp.series to create a task dependency on "merge-json", ensuring it runs prior to the "nunjucks" task
gulp.task("nunjucks", gulp.series(["merge-json"], () => {
    return gulp
        .src([src_folder + "pages/**/*.njk"], {
            base: src_folder + "pages",
            since: gulp.lastRun("nunjucks"),
        })
        .pipe(plumber())
        // source the JSON from a variable in memory; or if undefined, maybe change the implementation to use an old cached "/data/dists/data.json" file
        .pipe(data(() => JSON.parse(mergedJsonString)))
        .pipe(nunjucks({path: src_folder}))
        .pipe(gulp.dest(dist_folder))
        .pipe(browserSync.stream());
});

可能需要针对您的特定用例进行一些小的调整，但这确实符合用例，即使它是 hacky。

【讨论】：