如何把 AJAX 获取的数据传递到 Swig 模板中？

Question

老师们好！

现在构建工具用的 gulp，使用 gulp-swig 插件可以解析页面中的模板语法，就像下面这样：

const page = () => {
    return src('src/*.html')
        .pipe(plugins.swig({
            data: { name: '' },
        }))
        .pipe(dest('dist'));
};

但问题是模板中的数据都来自于 gulpfile.js，当前端用 AJAX 获取到的数据如何让模板文件使用呢？

我知道 art-template 有对应的客户端模板的使用，需要把模板放到 script 标签中，然后通过 template(模板ID，数据) 的形式进行拼接，但好像 Gulp 没有很好的编译 art-template 模板文件的插件。

Answer 1

gulp 支持用 Promise 定义任务，所以这样的功能其实很容易实现，我好久没折腾 gulp 了，所以写一段伪代码供参考：

// 存储数据的变量
let localData;

gulp.task('fetch', () => {
  return axios.get('/api/data')
    .then(data => {
      localData = data;
    });
});

gulp.task('render', () => {
  return src('src/*.html')
    .pipe(swig({data})
    .pipe(dest('dist'));
});

gulp.task('default', series('fetch', 'render', taskDone => taskDone()));