书接上文，Chrome 插件中无法直接使用 Handlebars 处理模板。两种方案，一是利用沙箱，将 .eval() 放在独立的环境中执行，好处是其它跨域的操作也能这样处理，坏处是写起来麻烦。另一种则是利用 Handlebars 的“预编译”功能，将模板提前编译好，直接在代码中引用。好处是写起来更顺畅，并且从发布插件的角度来看，早晚都要这样做。
我决定选用后者，于是我需要把模板提取出来进行预编译，然后我准备写个 Gulp 任务来搞定这个。
从页面中提取模板不算太难，写个正则就好，这里提前约定，模板使用 <script type="x-handlebars-template"> 标签包裹。
gulp.task('template', function () {
let promise = new Promise((resolve, reject) => {
fs.readFile('popup.html', (err, content) => {
if (err) reject(err);
resolve(content);
}
});
promise.then((content) => {
content.replace(/<script([^>]*)>([\S\s]+?)<\/script>/g, (match, attr, template) {
// 具体处理模板，略掉了
});
})
});
模板编译之后，还需要用 Webpack 打包才能使用，于是要增加 Webpack 的任务。这个比较简单，参考它的 文档 即可。不过很明显，必须等全部模板预编译完成才能打包。之前我已经试过用 run sequence 顺序执行任务，不过这里我用到 Promise，情况似乎有变。
稍微 Google 一下，得知要能顺序执行任务有三种选择：
使用 callback
gulp.task('task', function (callback) {
setTimeout(function () {
// 任务执行完成后，调用 callback
callback();
}, 5000);
});
返回 stream
这个好像是标准做法，也是我之前做的。
gulp.task('task', function (callback) {
returen gulp.src('*.js')
.pipe(uglify())
.pipe(gulp.desc('dist/');
});
返回 Promise 对象
gulp.task('task', function () {
return new Promise(resolve, reject) => {
resolve();
});
});
既然支持 Promise 那就好办了，在 .then() 前面加一个 return 就好。